Image swap not functioning as expected in JavaScript

Question

I've got 2 images one large and one small. The large one is 77 X 15 and the small one is 15 X 15.

Now these 2 images sit on top of another image (which can vary in size). What is supposed to happen is; when the user hovers over the small image, it is hidden and the large image is then displayed. Both images are wrapped in a DIV. I know that I can do this in a function (and I've got it working) but I need to try and keep it inline (criminal I know). Here's the code I've got so far. Bear in mind I was passed on this code.

<div id="small" style="position:absolute;top:0px;right:15px; z-index:5000;" onmouseover="this.style.visibility='hidden';" onmouseout="this.style.visibility='visible';">

<img src="small.gif" style="FILTER:Alpha(Opacity=50, FinishOpacity=50, style=0); position:absolute; width: 15px; height: 15px;" border="0" alt="text">

</div>

<div id="large" style="position:absolute;top:0px;right:77px; z-index:5000;" onmouseover="this.style.visibility='visible';" onmouseout="this.style.visibility='hidden';"><img src="large.gif" style="position:absolute" border="0" alt="text">

</div>

What seems to happen is that when I hover over the larger image it disappears and then the small one just keeps flashing when you hover over it. Any ideas?

EDIT:Forgot to mention that both images are different, so I can't just resize one image.

I may be approaching this completely wrong so please let me know.

Thanks

Answer 1

i dont think it is a very gud approach, consider using just a simple jquery animation on a single div with single image . on mouseOver increase the height or whatever and on mouseout reduce it back again !!