handy, generic javascript coding

back button, popups, etc.

[rcjordan]

We're getting some good js routines scattered all over. I thought we'd try collecting a few of them here as a reference.

Back Button:

<FORM> 
<INPUT TYPE="button" VALUE="Go Back" onClick="history.back()"> 
</FORM> 

<note: to keep this thread from gaining more side conversations, I'll keep it locked. Please share your javascript ideas by starting new threads, and I'll add to this thread based on usefulness and member response to the posts. ~tedster>

[edited by: tedster at 10:03 am (utc) on Aug. 10, 2002]

[tedster]

Simple Rollovers through Arrays

(Thanks to rewboss [webmasterworld.com] for this contribution)

This script automates the preloading of all the images you need for JavaScript rollover buttons. It can be placed in an external .js file.

For each button, you need an "on" image and an "off" image.

The images are stored using the following convention:

button_name-on.gif for the "on" image;
button_name-off.gif for the "off" image.
Here's the code:

var bNames='home products orders contact'.split(' ');
var path='/buttons/', btn=new Array();

function Button(name){
this.on=new Image();
this.on.src=path+name+'-on.gif';
this.off=new Image();
this.off.src=path+name+'-off.gif';
}

for(i=0; i<bNames.length; i++) btn[bNames[i]]=new Button(bNames[i]);

bNames is a list of all the button names (without the -on.gif and -off.gif), path contains the path to the directory you have
stored the images in.

This will give you an associative array call btn which contains Button objects. Each Button has two properties, Button.on and Button.off, which are Image objects.

Thus, to access the URL of the "Home" button, you would use:

btn['home'].on.src for the highlighted image;
btn['home'].off.src for the unhighlighted image.

To demonstrate, here's what the HTML of the "Home" button might look like:

<a href="index.html" onmouseover="rollOn('home');" onmouseout="rollOff('home');">
<img src="/buttons/home-off.gif" name="home" alt="Home" /></a>

The functions rollOn and rollOff look like this:

function rollOn(name){ document[name].src=btn[name].on.src; }
function rollOff(name) { document[name].src=btn[name].off.src; }

The power of associative arrays is amazing...