Double image swap

[Asbalom]

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

 

[David Mark]

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.