Preserved Topic: Comment on Doc's JS rollover. $Pages that link to <a href="https://ozoneasylum.com/backlink?for=17874" title="Pages that link to Preserved Topic: Comment on Doc&#039;s JS rollover." rel="nofollow" >Preserved Topic: Comment on Doc's JS rollover.\$

Author	Thread
Sloloem Bipolar (III) Mad Scientist From: Camillus, NY, USA Insane since: Jul 2000	posted 09-26-2000 21:35 I was looking at it and I realized I don't like his method at all...it seems a bit complicated and if you have a large site with many rollovers it can get pretty big. I have a much more economical way: <SCRIPT LANGUAGE="JavaScript"> function pic(img_name,img_src) { document[img_name].src=img_src; } </SCRIPT> Just one simple function that uses the name of the image which is defined in the <img> tag like <img name="blarg" src="blarg.gif"> and the rollover goes into the mouse events and is just simply pic('name','newpic') it's simple, I love it.
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 09-26-2000 22:12 The one problem with your method is that you don't pre-load the images. It will work fine if you have a cable modem or DSL, but otherwise there will be a delay and most people will have their mouses off the button before the image appears. You need to use the Image() object to preload images.
niktyler Obsessive-Compulsive (I) Inmate From: Peoria, AZ USA Insane since: Sep 2000	posted 09-26-2000 23:55 Despite that Doc's code may get 'bulky' when more images have to be added to it for large sites, it does preload the images, which is useful for visitors who are still on modems. That was what I was looking for, as while I am on a cable modem at home (& a T1 at work), most of the visitors to the sites I am working on will typically be modem surfers, and I'd rather the pages they will be viewing load quickly for them so they actually stay a while. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">
Sloloem Bipolar (III) Mad Scientist From: Camillus, NY, USA Insane since: Jul 2000	posted 09-27-2000 00:36 That's why I have another function that I use to preload the needed images. This just saves the rollover from getting bulky and it makes it easier to call, and more customizable.
dick Obsessive-Compulsive (I) Inmate From: Insane since: Sep 2000	posted 09-27-2000 00:46 what planet are you from Sloloem? doh!
mario Nervous Wreck (II) Inmate From: germany Insane since: Sep 2000	posted 09-27-2000 08:51 sloloem_what is it you use to preload? please post the code as i use a function for my rollovers that is similar to yours. thanks
Weadah Maniac (V) Mad Scientist From: TipToToe Insane since: Aug 2000	posted 09-27-2000 17:26 Yah, what planet are you from Slo ? Doh.
Sloloem Bipolar (III) Mad Scientist From: Camillus, NY, USA Insane since: Jul 2000	posted 09-27-2000 20:53 Mario: function load_images() { var image1 = new Image(); image1.src = 'Menu-Prod-g.jpg'; var image2 = new Image(); image2.src = 'Menu-Down-g.jpg'; var image3 = new Image(); image3.src = 'Menu-Hire-g.jpg'; var image4 = new Image(); image4.src = 'Menu-Con-g.jpg'; } </SCRIPT> </head> <body onLoad="load_images();" bgcolor="#FFFFFF" link="#000080" text="#00000"> dick & Wead: I'd tell you, but then I'd have to kill you.
little osh Bipolar (III) Inmate From: Wales, UK Insane since: Jun 2000	posted 09-28-2000 09:04 Sorry guys, but I have to agree with Sloloem. His method is a lot simpler, particularly for new Scripters who are coding for the first time! (Have you noticed how many posts there are on this forum just asking for clarification of the Doc's code? I've given up answering them now!) Also, I'm not sure how JavaScript indexes arrays, but if it's anything like C, then I'm sure that Sloloem's method is also a little more efficient. Doc's method uses an array within an array to index the correct image. Surely more computation involved! (Though with the speeds of computers these days, I don't think it makes much diference unless you have a very large number of images, and therefore a very long array). Those are my thoughts anyway. osh PS to mario. Have a look at www.htmlguru.com for some nifty ideas about preloading images. As each image loads, you can print to screen how many images have been loaded, and how many are remaining, so that users on a slow connection know that their browser hasn't stalled.
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 09-28-2000 22:31 Honestly I don't see that big of a difference between the two different scripts. The actual rollover code is virtually Identical. The preloading is more basic but one of the advantages to Doc's method is that since all the paths are in one array its fairly easy to modify. Personally I don't put the names of the images in an array I just call the image by name in the function. Other than that Docs script also makes sure the function will work in the browser as well.
Sloloem Bipolar (III) Mad Scientist From: Camillus, NY, USA Insane since: Jul 2000	posted 09-29-2000 00:14 A good idea would be to use onload in body to trigger the preload. that way the images in the rollovers are only loaded AFTER the rest of the page has. So slow modem people can look at the site and note wait for these dumb images they can't even see yet load.
Weadah Maniac (V) Mad Scientist From: TipToToe Insane since: Aug 2000	posted 09-30-2000 03:37 Yah, sorta, Slo. In the end it just works out betta to keep 'em waiting that little bit longer so everything is smooth. A page that loads once, then continues to load (postload images) isn't all that effective or attractive. There are other reasons..... Your idea is correct weight tho, if you wanted to do that.
Rinswind 2th Maniac (V) Inmate From: Den Haag: The Royal Residence Insane since: Jul 2000	posted 10-02-2000 01:15 Curse the cable guys...they did not put the wire in the ground at my village yet. When a page loads than i will see the rollovers work even when they are not all there. I don't want to wait before all pics are there... You see rollovers have a function you know they are not only beautifull. A rollover lets you see that you have placed your mouse on the right link. This effect is not there when a page is not fully loaded and uses your script. [This message has been edited by Rinswind 2th (edited 02-10-2000).]
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 10-02-2000 20:05 I kinda have my own rollover script using bits of many others but to solve the rollover issue when the page is not yet loaded I do this. first set up a variable. loaded = 0; then you have your preload function in there the last line would be: function preload(){ blah blah blah loaded=1; } Then in your swap or switch function you can place an if statement like this if ((loaded) && (document.images)){ // switch the image } That way the page should not try to swap the images until the over state is loaded. This also makes sure the browser can support the rollover. A little extra code but important in commercial work where you want things to work on ALL platforms without errors pieces mike Walking the Earth like Kane

Preserved Topic: Comment on Doc's JS rollover.\$

Author

Thread

Sloloem
Bipolar (III) Mad Scientist

From: Camillus, NY, USA
Insane since: Jul 2000

posted 09-26-2000 21:35

I was looking at it and I realized I don't like his method at all...it seems a bit complicated and if you have a large site with many rollovers it can get pretty big.
I have a much more economical way:
<SCRIPT LANGUAGE="JavaScript">
function pic(img_name,img_src) {
document[img_name].src=img_src;
}
</SCRIPT>
Just one simple function that uses the name of the image which is defined in the <img> tag like <img name="blarg" src="blarg.gif">
and the rollover goes into the mouse events and is just simply pic('name','newpic')
it's simple, I love it.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 09-26-2000 22:12

The one problem with your method is that you don't pre-load the images. It will work fine if you have a cable modem or DSL, but otherwise there will be a delay and most people will have their mouses off the button before the image appears.

You need to use the Image() object to preload images.

niktyler
Obsessive-Compulsive (I) Inmate

From: Peoria, AZ USA
Insane since: Sep 2000

posted 09-26-2000 23:55

Despite that Doc's code may get 'bulky' when more images have to be added to it for large sites, it does preload the images, which is useful for visitors who are still on modems. That was what I was looking for, as while I am on a cable modem at home (& a T1 at work), most of the visitors to the sites I am working on will typically be modem surfers, and I'd rather the pages they will be viewing load quickly for them so they actually stay a while. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

Sloloem
Bipolar (III) Mad Scientist

From: Camillus, NY, USA
Insane since: Jul 2000

posted 09-27-2000 00:36

That's why I have another function that I use to preload the needed images.
This just saves the rollover from getting bulky and it makes it easier to call, and more customizable.

dick
Obsessive-Compulsive (I) Inmate

From:
Insane since: Sep 2000

posted 09-27-2000 00:46

what planet are you from Sloloem? doh!

mario
Nervous Wreck (II) Inmate

From: germany
Insane since: Sep 2000

posted 09-27-2000 08:51

sloloem_what is it you use to preload? please post the code as i use a function for my rollovers that is similar to yours.
thanks

Weadah
Maniac (V) Mad Scientist

From: TipToToe
Insane since: Aug 2000

posted 09-27-2000 17:26

Yah, what planet are you from Slo ? Doh.

Sloloem
Bipolar (III) Mad Scientist

From: Camillus, NY, USA
Insane since: Jul 2000

posted 09-27-2000 20:53

Mario:
function load_images() {
var image1 = new Image();
image1.src = 'Menu-Prod-g.jpg';
var image2 = new Image();
image2.src = 'Menu-Down-g.jpg';
var image3 = new Image();
image3.src = 'Menu-Hire-g.jpg';
var image4 = new Image();
image4.src = 'Menu-Con-g.jpg';
}
</SCRIPT>
</head>
<body onLoad="load_images();" bgcolor="#FFFFFF" link="#000080" text="#00000">

dick & Wead: I'd tell you, but then I'd have to kill you.

little osh
Bipolar (III) Inmate

From: Wales, UK
Insane since: Jun 2000

posted 09-28-2000 09:04

Sorry guys, but I have to agree with Sloloem. His method is a lot simpler, particularly for new Scripters who are coding for the first time! (Have you noticed how many posts there are on this forum just asking for clarification of the Doc's code? I've given up answering them now!)

Also, I'm not sure how JavaScript indexes arrays, but if it's anything like C, then I'm sure that Sloloem's method is also a little more efficient. Doc's method uses an array within an array to index the correct image. Surely more computation involved! (Though with the speeds of computers these days, I don't think it makes much diference unless you have a very large number of images, and therefore a very long array).

