How do i set the position of onmouseover image?

[missy_mi]

Hi,

I am doing the mouseover code but what if i dont want it to effect on top of the main image, i want to position the hover image somewhat top/left/right/bottom than the main image. Can it be done?

 <img src="images/b.png" onmouseover="this.src='images/a.png'" onmouseout="this.src='images/b.png'" >

Thank you in advance.

[JorgeM]

Your effect is not really on top of the image. You are manipulating the image itself. Your code is changing the image's source attribute.

If you want to affect some other element, yes you can do that.

I think it would be easier for your mouse over related events to call a function. Within that function, you can specify another image to be shown that is currently hiding positioned somewhere else on the screen.

[Taywin]

Also, one more question. Has your image a.png loaded to the page after the page is displayed? If not, it won't work because the call is looking for the already loaded image. You could load and hide the image when the page is loaded. Then it should still work; however, this is not a recommended way to do.

[missy_mi]

Also, one more question. Has your image a.png loaded to the page after the page is displayed? If not, it won't work because the call is looking for the already loaded image. You could load and hide the image when the page is loaded. Then it should still work; however, this is not a recommended way to do.

A : Yes, i guess..how do i hide the image??Can you elabrate more??..

Here's the code that i am using now..it works but still have some problem like it suppose to hide first when the page is load and the position still is not position correctly.

<style type="text/css">
#underline4 {
position:relative;
top:100px;
left:-80px;
}

.nav4 {
position:absolute;
top:720px;
left:775px;
}
</style>
<div id="underline4"><img src="images/a.png" width="300" height="150"/></div>

<div class="nav4">
<a href="#"
onmouseover='document.getElementById("underline4").style.top="100px";' onmouseout='document.getElementById("underline4").style.top="-1000px";'
><img src="images/trading.png"/></a><br />
</div>
 </div>