Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Double image swap

Reply
Thread Tools

Double image swap

 
 
Asbalom
Guest
Posts: n/a
 
      01-08-2008
Hello,

The script below was taken from "Javascript & Ajax" by Negrino (pp.
83-84). It was given with just one link. My question is how can I make
it work with more than one link.


// ------------- SCRIPT -------------

window.onload = rolloverInit;

function rolloverInit() {
for (var i=0; i<document.links.length; i++) {
var linkObj = document.links[i];
if (linkObj.id) {
var imgObj = document.getElementById(linkObj.id + "Img");
if (imgObj) {
setupRollover(linkObj,imgObj);
}
}
}
}

function setupRollover(thisLink,thisImage) {
thisLink.imgToChange = thisImage;
thisLink.onmouseout = rollOut;
thisLink.onmouseover = rollOver;

thisLink.outImage = new Image();
thisLink.outImage.src = thisImage.src;

thisLink.overImage = new Image();
thisLink.overImage.src = "images/" + thisLink.id + "_on.gif";
}

function rollOver() {
this.imgToChange.src = this.overImage.src;
}

function rollOut() {
this.imgToChange.src = this.outImage.src;
}


<!-- ------------- HTML -----------------

<h1><a href="next.html" id="arrow">Next page</a></h1>
<img src="images/arrow_off.gif" width="147" height="82" id="arrowImg"
alt="arrow" />



I appreciate any help. Thanks,
Asbalom
 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      01-08-2008
On Jan 7, 7:04*pm, Asbalom <(E-Mail Removed)> wrote:
> Hello,
>
> The script below was taken from "Javascript & Ajax" by Negrino (pp.


What a stupidly appropriate title for what is obviously another bad
book on browser scripting.

> 83-84). It was given with just one link. My question is how can I make
> it work with more than one link.


It looks like it "works" for more than one link, provided they have
ID's and you follow the tangled naming conventions.

>
> // ------------- SCRIPT -------------
>
> window.onload = rolloverInit;


Proprietary and error-prone approach. I'm kidding of course. This is
the only competent line in the script.

[snip awful rollover example]

Apparently nobody ever taught this "Negrino" mutt how to roll over.

>
> <h1><a href="next.html" id="arrow">Next page</a></h1>
> <img src="images/arrow_off.gif" width="147" height="82" id="arrowImg"
> alt="arrow" />


Lousy markup too. A top-level headline with a "next page" link and an
orphaned XHTML image. In a text browser (or with images off), it will
appear something like this:

NEXT PAGE
arrow

Using script, image elements, Image constructors, etc. for these sorts
of decorative effects is silly. The markup should look like this:

<a class="nextpage" href="next.html">Next Page</a>

Put something this in a style block or linked style sheet.

a.nextpage {
padding-right:147px;
background-image:url(images/arrow_off.gif);
background-repeat:no-repeat;
background-position:right;
white-space:nowrap
}

a.nextpage:hover, a.nextpage:active, a.nextpage:focus {
background-image:url(images/arrow_on.gif);
}

Repeat for other link classes.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
next / previous image swap WITH larger image popup Clay Javascript 1 09-28-2006 09:07 PM
What swap is called when using std::swap? Niels Dekker (no reply address) C++ 4 07-20-2006 08:44 PM
Swap double problem auc@worldnet.att.net Java 3 03-08-2005 08:43 AM
cannot convert parameter from 'double (double)' to 'double (__cdecl *)(double)' error Sydex C++ 12 02-17-2005 06:30 PM
Mouse-over an image -> play video instead of swap image? Phillip Roncoroni HTML 6 04-06-2004 06:57 AM



Advertisments