how can highlight a portion of an image on mouse over?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
webspider
Forum Commoner
Posts: 52
Joined: Sat Oct 27, 2007 3:29 am

how can highlight a portion of an image on mouse over?

Post by webspider »

on mouse over i want to highlight a portion(not the whole) of an image. Highlighted color will be different on different places .should I use image map?Is it possible to send the co-ordinates of the image(the portion that i want to change the color) in a javascript function ? And in the function using style.backgroundColor ?
can anyone provide some sample code on how to do this? thanks
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

User avatar
webspider
Forum Commoner
Posts: 52
Joined: Sat Oct 27, 2007 3:29 am

Post by webspider »

Thanks Kieran for the link. That gives me good idea about image map coordinates.Actually what I am going to do to change the color of a shape in the image. So I am trying like following and having problem to implement the changeColor( ) function in javascript

Code: Select all

<html>
<head>
<title>Changing color in a image</title>
<script type="text/javascript">
function changeColor()
{
 //if(document.getElementById("square")
 //document.getElementById("planet").innerHTML= this.style.backgroundColor = "blue";  
}
</script>

</head>

<body>
<img id="planet" src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />

<map id ="planetmap" name="planetmap">

<area id="square" shape ="rect" coords ="0,0,82,126"
onMouseOver="changeColor()" href="javascript:void(0)" alt="Sun" />

<area id="circle" shape ="circle" coords ="90,58,3"
onMouseOver="changeColor()" href="javascript:void(0)" alt="Mercury" />

</map> 

</body>
</html>
I am not sure whether it's the right way to do this. Any help ? thanks
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: how can highlight a portion of an image on mouse over?

Post by Jonah Bron »

If this could fall into the "rollover button" category, just take the two states, stack the two up. So, these two pictures,

Code: Select all

    /////\\\\\        /////\\\\\
   |   *  *  |       |   *  *  |
    \    ^   /         \    ^   /
      \ \_//             \  O  /
       |><|              |><|
Would stack up into one image like this:&nbsp;
    /////\\\\\
   |   *  *  |
    \    ^   /
      \ \_//
       |><|
    /////\\\\\
   |   *  *  |
    \    ^   /
      \  O  /
       |><|
Then, use that picture as the background image, and do some css:

Code: Select all

 
.button {
background: url(my_face_pic.jpg) top;
}
.button:hover {
background-position: bottom;
}
Last edited by John Cartwright on Sun Jan 20, 2008 11:15 am, edited 1 time in total.
Reason: Jcart | Added code tags to fix spaces
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: how can highlight a portion of an image on mouse over?

Post by Jonah Bron »

Hm. That was supposed to come out as a face with a bow-tie, smiling, and a face with a bow-tie supprised. Aparently phpBB doesn't replace spaces with &nbsp;
User avatar
webspider
Forum Commoner
Posts: 52
Joined: Sat Oct 27, 2007 3:29 am

Re: how can highlight a portion of an image on mouse over?

Post by webspider »

thanks for your reply. but i think this cann't be put into "roll over" button category . let's say my image has four parts and when mouse on A it will be green while color of B, C and D remains same. the same effect(colors different) will be for other parts B, C and D.

----------------------------
| | |
| A | B |
|------------|------------ |
| C | D |
| | |
---------------------------

any ideas?
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: how can highlight a portion of an image on mouse over?

Post by Jonah Bron »

Maybe one button for A, one for B, one for C, etc.?
Post Reply