Topic awaiting preservation: A simplified image rollover, too simple? (Page 1 of 1)

I was working on some Javascript for a rollover and I tried to reduce the whole thing down to the bare minimum and here's what I came up with...

<IMG SRC="image1.jpg" WIDTH=100 HEIGHT=50 BORDER=0

ONMOUSEOVER="this.src='image2.jpg';"

ONMOUSEOUT="this.src='image1.jpg';">

Other than the rollover image not being preloaded. The method around that would be loading the Over image first then loading the Out image...

<IMG SRC="image2.jpg" WIDTH=100 HEIGHT=50 BORDER=0

ONLOAD="this.src='image1.jpg';"

ONMOUSEOVER="this.src='image2.jpg';"

ONMOUSEOUT="this.src='image1.jpg';">

Are there any other downsides to this? Too simple?



[This message has been edited by ShrineMaster (edited 10-18-2002).]

That should be fine, aside from the fact that image2.jpg will be visible for a short time while image1.jpg loads.

Quite a while ago I was experimenting with being able to add rollover images simply by adding the HTML for the image and having the script do the rest. This is what I came up with.
http://www.javascript-fx.com/post/imgswap/index.html

I never used it........

Wow, Roy, you've been doing some really neat scripts! This one is sweet, as was your 20 liner, too cool.

Elegance.

Your pal, -doc-

Thanks Doc. The idea came from marxa in this thread at another forum. The really interesting thing is it works in ALL browsers INCLUDING NS4!.
marxa found you could make image rollovers without links in NS4.

This doesn't appear to work in IE6 (xp home)... I see the menu twice - one under the other - and only the "arrow" changes onmouseover, but it simply disappears. - I hope this is enough info to help you cure it!

Cool idea though...

Pete

(BTW - apologies if it DOES work in IE6 and there's something wrong with my pc!)

Sonicsnail: It works for me, same browser, same OS. Are you sure you gave it enough time for all the images to load?

Same here, xp Pro IE6, works fine. Well, except for the top 2 images, Home and Links. Bit 'd about that.

sonicsnail, the menu / images are coded into the HTML twice.


Edit:

This works a little better:


<script type="text/javascript">
function makeRollovers() {
path = "./images/"
for(i=0 ; i<document.images.length ; i++) {
if (imgName.indexOf('rollover')!=-1) {
fileType = doucment.images[i].src.substr(-3)
document.images[i].onmouseover = function() {this.src = path + this.name + "Over." + fileType;}
document.images[i].onmouseout = function() {this.src = path + this.name + "Out." + fileType;}
preLoad = new Image()
preLoad.src = path + document.images[i].name + "Over." + fileType
}}}
</script>


<img src="./images/image1.gif" name="image1rollover"/>
<img src="./images/image2.png" name="image2rollover"/>
<img src="./images/image3.jpg" name="image3rollover"/>

[This message has been edited by Dracusis (edited 10-19-2002).]

i get exactly the same error as sonicsnail above, so must be something going on

IE6
winXP