homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Accursed no-click mouseover ImageSwap to larger version of image1
Will no one rid me of this meddlesome problem?

10+ Year Member

Msg#: 2543 posted 12:24 pm on Oct 15, 2004 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member

Msg#: 2543 posted 1:29 pm on Oct 15, 2004 (gmt 0)

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>



10+ Year Member

Msg#: 2543 posted 3:28 pm on Oct 15, 2004 (gmt 0)


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

WebmasterWorld Senior Member 10+ Year Member

Msg#: 2543 posted 3:51 pm on Oct 15, 2004 (gmt 0)

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?


10+ Year Member

Msg#: 2543 posted 4:02 pm on Oct 15, 2004 (gmt 0)


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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved