homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

This 31 message thread spans 2 pages: < < 31 ( 1 [2]     
handy, generic javascript coding
back button, popups, etc.

 2:55 pm on Apr 30, 2001 (gmt 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)

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 ( 1 [2]
Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved