View Full Version : problem with rollover

Jun 13th, 2008, 10:40 PM
I'm having a little trouble getting this script to work. It should create a nice 3-state rollover for my link images. I know how to do more basic rollovers, but my understanding is that this one will allow me to add images later without changing my script at all. Here's the script:

window.onload = rolloverInit;

function rolloverInit() {
for (var i=0; i<document.images.length; i++) {
if (document.images[i].parentNode.tagName == "A") {

function setupRollover(thisImage) {
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;

thisImage.overImage = new Image();
thisImage.overImage.src = "assets/images/navigation/" + thisImage.id + "_on.gif";
thisImage.onmouseover = rollOver;

thisImage.clickImage = new Image();
thisImage.clickImage.src = "assets/images/navigation/" + thisImage.id + "_click.gif";
thisImage.onmousedown = rollClick;

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

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

function rollClick() {
this.src = this.clickImage.src;

and the HTML:

<div id="topLinks"><a href="bio.html"><img id="bio" src="assets/images/navigation/bio_off.png" /></a>

It's not in the code above, but the page is properly linked to the external script page. When I test it in Safari, the initial image appears, but I get the "?" box when I rollover. In Firefox, nothing happens when I rollover.

I have double checked the location of the files, and they look good.

Jun 13th, 2008, 11:17 PM
figured out the problem.

".gif" in the script should have been ".png"