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
how can highlight a portion of an image on mouse over?
Moderator: General Moderators
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
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
I am not sure whether it's the right way to do this. Any help ? thanks
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>- 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?
If this could fall into the "rollover button" category, just take the two states, stack the two up. So, these two pictures,
Then, use that picture as the background image, and do some css:
Code: Select all
/////\\\\\ /////\\\\\
| * * | | * * |
\ ^ / \ ^ /
\ \_// \ O /
|><| |><|
Would stack up into one image like this:
/////\\\\\
| * * |
\ ^ /
\ \_//
|><|
/////\\\\\
| * * |
\ ^ /
\ O /
|><|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
Reason: Jcart | Added code tags to fix spaces
- 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?
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
Re: how can highlight a portion of an image on mouse over?
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?
----------------------------
| | |
| A | B |
|------------|------------ |
| C | D |
| | |
---------------------------
any ideas?
- 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?
Maybe one button for A, one for B, one for C, etc.?