1 Replies - 33835 Views - Last Post: 03 April 2011 - 01:03 PM

#1 jainam08  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-October 10

how to change the background color of selected area using image map?

Posted 14 March 2011 - 07:40 AM

<map name="india">
			<area shape="rect" COORDS="122,185,175,205" HRef="#" title="Jaipur" onmouseover="this.focus();" onmouseout="this.blur();">	
			<area shape="rect" COORDS="58,225,125,203" HRef="#" title="Jodhpur" onmouseover="this.focus();" onmouseout="this.blur();">
			<area shape="rect" COORDS="102,245,173,222" HRef="#" title="Udaipur" onmouseover="this.focus();" onmouseout="this.blur();">
			<area shape="rect" COORDS="58,262,140,240" HRef="#" title="Ahmedabad" onmouseover="this.focus();" onmouseout="this.blur();">
			<area shape="rect" COORDS="33,278,73,255" HRef="#" title="Rajkot" onmouseover="this.focus();" onmouseout="this.blur();">
			<area shape="rect" COORDS="100,345,140,310" HRef="#" title="Pune" onmouseover="this.focus();" onmouseout="this.blur();">
			<area shape="rect" COORDS="128,405,192,375" HRef="#" title="Bangalore" onmouseover="this.focus();" onmouseout="this.blur();">
		</map>



i want to change the background color when i hover the mouse on that area of image... can any1 help me??

Mod edit - Please :code:

Is This A Good Question/Topic? 0
  • +

Replies To: how to change the background color of selected area using image map?

#2 supercorey  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 119
  • View blog
  • Posts: 207
  • Joined: 15-February 09

Re: how to change the background color of selected area using image map?

Posted 03 April 2011 - 01:03 PM

To change the background color of an area on mouse-over, you would, of course, need to add code into the "onmouseover" tag. Since the tag specifies what to do in Javascript, understanding how to change the background color with Javscript is necessary. A quick check of W3Schools.com provided the answer:
object.style.backgroundColor="#00FF00";



Of course, you will have to replace 'object' in the code above with whatever you are trying to change. By the looks of it, "this", without the quotes, would be the object you would want. All that is left is to place that code in the "onmouseover" section in the area tags in your code.

To change it back to no background, in the "onmouseout" section you would put:
this.style.backgroundColor='transparent';



An example of a single area section, replacing the data with your own, would be:
<area shape="rect" COORDS="0,0,800,600" href="#" onmouseover="this.style.backgroundColor='#00FF00';" onmouseout="this.style.backgroundColor='transparent';"/>


This post has been edited by supercorey: 03 April 2011 - 01:04 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1