...

View Full Version : onmouseover behaviour over a div element



davidklonski
06-20-2004, 09:23 PM
Hello

I have an image of a person.
I would like to display a bordered div surrounding the face of the individual in the image.
In order to do so, I set the image as such:


<div style="position:relative">
<img src="person.jpg" width="100" height="100">
<div onmouseover="this.style.display = "inline" onmouseout="this.style.display = "none" style="position:absolute; top:10px; left:10px; width=30px; height:30px; border: 1px solid blue; z-index:2; display:none">
</div>
</img>
</div>

When the mouse moves over the inner div, it should become visible and draw a blue rectangle in a certain place over the image.
When the mouse moves out of the inner div, the blue rectangle should disappear.

The problem is that once the display property of the div is set to 'none', it is no longer displayed and thus cannot "listen" to the mouse movements...

How can I solve this?

thanks

homerUK
06-20-2004, 09:34 PM
instead of setting the display to "none" you could just change the border back to "nothing"...



onMouseout="this.style.border=''; "


that might work....? So it keeps the layer "visable" but changes the border back to nothing......

davidklonski
06-20-2004, 10:46 PM
I tried that but nothing seems to happen.
It seems like the div is not responding to the mouse movements...

homerUK
06-21-2004, 10:00 AM
I noticed that a bit of your code wasn't constructed correctly... here's my code which seems to work ok.... but for some reason when I omit the background colour of the DIV it stops showing... but try it anyway with the image....



<div onmouseover="this.style.border='1px solid blue'" onmouseout="this.style.border=''" style="position:absolute; top:10px; left:10px; width:30px; height:30px;background:#CCCCCC;">


come to think of it, you can set the background of the DIV layer to your part of the person.... eg

background-image:head.jpg or something....

basically in my code I stopped the DIV from being hidden, as when its hidden you cannot reference it using mouse overs because its obviosuly not there....

let me know how it goes!

davidklonski
06-21-2004, 11:54 AM
I managed to solve the problem in a slightly different approach.
I replaced the inner div with a transparent gif like so:


<div style="position:relative">
<img src="person.jpg" width="100" height="100">
<img src="spacer.gif" onmouseover="this.style.border= "1px solid blue" onmouseout="this.style.border= "" style="position:absolute; top:10px; left:10px; width=30px; height:30px; border: 0px solid blue; z-index:2;>
</img>
</img>
</div>

Now the inner gif is always present (and it is transparent of course) and I get what I wanted.

glenngv
06-21-2004, 12:09 PM
Watch out for the quotes. You should enclose the attributes in double quotes.

<img src="spacer.gif" onmouseover="this.style.border='1px solid blue'" onmouseout="this.style.border=''" style="position:absolute; top:10px; left:10px; width=30px; height:30px; border: 0px solid blue; z-index:2" />

homerUK
06-21-2004, 12:16 PM
Watch out for the quotes. You should enclose the attributes in double quotes.


I thought that's what might have been up with it not working in the first place.... ? apart from the div being hidden of course!!

davidklonski
06-21-2004, 12:36 PM
thanks for the feedback.
I fixed the quotes. Still the problem was with the invisible div

glenngv
06-22-2004, 03:46 AM
As homerUK said...


basically in my code I stopped the DIV from being hidden, as when its hidden you cannot reference it using mouse overs because its obviosuly not there....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum