2 Replies - 976 Views - Last Post: 08 February 2009 - 08:51 PM

#1 chrisp200  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 82
  • Joined: 18-November 08

Basic Javascript Rollover

Post icon  Posted 08 February 2009 - 08:42 PM

For some reason I cant get my rollovers to work on my web design

here's the html

http://halffull.free...rash/index.html


THE Javascript
window.onload = rolloverInit;

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

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

	thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id + "_o.gif";
	thisImage.onmouseover = rollOver;	
}

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

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



Is This A Good Question/Topic? 0
  • +

Replies To: Basic Javascript Rollover

#2 pr4y  Icon User is offline

  • Location: 127.0.0.1
  • member icon

Reputation: 35
  • View blog
  • Posts: 621
  • Joined: 19-September 08

Re: Basic Javascript Rollover

Posted 08 February 2009 - 08:45 PM

First off, get RID of freehostia. Worst. Host. Ever.

If you want a free host, go with: 000webhost

Not only are they free, but they are:

1. Fast
2. Ad-Free
3. FTP / SSH supported
... the list goes on.



Now, (ON TOPIC)

The rollovers are working perfectly fine, and there is no flaws (that I can see) with your code.

The problem is, your Rollover image URL's are incorrect (as you can see by the broken image that appears whenever you hover the image).

Not Found
The requested URL /crash/images/_o.gif was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. 




If you have any other questions, feel free to ask! That's what we are here for.

This post has been edited by pr4y: 08 February 2009 - 08:47 PM

Was This Post Helpful? 1
  • +
  • -

#3 teampoop  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 140
  • Joined: 19-June 08

Re: Basic Javascript Rollover

Posted 08 February 2009 - 08:51 PM

You're missing a key element in your HTML for this code to work, the id attribute. So the code doesn't know what to append to the string.

<img !!id="portfolio"!! height="39" width="88" alt="" src="http://halffull.freehostia.com/crash/images/portfolio.gif"/>



or you could change this
 thisImage.overImage.src = "images/" + thisImage.id + "_o.gif";



to
 thisImage.overImage.src = "images/" + thisImage.src.replace(/\.gif$/, "") + "_o.gif";



err check the syntax on the replace regexp.. I always gak those up.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1