Adding Hover Effects for Links in Image Map (Area)

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

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" />

change image on hover with image map

an idea would be to use the same listener for all the images then have a switch statement that will check the parameter that is passed in and highlight the corresponds image, right now it work, the xyou're passing is throwing an error because it doesn't exists. also you'll need a mouseleave listener to remove the highlighting.

Demo

function mouseover(x) {

  switch (x) {

    case 'facebook':

      {

        document.getElementById("imageid").src = "https://i.imgur.com/p5oiGSO.jpeg";

      };

      break;

    case 'instagram':

      {

      };

      break;

    case 'twitter':

      {

      };

      break;

      // etc... 

    default:

      ;

      break;

  }

}

// reset the image when the user isn't hovering.

function mouseleave() {

  document.getElementById("imageid").src = "https://i.imgur.com/FTAtJutl.jpg";

}

<img id="imageid" src="https://i.imgur.com/FTAtJutl.jpg" alt="Sample Image" usemap="#Map" />

<map name="Map" id="Map">

    <area alt="facebook" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('facebook')"

onmouseleave="mouseleave()"    

    />

    

    <!--

    

    <area alt="twitter" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('twitter')"

onmouseleave="mouseleave()"    

    />

        <area alt="instagram" title="" shape="poly" coords="177,214,193,277,475,212,466,149" onmouseover="mouseover('instagram')"

onmouseleave="mouseleave()"    

    />

     etc 

     

     

     -->

</map>

Imagemap; show text when hovering over certain area

I have created a demo using tooltipster jquery plugin and this is the best way I have found to do so ;)

$(document).ready(function() {

  $('.tooltip').tooltipster({

  });

});

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<script src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>

<link href="http://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" />

<div>

  <img src="https://i.stack.imgur.com/JRo8A.png" id="logo" style="width: 260px; max-width: 100%;    

height: auto;" alt="Sample Image" usemap="#map" />

  <map name="map">

    <area shape="circle" coords="243,132,41" href="Ktrack.html" class="tooltip" title="This is my image's tooltip message for area 1!" />

    <area shape="circle" coords="189,223,41" alt='' href="Kinsurance.html"  class="tooltip" title="This is my image's tooltip message for area 2!"/>

    <area shape="circle" coords="69,205,29" alt='' href='Khealth.html' class="tooltip" title="This is my image's tooltip message for area 3!"/>

    <area shape="circle" coords="9,131,42" alt='' href='Klocklock.html'  class="tooltip" title="This is my image's tooltip message for area 5!" />

    <area shape="circle" coords="128,49,81" alt='' href='index.html' class="tooltip" title="This is my image's tooltip message for area 6!" />

</map>

</div>

html image maps and hover css

If you don't want to restart everything you could do the following:
Add the hover code to each area, and change the source of the image.

$('#southeast').hover(
        function() {
            $('#mapimage img').attr('src', 'http://www.groupswelcome.co.uk/maps/uk_map.gif');
        },
        function() {
            $('#mapimage img').attr('src', 'http://www.alert24uk.com/ESW/Images/uk-map.gif');
        }
    );

Here's a fiddle of this method (rollover southeast at the bottom right)... Images do not correspond to the mapping of course.

By doing this, you will see a blank image temporary... until the image loads.

There are ways to prevent this, like using a spritesheet instead. If interested, I can work up an example for you.

This is an easy way. There are other options.
HTML5 canvas if your website is for recent browsers.

SVG Image map hover effect

Have the :hover selector at the level of the <a>-tag. This will then include the text.

So just change the css to:

a:hover .map-highlight {
  fill: #D01A20 !important;
}

a:hover .map-highlight {

  fill: #D01A20 !important;

}

<svg id="map example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink viewBox="0 20 300 300" xml:space="preserve">

<title>map example</title>

