Is it possible to style a mouseover on an image map using CSS?

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..

Answer 2

With pseudo elements.

HTML:

<div class="image-map-container">     <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/FibonacciBlocks.png" alt="" usemap="#image-map" />     <div class="map-selector"></div> </div>  <map name="image-map" id="image-map">     <area alt="" title="" href="#" shape="rect" coords="54,36,66,49" />     <area alt="" title="" href="#" shape="rect" coords="72,38,83,48" />     <area alt="" title="" href="#" shape="rect" coords="56,4,80,28" />     <area alt="" title="" href="#" shape="rect" coords="7,7,45,46" />     <area alt="" title="" href="#" shape="rect" coords="10,59,76,125" />     <area alt="" title="" href="#" shape="rect" coords="93,9,199,122" /> </map> 

some CSS:

.image-map-container {     position: relative;     display:inline-block; } .image-map-container img {     display:block; } .image-map-container .map-selector {     left:0;top:0;right:0;bottom:0;     color:#546E7A00;     transition-duration: .3s;     transition-timing-function: ease-out;     transition-property: top, left, right, bottom, color; } .image-map-container .map-selector.hover {     color:#546E7A80; }  .map-selector:after {     content: '';     position: absolute;     top: inherit;right: inherit;bottom: inherit;left: inherit;     background: currentColor;     transition-duration: .3s;     transition-timing-function: ease-out;     transition-property: top, left, right, bottom, background;     pointer-events: none; } 

JS:

$('#image-map area').hover(     function () {          var coords = $(this).attr('coords').split(','),             width = $('.image-map-container').width(),             height = $('.image-map-container').height();         $('.image-map-container .map-selector').addClass('hover').css({             'left': coords[0]+'px',             'top': coords[1] + 'px',             'right': width - coords[2],             'bottom': height - coords[3]         })     },     function () {          $('.image-map-container .map-selector').removeClass('hover').attr('style','');     } ) 

https://jsfiddle.net/79ebt32x/1/