Change image depending on region being hovered over

[chibineku]

I want to have a region selector in the form of an image of a map. When the user hovers over the UK, Europe or Rest of World, the image should change to one with that region highlighted. I've got the 4 images made. Can this be done with CSS or must I use JavaScript? The image will be turned into an image map and the link will be to the next page in the registration process with a URL parameter allowing me to write the choice to a database.

[chibineku]

Ah, I think I got it: if there will be image map links, I can change the image when the hover pseudo class is triggered, making the images swap. Cool beans.

[wirehopper]

I'd try map and area tags http://www.w3schools.com/TAGS/tag_area.asp, with an id on each area, with #areaId:hover to change the image. So the <img> tag with the large image would be overlaid with the smaller image for the areas.Neat idea.

[chibineku]

I have tried just that, wirehopper, and there seems to be a problem somewhere. Here is the code:CSS:

#world_map { width: 702px; margin: 0 auto;}#map_uk { display: none;}#map_europe { display: none;}#map_row { display: none;}#map_region_uk:hover #map_blank { display: none;}#map_region_uk:hover #map_uk { display: block;}

HTML map:

			   <div id="world_map">					<img height="304px" id="map_blank" width="712px" usemap="#regions" title="Please click on UK, Europe or Rest of World to set your postal region" alt="region picker" src="images/world_map_blank.gif" />					<img height="304px" id="map_uk" width="712px" usemap="#regions" title="Please click on UK, Europe or Rest of World to set your postal region" alt="region picker" src="images/world_map_uk_highlight.gif" />					<img height="304px" id="map_europe" width="712px" usemap="#regions" title="Please click on UK, Europe or Rest of World to set your postal region" alt="region picker" src="images/world_map_europe_highlight.gif" />					<img height="304px" id="map_row" width="712px" usemap="#regions" title="Please click on UK, Europe or Rest of World to set your postal region" alt="region picker" src="images/world_map_row_highlight.gif" />										<map name="regions">						  <area id="map_region_uk" shape="circle" coords="315,50,15" href="http://www.amazon.com" alt="UK">						  <area id="map_region_row1" shape="poly" coords="11,61,26,52,19,55,17,43,22,35,28,31,153,28,182,24,211,39,226,73,172,115,259,184,251,214,192,293,172,288,183,207,175,205,168,178,178,162,119,128,91,92,94,75,61,55,14,64" href="http://sinaesthesia.co.uk/images/world_map_blank.gif" alt="Rest of World" />						  <area id="map_region_row2" shape="poly" coords="315,89,290,112,291,133,310,156,329,151,342,157,342,165,351,183,347,195,363,237,380,238,405,213,408,203,422,217,434,187,429,184,417,193,411,168,435,132,417,138,392,99,367,93,349,91,346,82,313,88" href="http://sinaesthesia.co.uk/images/world_map_blank.gif" alt="Rest of World" />						  <area id="map_region_row3" shape="poly" coords="464,15,464,109,481,145,495,149,509,122,521,135,521,152,540,175,574,183,560,202,571,237,609,236,642,259,653,215,671,261,702,226,678,217,653,225,634,186,646,172,602,157,577,112,615,85,621,74,617,60,639,61,652,48,691,40,689,24,600,12,586,14,512,2,465,16" href="http://sinaesthesia.co.uk/images/world_map_blank.gif" alt="Rest of World" />						  <area id="map_region_europe" shape="poly" coords="463,18,460,108,446,111,420,136,393,101,382,86,370,86,353,86,341,78,317,89,308,89,308,69,320,70,345,50,334,38,347,31,360,21,381,19,407,25,465,17" href="http://sinaesthesia.co.uk/images/world_map_blank.gif" alt="Europe" />					</map></div>

The hrefs are just placeholders just now. I am not sure that the :hover pseudo class of the areas is working. I've divided the rest of world area into 3 bits because each one already is a sea of coordinates. I wonder if I can re-use the map for the images the way I have. Any ideas on why it isn't working?

[jeffman]

Looks like the parent-child relationships aren't right. I see selectors like this:#map_region_uk:hover #map_ukbut nowhere in the document is #map_uk a descendant of #map_region_uk.

[chibineku]

That isn't a parent-child selector, it's supposed to change the display of #map_uk when you hover over #map_region_uk. Perhaps I have forgotten the syntax for such things..Edit: I just read that in order for the pseudo class to work, the affected element must be a child of the first. Dang. Thoughts for a way to work around that?

[thescientist]

i don't think CSS works like that. I'm pretty sure it can work on descendants, so it wouldn't apply in this situation.

[chibineku]

I went for a jQuery fix and it works now. Those without JavaScript turned on will still have the functionality just not the image swap. It's a decent compromise.

[jeffman]

Since CSS2 will not allow selectors to move up the tree (only sideways and down), I'm thinking what you're after is not possible.EDIT. Yeah. Figured JS would be the last word.

[chibineku]

Here is the test page:http://sinaesthesia.co.uk/region_select.php5

[jeffman]

Cool beans.

[dsonesuk]

there is a slight problem when trying to use map in older version of firefox 2.0.0.20.you hover over area, it changes, move out the map disappears completely.some areas causes the map to flicker frantically from one image to the other, surprisingly it seems to work fine in all versions of IE 6 - 8.

[chibineku]

dsonesuk: Thanks for doing a wide test for me. I probably have some areas of overlap on my map - I used a self made image map maker which works, but some of the areas are close together and my mouse clicks weren't ultra accurate. I'll examine it for overlaps, which should stop the flickering. Given that we're on FF 3.6.8 I'm not sure I mind about ver 2.*

