Search code examples
phpcsswordpressresponsive-designimagemap

Create a responsive image link map in wordpress

I have an image link map in the header of my wordpress theme that I need to make responsive under 750px. I have been able to make the links show up in the header but they aren't active and I'm not sure why. Right now I'm just trying to get the "p1" link to work.

site is here: indie-scene.com

Here is my php:

<div class="header header-default">
        <img src="<?php echo $ti_option['site_logo']['url']; ?>" alt="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" width="<?php echo $ti_option['site_logo']['width']; ?>" height="<?php echo $ti_option['site_logo']['height']; ?>" />
       <div class="hotspots">
            <a href="http://www.nearlynewlywed.com" class="p1"></a>
        <div title="home">
            <a href="http://www.indie-scene.com" class="p2"></a>
        </div>
        <div title="sell">
            <a href="http://www.nearlynewlywed.com/a/sell" class="p3"></a>
        </div>
      </div>
    </a><!-- Logo -->

and my media query in css

@media only screen and (max-width: 750px)  {
 .header {
   width:100%;
}
 .header img {
  content: url(http://indie-scene.com/wp-content/uploads/2014/10/logo_no_banner.png);
max-width: 276px;
}
.header {width:100%; position:relative; }
.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.header a {display:block; position:absolute; background:#000; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; }
.header a.p1 {left:50%; top:5%; width:50%; height:50%;}
Solution

  • The links aren't appearing because you've set the visibility of your hotspots div to be hidden for widths under 750pxhere:

    .header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; }

    You will either need to remove visibility:hidden; from the CSS above or change it to visibility: visible;.

    enter image description here

    In the above image, I set the visibility of the hotspots div to visible using the developer tools and you can see that your .p1 link is appearing now.