Image hover when over area <map>

Question

Im trying to get different images to load when hovering over the different image map zones. Is this even possible with htlm/css or java? If so how?

Thanks

Here's my code so far:

<img id="navbar" src="img/index-navbar.png" usemap="#navmap"/>
        <map name="navmap">
            <area id="index-hover" shape="poly" coords="0,113,125,77,126,129,0,168,0,113" href="index.html" alt="" title="" />
            <area id="selfstudy-hover" shape="poly" coords="127,77,281,66,271,118,128,129,127,77" href="selfstudy.html" alt="" title="" />
            <area id="exhibits-hover" shape="poly" coords="284,66,432,73,433,123,274,118,284,66" href="exhibits.html" alt="" title="" />
            <area shape="poly" coords="434,73,602,87,593,138,435,123,434,73" href="committees.html" alt="" title="" />
            <area shape="poly" coords="605,88,787,98,788,150,597,139,605,88" href="newsletters.html" alt="" title="" />
            <area shape="poly" coords="789,98,852,95,959,59,959,114,887,143,789,151,789,98" href="selfstudy-design.html" alt="" title="" />
        </map>

Answer 1

hopefully this helps, i did something like this years ago on specialolympics.org

your html

    <div class="world_map_container">
<img src="http://www.specialolympics.org/RegionsImages/map/transparent.gif" usemap="#the_world_map" id="transparent_map">
<img src="http://www.specialolympics.org/RegionsImages/map/world_map.png"><map name="the_world_map" id="the_world_map">
<area shape="poly" coords="69,86,83,71,83,51,70,30,52,16,18,36,5,53,23,74,53,83," href="http://www.specialolympics.org/Regions/north-america/_Region-Front/North-America.aspx" id="area_northamerica">
<area shape="poly" coords="63,94,77,89,99,99,87,138,72,138,63,108," href="http://www.specialolympics.org/Regions/latin-america/_Region-Front/Latin-America.aspx" id="area_southamerica">
<area shape="poly" coords="120,70,178,63,220,60,262,57,232,28,191,29,147,32,122,62," href="http://www.specialolympics.org/Regions/europe-eurasia/_Region-Front/Europe-Eurasia.aspx" id="area_eurasia">
<area shape="poly" coords="115,94,134,92,146,90,167,99,160,122,131,125,120,106," href="http://www.specialolympics.org/Regions/africa/_Region-Front/Africa.aspx" id="area_africa">
<area shape="poly" coords="112,84,137,87,152,87,152,80,139,74,120,79," href="http://www.specialolympics.org/Regions/middle-east-north-africa/_Region-Front/Middle-East-North-Africa.aspx" id="area_middleeast">
<area shape="poly" coords="209,68,202,71,190,73,186,81,195,85,206,88,216,84,216,75," href="http://www.specialolympics.org/Regions/east-asia/_Region-Section-Front/East-Asia.aspx" id="area_eastasia">
<area shape="poly" coords="192,96,218,91,248,100,259,132,218,133,199,120,197,110," href="http://www.specialolympics.org/Regions/asia-pacific/_Region-Front/Asia-Pacific.aspx" id="area_asiapacific">
</map>
<ul>
<li id="northamerica" style=""><a href="#">north america</a></li>
<li id="southamerica"><a href="#">south america</a></li><li id="eurasia"><a href="#">eurasia</a></li>
<li id="africa"><a href="#">Africa</a></li><li id="middleeast"><a href="#">Middle East</a></li>
<li id="eastasia"><a href="#">East Asia</a></li><li id="asiapacific"><a href="#">Asia Pacific</a></li>
</ul>
</div>

your css

 div.world_map_container #transparent_map {
   border: medium none;
  height: 140px;
 position: absolute;
 width: 270px;
 z-index: 30;
}

 ul li {
   display: none;
   position: absolute;
   text-indent: -9999px;
   z-index: 20;
 }


 #northamerica {
   background: url("/RegionsImages/map/north_america.png") no-repeat scroll 0 0      transparent;
   height: 140px;
   right: 0;
   top: 0;
   width: 270px;
 }

  #southamerica {
  background: url("/RegionsImages/map/south_america.png") no-repeat scroll 0 0 transparent;
   height: 140px;
   right: 0;
   top: 0;
   width: 270px;
 }

your js

      $('.world_map_container area').each(function () {
    // Assigning an action to the mouseover event
    $(this).mouseover(function (e) {
        var country_id = $(this).attr('id').replace('area_', '');
        $('#' + country_id).css('display', 'block');
    });

    // Assigning an action to the mouseout event
    $(this).mouseout(function (e) {
        var country_id = $(this).attr('id').replace('area_', '');
        $('#' + country_id).css('display', 'none');
    });

});

you can see on this site now on the right rail http://specialolympics.org/

essentially you place a transparent image over the load image and you switch out map area on the hover and replace with each background area.

Answer 2

I did something similar to this yeeeeeaaaaaarrrrssss ago using CSS and JS. View and deconstruct the code here.

You could probably do it with pure CSS these days as there's unified browser support for it. I would do absolutely positioned divs over a background and then use a {display: none;} a:hover {display: block;} to make your images show up. Image maps are soooo 20th century ;)

...unless of course you want them to do things onClick, which would still require JavaScript.