Image hover over the <map> area

Question

Im trying to get different images to load when I hover over different areas of the image map. Is this possible with htlm / css or java? If so, how?

thanks

Here is my code:

<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

hope this helps, I did something like this years ago at 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 on top of the boot image, and you switch the area of ​​the map to hover and replace each area of ​​the background.

Answer 2

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

Perhaps you could do this with pure CSS these days, because it has created unified browser support for it. I would make absolutely positioned divs in the background and then use a {display: none;} a:hover {display: block;} so that your images display. Pictures of 20th century soooo images;)

... unless of course you want them to do something onClick that still needs JavaScript.