<a xlink:href="#"><path id="area 03" class="map-highlight" d="M174.13,101.66l-3.77,3.7a9.11,9.11,0,0,0-2.52,5.3c-.38,2.48-2.26,3.84-3.76,5.5a1.55,1.55,0,0,1-1.33.2c-2.48-.78-4.94-1.62-7.4-2.47a14,14,0,0,0-11.13.92c-2.79,1.38-5.35,3.23-8.06,4.76-1.94,1.1-2.12,1-2.32-1.15a10.43,10.43,0,0,0-2.64-6.11c-2.19-2.47-4.16-5.15-6.46-7.52a20.48,20.48,0,0,0-4.72-3.29,4.47,4.47,0,0,0-2.38,0c-1.07.12-2.12.34-3.18.52l-.25-.56c1-1.14,1.95-2.26,2.87-3.43,2.08-2.63,4.12-5.29,6.19-7.93,1.74-2.22,1.69-5,2.45-7.55.45-1.51.44-3.19,1.06-4.61,1-2.23,2.3-4.31,3.49-6.45.1-.18.3-.31.41-.48,1.57-2.46,1.57-2.46,3.75-.59l10.63,9.12c-.33.24-1.15.63-1.1.85a3.09,3.09,0,0,0,1,1.51c1.69,1.57,3.4,3.13,5.18,4.59a2,2,0,0,0,1.63.25c2.53-.8,4.41.23,6.3,1.8,3.78,3.16,7.69,6.18,11.52,9.29C171.06,99,172.53,100.32,174.13,101.66Z" style="fill: #8fd1c5"/>

<text transform="translate(133.32 102.78)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">03</text></a>

<a xlink:href="#"><path id="area 04" class="map-highlight" d="M132.87,122.67c3-.12,5.15-2,7.47-3.37,3.09-1.87,6.12-3.82,9.92-3.79a5.57,5.57,0,0,1,2,.33c2.59,1,5.29,1.84,7.57,3.6,2.61,2,4.78,1.45,6.89-1.07,2.86-3.41,4.08-7.47,5.37-11.56a3.29,3.29,0,0,1,1.25-1.59c1.3-.88,2.69-1.6,4.26-2.51,2.35,1.59,4.85,3.24,7.31,4.94A162.2,162.2,0,0,0,204.17,119c2.93,1.47,2.77,1.47,2.2,4.58-.77,4.23-1.29,8.5-1.94,12.75a2.54,2.54,0,0,1-2.71,2.07c-4.46-.4-8.93-.73-13.38-1.24-2.76-.32-5.47-1-8.23-1.39-2.19-.29-4.43-.15-6.6-.48-2.37-.35-4.67-1.2-7-1.5a40.7,40.7,0,0,0-6.69-.11,57.46,57.46,0,0,0-7.3.64c-5,.85-9.08-1.6-13.34-3.48-1.72-.76-3.44-1.55-5.22-2.15-1.23-.42-1.85-.89-1.47-2.33A24.77,24.77,0,0,0,132.87,122.67Z" style="fill: #8ecea3"/>

<text transform="translate(171.27 128.05)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">04</text></a>

<a xlink:href="#"><path id="area 05" class="map-highlight" d="M154.85,202.69c-.7-5.41-2-10.33-4.76-14.78-2.5-4.05-3.48-8.62-4.46-13.19-.56-2.61-1.25-5.2-2-7.78a10,10,0,0,0-4-5.27c-2.52-2-5.14-3.73-7.1-6.49a18,18,0,0,0-9.41-6.57c-2.26-.72-4.48-1.46-6.22-3.21-1.42-1.42-1.58-3.42,0-4.67,2.31-1.8,4.85-3.3,7.27-5a69,69,0,0,0,6.19-4.46c1.29-1.12,2.18-.33,3.18.12,3.49,1.55,6.87,3.37,10.43,4.71,4.29,1.61,8.78,1.7,13.36,1.37,3-.22,6.07.29,9.11.48,2,.13,4.08.24,6.11.44,5.07.49,10.14,1,15.21,1.56,5.22.59,10.43,1.29,15.64,1.9.95.11,1.19.3,1,1.36-1.39,6.5-2.73,13-3.94,19.54-.66,3.56-1.07,7.17-1.55,10.76s-.89,7.19-1.31,10.79c-.18,1.59-1.56,1.93-2.63,2.37-5.19,2.11-10.43,4.09-15.65,6.11-4.69,1.82-9.41,3.57-14.07,5.46-3,1.24-6,2.68-9,4A11,11,0,0,1,154.85,202.69Z" style="fill: #75c6a2"/>

