Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Accursed no-click mouseover ImageSwap to larger version of image1

Will no one rid me of this meddlesome problem?



12:24 pm on Oct 15, 2004 (gmt 0)

10+ Year Member

I've spent three or four hours searching Google and WebmasterWorld for a javascript but have come up dry. If I had a clue about javascript I might be able to help myself.

I need a mouseover imageswap script that will swap to an ENLARGEMENT of image1. One that is mouseover only-- no click required.

Hopefully, I could adapt this script to an art gallery scenario.

I found a simple, effective script (below) for a no-click-required imageswap but which will only bring up the same sized image2. But I don't know javascript well enough to adapt it to bring up the enlarged size version of image1. Don't even know if it can be adapted.

Also, if possible, the enlargement should stay fully in the browser window (above the fold) if image1 happens to be near the bottom of the screen. (Is that do-able?)

Here's the script for no-click imageswap that I can't adapt to bring up the larger sized version of image1:


<FORM NAME = form1>
Move the mouse to swap the image . . .
<A HREF="" name= link1 onMouseOver = "ImgOver()" onMouseOut = "ImgOut()"> <IMG NAME = "IMG1" SRC = "images/image1.gif" WIDTH = 236 HEIGHT = 118> </A>

function ImgOver()
document.form1.IMG1.src = 'images/image2.gif'
function ImgOut()
document.form1.IMG1.src = 'images/image1.gif'


Thanks for the help!

Bernard Marx

1:29 pm on Oct 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Try the one below.

It assumes that you actually want to preload your rollover images. This isn't too much of a presumption, I reckon - but it could be worked around if you didn't want to do that.

When you preload an image, your create an Image object. It's possible to specify it's width and height in the creation of the image during the preload, but this isn't necessary, and you'll see that I actually don't in the script (although the preload function does have spare arguments for it).

The thing is that an image object actually knows its own width & height once it has started to download.

We start with an object, rollImages. This pairs up image element ids with their respective rollover images, at the same time as preloading that image. It carries some examples that aren't actually on the page.

I have moved the mouseover¦out to the image element to make life easier. You'll see that both events call the same function, with the same argument - the image element itself.

- The src,width & height of the element are stored in a temporary object.
- The correct rollover image is referenced via the element's id.
- The rollover's src, width & height are copied to the element.
- The rollover image at that 'id position' in rollImages is replaced by our temporary object.

- The same as above.

Eventually, all the 'real' Image objects in rollImages, are replaced by 'simple', Object objects, but that doesn't matter, we don't need them any more (and they get garbage collected, hopefully).

If you don't want to preload your rollovers, instead of filling rollImages with Image objects, fill it with Object objects:

var rollImages =
a1:{src:"gallery/bigdog", width: 200, height: 300},
a2:{src:"gallery/bigcat", width: 200, height: 300}//

I haven't sorted out the positioning yet. Maybe later.



function preload(src,w,h)
var img = new Image(w,h);
img.src = src;
return img;

var rollImages =
a1: preload("gallery/bigdog.gif"),
a2: preload("gallery/bigcat.gif")//

function roll(img)
var temp = {src:img.src,width:img.width,height:img.height};
var rollImg = rollImages[img.id];
img.src = rollImg.src;
img.width = rollImg.width;
img.height = rollImg.height;
rollImages[img.id] = temp;


<a href="javascript:void 0;">
<img id="a1" src="gallery/dog.gif"
width="100" height="100"
onmouseout ="roll(this)"></a>



3:28 pm on Oct 15, 2004 (gmt 0)

10+ Year Member


Thank you for the script. It works very well when I set up a gallery format and tried to break it.

BTW I did need to insert the following to handle the cat image:

<a href="javascript:void 0;">
<img id="a1" src="gallery/cat.gif"
width="100" height="100"
onmouseout ="roll(this)"></a>

I found that I couldn't make the script work in Netscape 4.7. Is it possible to make it do so? My logs keep showing a surprising amount of Netscape use. And, significantly, many of the users who view the gallery may be running Macs, so their browser needs to be calculated in.

Thanks for your help. This has solved my problems.

Bernard Marx

3:51 pm on Oct 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

My logs keep showing a surprising amount of Netscape use

Yes, but is that 4.7? ..or higher?

I consider 4 to be dead, so I would expect all but a vanishing-point fraction of those to be 6 or 7 (I think 6 id's as 5 even though 5 has never existed). You may disagree.

There are some little complications with NN4. Images, if I remember right, can't take event handlers. I'll mess about with one that works in my (deeply buried) NN4 if you really, really think you need it.

Re the cat...
me: It carries some examples that aren't actually on the page.

What did you do about the donkey?


4:02 pm on Oct 15, 2004 (gmt 0)

10+ Year Member


I may be slow (I only just now realized that your screen name is from the Huxley character from Brave New World) but I know there ain't no donkey in that script.

Re: Netscape. You're right. I rechecked the log of one of my sites and Netscape 4 = 1.6% and Netscape 6 = 43.6%. Tempus fugit.

Thanks for the offer.


Featured Threads

Hot Threads This Week

Hot Threads This Month