Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

handy, generic javascript coding

back button, popups, etc.

2:55 pm on Apr 30, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member rcjordan is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 22, 2000
votes: 0

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:

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

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

9:50 am on Aug 10, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
votes: 0

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.off=new Image();


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

This 31 message thread spans 2 pages: 31

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members