Javascript Image Rollover

daveirl

This post has been deleted.

seamus

Yeah, should be simple enough.

As code example from the web:
[html]
<A HREF="somewhere.html"
onmouseover="document.sub_but.src='movedown.gif'"
onmouseout="document.sub_but.src='moveup.gif'">
<IMG SRC="thumb.gif" ALT="Move your mouse over me" NAME="thumb_but">
</A>
<IMG SRC="moveup.gif" WIDTH="143" HEIGHT="39" BORDER="0" NAME="sub_but">


[/html]
Usually the onMouseOver() event calls a javascript function, like swapImages(imgID, newImage), where imgID is the ID of the existing image, and newImage is the href of the new image.

If you just change the imgID to the ID of the larger image on the right, it should work just as well. Have you got an example of your code?

GoneShootin

Try looking at DHTML Layers aswell, might be what your looking for

http://www.jsworkshop.com/dhtml/list06-2.html

daveirl

This post has been deleted.

dahamsta

DW code is often quite clever, but very badly written from a reuse POV. The PHP code it spits out is awful too. Handy for firing something out quickly, like the Bertie thing I did last year, but you invariably end up rewriting it anyway. They should really bundle ADODB or something.

adam

Seth Brundle

Seamus's code is good but it is also preferable to pre load the onmouseover image when the page is downloading, rather than when the user moves their mouse.
Add this into the head...

<script language="JavaScript" type="text/javascript">
<!-- 
image1 = new Image();
image1.src = "movedown.gif";
//-->
</script>

seamus

Yes, I should add, that code I got a pulled from some page and altered very slightly.
It's rollovers at their simplest. There are much neater and more flexible ways of doing it, as Adam and kbannon point out.

daveirl

This post has been deleted.

Seth Brundle

daveirl wrote:

This post has been deleted.

...and I bet it used a lot more code than mine!

daveirl

This post has been deleted.