Those are my thoughts anyway.

osh

PS to mario. Have a look at www.htmlguru.com for some nifty ideas about preloading images. As each image loads, you can print to screen how many images have been loaded, and how many are remaining, so that users on a slow connection know that their browser hasn't stalled.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 09-28-2000 22:31

Honestly I don't see that big of a difference between the two different scripts. The actual rollover code is virtually Identical.

The preloading is more basic but one of the advantages to Doc's method is that since all the paths are in one array its fairly easy to modify. Personally I don't put the names of the images in an array I just call the image by name in the function.

Other than that Docs script also makes sure the function will work in the browser as well.

Sloloem
Bipolar (III) Mad Scientist

From: Camillus, NY, USA
Insane since: Jul 2000

posted 09-29-2000 00:14

A good idea would be to use onload in body to trigger the preload.
that way the images in the rollovers are only loaded AFTER the rest of the page has. So slow modem people can look at the site and note wait for these dumb images they can't even see yet load.

Weadah
Maniac (V) Mad Scientist

From: TipToToe
Insane since: Aug 2000

posted 09-30-2000 03:37

Yah, sorta, Slo.
In the end it just works out betta to keep 'em waiting that little bit longer so everything is smooth. A page that loads once, then continues to load (postload images) isn't all that effective or attractive. There are other reasons.....

Your idea is correct weight tho, if you wanted to do that.

Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted 10-02-2000 01:15

Curse the cable guys...they did not put the wire in the ground at my village yet.

When a page loads than i will see the rollovers work even when they are not all there.
I don't want to wait before all pics are there... You see rollovers have a function you know they are not only beautifull. A rollover lets you see that you have placed your mouse on the right link. This effect is not there when a page is not fully loaded and uses your script.

[This message has been edited by Rinswind 2th (edited 02-10-2000).]

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 10-02-2000 20:05

I kinda have my own rollover script using bits of many others but to solve the rollover issue when the page is not yet loaded I do this.

first set up a variable.

loaded = 0;

then you have your preload function in there the last line would be:
function preload(){

blah blah blah

loaded=1;
}

Then in your swap or switch function you can place an if statement like this

if ((loaded) && (document.images)){
// switch the image
}

That way the page should not try to swap the images until the over state is loaded. This also makes sure the browser can support the rollover. A little extra code but important in commercial work where you want things to work on ALL platforms without errors

pieces
mike

Walking the Earth like Kane