Closed Thread Icon

Topic awaiting preservation: A simplified image rollover, too simple? Pages that link to <a href="https://ozoneasylum.com/backlink?for=8348" title="Pages that link to Topic awaiting preservation: A simplified image rollover, too simple?" rel="nofollow" >Topic awaiting preservation: A simplified image rollover, too simple?\

 
Author Thread
ShrineMaster
Obsessive-Compulsive (I) Inmate

From: Somewhere in Iowa
Insane since: Feb 2002

posted posted 10-18-2002 03:35

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...

code:
<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...

code:
<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).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-18-2002 03:40

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

RoyW
Bipolar (III) Inmate

From:
Insane since: Aug 2001

posted posted 10-18-2002 05:48

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........

DocOzone
Maniac (V) Lord Mad Scientist
Sovereign of all the lands Ozone and just beyond that little green line over there...

From: Stockholm, Sweden
Insane since: Mar 1994

posted posted 10-18-2002 11:29

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-

RoyW
Bipolar (III) Inmate

From:
Insane since: Aug 2001

posted posted 10-18-2002 16:04

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.

sonicsnail
Bipolar (III) Inmate

From: Scotland
Insane since: Jun 2001

posted posted 10-18-2002 23:17

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!)

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 10-18-2002 23:20

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

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 10-19-2002 01:47

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).]

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

posted posted 10-20-2002 12:50

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

IE6
winXP

« BackwardsOnwards »

Show Forum Drop Down Menu