Jump to content

Change image depending on region being hovered over


chibineku
 Share

Recommended Posts

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.

Edited by chibineku
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Edited by chibineku
Link to comment
Share on other sites

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?

Edited by chibineku
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...