Question

I have an image on a web page that also requires links. I am using an image map to create the links and I am wondering if there is a way to style the area shape on mouseover for a minor touch of interactivity. Is this possible?

I tried this without success:

html

<img src="{main_photo}" alt="locations map"  usemap="#location-map" />
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
    <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
    <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

css

area { border: 1px solid #d5d5d5; }

Any suggestions?

Answer 1

CSS Only:

Thinking about it on my way to the supermarket, you could of course also skip the entire image map idea, and make use of :hover on the elements on top of the image (changed the divs to a-blocks). Which makes things hell of a lot simpler, no jQuery needed…

Short explanation:

• Image is in the bottom
• 2 x a with display:block and absolute positioning + opacity:0
• Set opacity to 0.2 on hover

Example:

.area {
    background:#fff;
    display:block;
    height:475px;
    opacity:0;
    position:absolute;
    width:320px;
}
#area2 {
    left:320px;
}
#area1:hover, #area2:hover {
    opacity:0.2;
}

<a id="area1" class="area" href="#"></a>
<a id="area2" class="area" href="#"></a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />

Original Answer using jQuery

I just created something similar with jQuery, I don’t think it can be done with CSS only.

Short explanation:

• Image is in the bottom
• Divs with rollover (image or color) with absolute positioning + display:none
• Transparent gif with the actual #map is on top (absolute position) (to prevent call to mouseout when the rollovers appear)
• jQuery is used to show/hide the divs

$(document).ready(function() {
  if ($('#location-map')) {
    $('#location-map area').each(function() {
      var id = $(this).attr('id');
      $(this).mouseover(function() {
        $('#overlay' + id).show();

      });

      $(this).mouseout(function() {
        var id = $(this).attr('id');
        $('#overlay' + id).hide();
      });

    });
  }
});

body,
html {
  margin: 0;
}

#emptygif {
  position: absolute;
  z-index: 200;
}

#overlayr1 {
  position: absolute;
  background: #fff;
  opacity: 0.2;
  width: 300px;
  height: 160px;
  z-index: 100;
  display: none;
}

#overlayr2 {
  position: absolute;
  background: #fff;
  opacity: 0.2;
  width: 300px;
  height: 160px;
  top: 160px;
  z-index: 100;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" />
<div id="overlayr1">&nbsp;</div>
<div id="overlayr2">&nbsp;</div>
<img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" />
<map name="location-map" id="location-map">
  <area shape="rect" coords="0,0,300,160" href="#" id="r1" />
  <area shape="rect" coords="0,161,300,350" href="#" id="r2"/>
</map>

Hope it helps..