[dsonesuk]

dreamweaver images map tool which preloads images as well

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}/*--*//*]]>*/</script><style type="text/css"></style></head><body onload="MM_preloadImages('images/world_map_row_highlight%5B1%5D.gif','images/world_map_europe_highlight%5B1%5D.gif','images/world_map_uk_highlight%5B1%5D.gif')"><img src="images/world_map_blank%5B1%5D.gif" name="WorldMap" width="712" height="304" border="0" usemap="#Continents" id="WorldMap" /><map name="Continents" id="Continents">  <area shape="poly" coords="208,229" href="#" />  <area shape="poly" coords="15,54,41,47,55,39,93,61,89,78,114,115,121,115,130,125,146,131,175,148,178,151,169,167,176,191,186,199,188,208,176,250,174,270,175,278,195,288,187,280,195,255,217,239,234,213,240,214,251,201,251,185,259,179,258,173,233,163,226,151,196,136,174,143,165,133,157,128,166,118,188,127,198,128,198,124,169,116,161,117,148,123,140,115,146,105,157,101,172,106,187,83,208,72,206,62,227,69,223,56,208,42,202,44,191,37,183,38,183,48,177,57,171,48,157,45,154,41,168,32,177,36,173,30,183,24,190,26,197,34,206,36,212,28,190,16,175,14,160,16,152,20,150,23,132,26,89,20,79,23,60,20,34,21,24,22,20,28,18,40,25,44,16,50" href="images/world_map_row_highlight%5B1%5D.gif" target="_blank" alt="" onmouseover="MM_swapImage('WorldMap','','images/world_map_row_highlight%5B1%5D.gif',1)" onmouseout="MM_swapImgRestore()" />  <area shape="poly" coords="313,89,291,115,293,122,293,133,306,153,327,146,333,149,349,151,343,163,354,184,350,197,366,235,381,232,390,222,399,213,397,207,405,199,418,203,419,215,425,214,428,203,431,188,414,201,408,199,412,186,408,177,410,162,426,149,429,137,416,140,389,98,369,95,363,97,346,91,346,87,313,90" href="#" onmouseover="MM_swapImage('WorldMap','','images/world_map_row_highlight%5B1%5D.gif',1)" onmouseout="MM_swapImgRestore()" />  <area shape="poly" coords="463,15,464,110,483,143,492,150,488,138,490,129,509,112,516,128,529,132,527,144,528,147,520,149,533,164,546,176,569,180,584,184,603,186,594,193,586,193,565,206,574,238,607,230,614,236,618,234,625,242,634,245,637,253,641,256,643,252,639,246,648,237,672,255,682,253,688,243,699,232,693,227,682,221,688,231,680,240,667,251,649,238,653,228,651,217,636,201,632,194,625,190,619,196,611,192,601,185,623,181,627,179,636,184,638,180,640,172,624,168,609,164,605,166,599,162,596,166,608,171,615,175,619,182,586,178,577,170,580,162,571,156,571,152,584,149,584,142,565,148,551,159,541,155,541,143,549,135,550,129,569,130,573,136,574,121,571,121,565,130,548,130,542,123,542,119,559,115,573,102,563,82,570,80,578,90,588,98,604,88,614,71,608,66,611,59,609,53,593,51,607,44,625,43,634,38,633,49,637,59,645,47,646,40,685,33,688,28,668,21,644,21,614,20,602,16,584,18,537,12,507,8,475,16" href="#" onmouseover="MM_swapImage('WorldMap','','images/world_map_row_highlight%5B1%5D.gif',1)" onmouseout="MM_swapImgRestore()" />  <area shape="poly" coords="463,12,463,109,447,106,447,116,435,127,416,136,406,115,393,97,398,90,385,87,381,80,389,75,399,76,408,73,389,69,374,78,373,87,364,83,357,89,352,87,354,82,343,73,335,76,323,86,311,87,308,78,311,73,324,71,319,62,346,52,358,54,374,45,389,40,372,38,372,33,363,38,362,46,353,50,349,45,342,47,337,44,337,34,348,32,359,24,375,21,389,22,403,23,405,26,401,31,424,23,439,26,462,14" href="#" onmouseover="MM_swapImage('WorldMap','','images/world_map_europe_highlight%5B1%5D.gif',1)" onmouseout="MM_swapImgRestore()" />  <area shape="poly" coords="314,43,306,52,309,59,316,57,321,59,328,55,322,46,318,44" href="#" onmouseover="MM_swapImage('WorldMap','','images/world_map_uk_highlight%5B1%5D.gif',1)" onmouseout="MM_swapImgRestore()" /></map></body></html>

[chibineku]

I really appreciate the effort, dsonesuk, but first time I tried the images didn't load. I noticed that there are excess characters at the end of each image filename, so I took that out and the map appeared but tends to flicker and only the rest of world region highlighting works. It looks like way more complicated JavaScript than is necessary.

[thescientist]

Here is the test page:http://sinaesthesia.co.uk/region_select.php5

nice map, kinda one of those "us against the world" kind of mentalities,

[chibineku]

Ha, yeah. Well we're breaking it into more regions actually now that the test of theory has been done. I discovered after doing it that I already have a drop down region selector in my registration form so the map will be used for people updating the p&p rate as they shop. Btw, I offer up my own image map generator for anyone to use:http://development.sinaesthesia.co.uk/imgM...ker7radius.htmlIt used to have a little flaw that meant the x axis was off by about 15px but it works now.