How do I transform this most beautifully terse script…

@GitmanMay 25.2005

Hey,

I knew/know, that some of these friggin’ javascripts I see floating around, for the simplest of tasks…are way overfvckin’bloated. Jesus, I wish all of you knuckleheads would stop trying to make sh!t so unaccessable. Look at this genius:

* <script type=”text/javascript” language=”javascript1.2″><!–
var a = new Image(); a.src = ‘root.gif’;
var b = new Image(); b.src = ‘hover.gif’;
var c = new Image(); c.src = ‘active.gif’;
//–></script>

# Hover:

* <a href=”whatever” onmouseover=”document.images[‘s1a’].src=’hover.gif’;” onmouseout=”document.images[‘s1a’].src=’root.gif’;”><img src=”root.gif” name=”s1a” height=”50″ width=”50″ alt=”” border=”0″></a>

Do I really need to post some of the crap codes people come up with to do this same exact thing? Anyway, for those of you still left with me…how can I use this script to do multiple rollovers? Where do I assign the name or id’s for each of the different link/rollovers? As you can see the “s1a” is not mentioned in the script, so what is doing here?

Thanks.

to post a comment

JavaScript

9 Comments(s) _↴

@phpnoviceMay 25.2005 — #The first part is just doing preloads and is not actually required. This part is all there is to a rollover script:

[code=html]
 <a href="whatever"
 onmouseover="document.images['s1a'].src='hover.gif';"
 onmouseout="document.images['s1a'].src='root.gif';"><img
 name="s1a" src="root.gif" height="50" width="50" alt="" border="0">
 </a>
 [/code]

The code is self-referencing. To do multiples, you just have to code multiples. If you really want to use a helper function that will work for all rollovers, you can do this:

<i>
 </i>function swapImage(img, src) {
 document.images[img].src = src;
 return true;
 }

and code your HTML this way:

[code=html]
 <a href="whatever"
 onmouseover="return swapImage('s1a', 'hover.gif');"
 onmouseout="return swapImage('s1a', 'root.gif');"><img
 name="s1a" src="root.gif" height="50" width="50" alt="" border="0">
 </a>
 [/code]

But, as you can see, it is practically [I]"six of one and half a dozen of the other"[/I] -- as they say. ?

@GitmanauthorMay 25.2005 — #Holy,

Whoazer....yoooo...you are a GOLDEN GOD !!! No seriously, God...Golden...You...

I can't believe someone actually gave me a reply that was worthy of praise....but you my friend...have hit it out tha park on this one. What would they think now...wow, I bet yer mother is proud to have you has an offspring...golden egg she laid there...I'll beeeeee damn to pieces !!

*breath*

*thinking of more adjectives*

*gets distracted by shiny object on desk*

*refocusing*

Ok, where was I...hmmm...I remember meeting a friggin' God...oh yea...one that glimmered...Oh right....I LOOOOOOOOOOOOOOOVE YOU !! You know...in a very non-sexual frat-bro kind of way. *wink*

I could go on like this foreva...but now I must go caress the rest of this code.

Cheers mate, you made my morning, sincerely.

@phpnoviceMay 25.2005 — #I'm a JavaScript Master -- not a god. But, you are still welcome. ?

Cheers.

@GitmanauthorMay 26.2005 — #Hey,

Ok, I have a small little problem. You mentioned preloads, well that first rollover that is mentioned in the head of the page, is the only one that works right after the page loads. I guess this is what you mean by preload. The other rollovers don't really work until you hover the mouse over them for a second or so. How can I preload all of the rollovers so that they work immediately after the page loads? I tried listing them right after the first one, but when I do this, it will only preload the last one listed. How can I get them all to preload?

Thanks.

@guestMay 26.2005 — #i am guessing you are trying to assign multiple pictures ot the variable a b and c

well if you try to assign them before the images load then what was loading gets dumped and the new image starts loading, ie. nothing is cached. Instead just keep making new variable a,b,c,d,e,f,g....as needed.

btw if I put all my images in an array, is it possible to create a funtion that utilizes for loops to preload all the images to numeric variables ( I am not entirely sure of when variable have to be created in javascript)

example (this obviously doesnt work)

if (document.images) {

CarloImages = new Array("Car1.jpg", "Car2.jpg", "Car3.jpg", "Car4.jpg", "Car5.jpg", "Car6.jpg");

thisPic = 0;

}

function preLoad()

{

for(i=0;i<=CarloImages.length;i++){

eval("var image" + i) = new Image;

eval("image" + i + ".src") = CarloImages[i].src;

}

}

@GitmanauthorMay 26.2005 — #Hey,

No, I changed teh variables...or at least I thought I did to d,e,f etc. The problem is that:

var b = new Image(); b.src = 'image.gif';

I only changed the first letter, and not the one before .src...DOH! Dammit, the smallest things make all the difference...it works flawlessly now.

Thanks again, everyone for your replies.

@phpnoviceMay 26.2005 — #If you would like a fancy -- yet simple -- preloader that makes it easy to avoid such coding errors -- and single-threads the preloads so that you don't bog down the loading of your page -- just ask. ?

@GitmanauthorMay 26.2005 — #YO YO YO YO....ME ME ME ME...

*raises hand*

I WANNNNNNNNNT ONE !!! PLEASE...

@phpnoviceMay 26.2005 — #This works by you specifying an array of image url's for those images that are NOT referenced in an actual HTML [b]SRC[/b] attribute. Then, the script will preload each one, single threaded, after the page loads:

<i>
 </i>preloads = new Array(
 "/folder/image1.gif",
 "/folder/image2.gif",
 "/folder/image3.gif",
 ...etc...
 "/folder/imagex.gif"
 ); // no comma after last element above
 //
 function preloadImages() {
 _imgidx++;
 if (_imgidx &lt; preloads.length) {
 _curimg.src = preloads[_imgidx];
 }
 }
 _imgidx = -1;
 _curimg = new Image();
 _curimg.onload = preloadImages;
 _curimg.onerror = preloadImages;
 //
 window.onload = function() {
 preloadImages();
 return true;
 }

Also in #JavaScript _↴

event issues webservicex ???How to stop or prevent right click and save option on php page by java script or php.

Success!

Help @Gitman spread the word by sharing this article on Twitter...

Tweet This

How do I transform this most beautifully terse script…

# Hover:

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I transform this most beautifully terse script…

# Hover:

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