Welcome to WebmasterWorld Guest from 54.163.84.199

Forum Moderators: open

handy, generic javascript coding

back button, popups, etc.

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

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



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]

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

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



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

This 31 message thread spans 2 pages: 31
 

Featured Threads

Hot Threads This Week

Hot Threads This Month