Page 1 of 1
how can highlight a portion of an image on mouse over?
Posted: Tue Jan 01, 2008 8:05 am
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
Posted: Tue Jan 01, 2008 3:55 pm
by Kieran Huggins
Posted: Wed Jan 02, 2008 1:14 am
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
Re: how can highlight a portion of an image on mouse over?
Posted: Fri Jan 18, 2008 4:16 pm
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:
/////\\\\\
| * * |
\ ^ /
\ \_//
|><|
/////\\\\\
| * * |
\ ^ /
\ 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;
}
Re: how can highlight a portion of an image on mouse over?
Posted: Fri Jan 18, 2008 4:17 pm
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
Re: how can highlight a portion of an image on mouse over?
Posted: Sat Jan 19, 2008 11:31 pm
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?
Re: how can highlight a portion of an image on mouse over?
Posted: Sun Jan 20, 2008 11:12 am
by Jonah Bron
Maybe one button for A, one for B, one for C, etc.?