<text transform="translate(158.9 163.75)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">05</text></a>

<a xlink:href="#"><path id="area 6" class="map-highlight" d="M95.11,151.26c1.6-.09,3.13.15,4.42-.31,2.54-.89,4.95-2.16,7.4-3.28,2.17-1,4.32-2,6.57-3.07.9,1.34,1.77,2.45,2.44,3.67,1.36,2.44,3.88,2.85,6.15,3.69,3.71,1.38,7.08,3.15,9.69,6.31,2.32,2.81,5,5.3,7.56,7.93a15,15,0,0,1,3.51,7.14c.8,3.25,1.24,6.59,2.07,9.83.37,1.42,1.37,2.67,2,4,1.31,2.84,2.64,5.68,3.83,8.57a41.46,41.46,0,0,1,1.51,4.79c.29,1,.45,2.12.7,3.34-2.94,0-5.63.12-8.31,0s-5.46-.49-8.17-.88c-3.47-.49-6.93-1.1-10.39-1.67q-4.49-.74-9-1.51c-2.54-.44-5.09-.86-7.62-1.37-2-.4-3.94-1.07-6-1.37-1.43-.21-1.35-1.19-1.3-2,.22-3.65.9-7.31.74-10.93a37.85,37.85,0,0,0-1.87-9.65c-1.06-3.33-2.88-6.42-4-9.73a12.56,12.56,0,0,1-.51-5.39c.29-2.53.43-4.88-1.28-7C95.14,152.14,95.19,151.76,95.11,151.26Z" style="fill: #8fd1c5"/>

<text transform="translate(113.21 179.2)" style="font-size: 10px;fill: #fff;font-family: ArialMT, Arial">06</text></a>

<a xlink:href="#"><path id="area 2" class="map-highlight" d="M93.66,116.05c2.67-1.63,4.75-3.14,7-4.24a38,38,0,0,0,10.57-7,1.38,1.38,0,0,1,2-.36,5.46,5.46,0,0,0,3.52-.12,4.57,4.57,0,0,1,5.35,1.51,44.42,44.42,0,0,0,4,3.8c4.51,4,5.62,8.91,4.19,14.56-.63,2.47-.68,2.44-3.17,2.43-2.3,0-4.61-.11-6.9,0-3.49.23-6.6-.91-9.73-2.22-1.66-.69-3.47-1-5.17-1.62a41.6,41.6,0,0,1-6.49-2.57C97.11,119.27,95.68,117.72,93.66,116.05Z" style="fill: #75c6a2"/>

<text transform="translate(108.95 118.25)" style="font-size: 8px;fill: #fff;font-family: ArialMT, Arial">02</text></a>

<a xlink:href="#"><path id="area 01" class="map-highlight" d="M93.49,118.8c1.77,1.41,3.35,2.79,5.07,4a17.38,17.38,0,0,0,2.75,1c1,.45,1.9,1.08,2.89,1.53s2.16.89,3.26,1.27c2,.69,3.92,1.37,5.89,2a35.77,35.77,0,0,0,5.86,1.72,24.11,24.11,0,0,0,5.18-.31,10.5,10.5,0,0,1,3.15,0l-2,1.41c-3.43,2.38-6.77,4.92-10.33,7.08-2.33,1.41-3.86,4.57-10.29,6.55-3.25,2.29-8.91,3.48-10.29,3.8-.66-3.63-4.67-7-7.05-9.1-.63-.56-1.53-1.3-1.56-2-.13-3-.39-6.16.21-9.08.36-1.73,2.15-3.23,3.46-4.68s2.78-2.26,3-4.25C92.74,119.4,93.26,119.07,93.49,118.8Z" style="fill: #8ecea3"/>

<text transform="translate(94.08 136.82)" style="font-size: 8px;fill: #fff;font-family: ArialMT, Arial">01</text></a>

</svg>