If you search for scripts for this on the Internet or let Dreamweaver do it for you, your web page will probably end up with some weird functions on it. I have found a simpler way to do a mouseover that requires no functions and it’s easy to do.

< img src="XYZ.GIF" onMouseOver="this.src='ABC.GIF'" onMouseOut="this.src='XYZ.GIF'" >

That’s all there is just add the on onMouseOver event to change this.src and set onMouseOff to change this.src back to the original src. It’s simple and works in the newer browsers.

*You will still need to preload your images though.

The problem with this method is that you'll end up with a delay between the first time the mouse goes over the image and the time the mouseover image appears because the browser has to download the image at that point. One solution I used was to add lowsrc=XYZ.GIF in the img tag, but newer web browsers don't always load the lowsrc image. Consequently, the only good way to eliminate this delay is to add JavaScript for preloading images.

Here's some rollover/mouseover code I personally wrote a while ago: (I know you're all just dying to use code written by the grand and famous rabidcow)


<script language="JavaScript1.2">
// number of images that change
var number_of_images = 4;
// number of images before the first image that changes
var start_image_index = 1;

var image_array = new Array(number_of_images);

// switch to the mouseover image
function image_over(index) {	
	document.images[index+start_image_index].src = image_array[index].over.src;
// switch to the mouseout image
function image_out(index)  {
	document.images[index+start_image_index].src = image_array[index].out.src;

// preload the mouseover/out images
function image_pair(index,normal,mouse_over) {
	this.over = new Image;
	this.over.src = mouse_over;
	this.out = new Image;
	this.out.src = normal;

// change the images here
image_array[0] = new image_pair(0,"image0o.jpg","image0i.jpg");
image_array[1] = new image_pair(1,"image1o.jpg","image1i.jpg");
image_array[2] = new image_pair(2,"image2o.jpg","image2i.jpg");
image_array[3] = new image_pair(3,"image3o.jpg","image3i.jpg");

// -->

<!-- also change the images here -->

<img src=blahblahblah.jpg width=120 height=12>

<a href=link0.html onmouseover=image_over(0) onmouseout=image_out(0)>
<img src=image0o.jpg width=120 height=24 border=0></a>

<a href=link1.html onmouseover=image_over(1) onmouseout=image_out(1)>
<img src=image1o.jpg width=120 height=24 border=0></a>

<a href=link2.html onmouseover=image_over(2) onmouseout=image_out(2)>
<img src=image2o.jpg width=120 height=24 border=0></a>

<a href=link3.html onmouseover=image_over(3) onmouseout=image_out(3)>
<img src=image3o.jpg width=120 height=24 border=0></a>

Now that I look at this, and at anklenut's version, for some browsers onMouseOver and onMouseOut have to be in a <a href> tag surrounding the image or they have no effect.

Log in or register to write something here or to contact authors.