JavaScript Forum

**World** · 02:14 PM

I'm currently working my way through the Javascript book of the "Missing Manual" series, written by David Sawyer McFarland.

Unfortunately, the author doesn't really care to make things as easy as possible. So, in order to appear smart, he used a complicated regular expression to preload images.

I wouldn't use this, as my image file names aren't this regular. And I don't want to bother with regular expressions at this time.

I replaced his regular expression-based loop by a normal loop to preload the images.

Now I made a mistake, and, of course, there's no solution.

I wonder if any of you could spot the error in my Javascript.

Thanks.

PS: using the jQuery library.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Rollovers</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<link href="css/gallery.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#gallery img').each(function() {
var currImgSrc = $(this).attr('src');
var preloadImages = ['images/large/blue.jpg',
					 'images/large/yellow.jpg',
					 'images/large/green.jpg',
					 'images/large/orange.jpg',
					 'images/large/purple.jpg',
					 'images/large/red.jpg'];
var imgs = [];
for (var i=0; i < preloadImages.length; i++) {
	imgs[i] = new Image ();
	imgs [i].src = preloadImages[i];
	}

$(this).hover(
	function() {
		$(this).attr('src', preloadImages.src);
		},
	function() {
		$(this).attr('src', currImgSrc);
		},


); // end hover
});  // end each
}); // end ready
</script>
</head>
<body id="twoCol" class="simple">
<div id="container">
  <div id="banner"><img src="../images/banner.png" alt="JavaScript: The Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div>
  
  <div id="contentWrap">
  <div id="main">
  <h1>Image Rollovers</h1>
  <div id="gallery">
  <a href="http://www.webmaster-talk.com/images/large/blue.jpg"><img src="http://www.webmaster-talk.com/images/small/blue.jpg" width="70" height="70" alt="Blue"></a>
  <a href="http://www.webmaster-talk.com/images/large/yellow.jpg"> <img src="http://www.webmaster-talk.com/images/small/yellow.jpg" width="70" height="70" alt="Yellow"> </a>
  <a href="http://www.webmaster-talk.com/images/large/green.jpg"><img src="http://www.webmaster-talk.com/images/small/green.jpg" width="70" height="70" alt="Green"> </a>
  <a href="http://www.webmaster-talk.com/images/large/orange.jpg"><img src="http://www.webmaster-talk.com/images/small/orange.jpg" width="70" height="70" alt="Orange"> </a>
  <a href="http://www.webmaster-talk.com/images/large/purple.jpg"><img src="http://www.webmaster-talk.com/images/small/purple.jpg" width="70" height="70" alt="Purple"> </a><a href="http://www.webmaster-talk.com/images/large/red.jpg"><img src="http://www.webmaster-talk.com/images/small/red.jpg" width="70" height="70" alt="Red"></a>
  </div>
  <p class="credit">Photos by <a href="http://www.morguefile.com/forum/profile.php?username=alin">Alin Nan</a></p>
  
</div>
  <div id="sidebar">
    <h2>Script 7.1</h2>
</div>
  </div>
  <div id="footer"><em>“Building Interactive Web Sites with JavaScript”</em></div>
</div>
</body>
</html>

**World** · 09-17-2009, 02:52 PM

PS: I tried it the way David Sawyer McFarland did it.

Copied the tutorial. It doesn't work. So Mr. McFarland, trying such a "smart" replacement function with image file extensions (to teach Javascript for beginners) got his own tutorial wrong

**chrishirst** · 09-17-2009, 03:22 PM

URI Needed to see the RUNNING code

**World** · 03:42 PM

Quote:

Originally Posted by chrishirst

URI Needed to see the RUNNING code

Did you mean you needed the Jquery library that this script has attached?

I tried to upload the file jquery.js, but I get an error and the message "invalid file"

**chrishirst** · 09-17-2009, 03:41 PM

nope, the page on your site where the script and the images can be found.

**World** · 09-17-2009, 03:43 PM

Quote:

Originally Posted by chrishirst

nope, the page on your site where the script and the images can be found.

They aren't on the web. Those are just examples from a book.

I could put it online tonight, though.

So you can't see an error just by looking at the code, but need to see it running so a javascript console can check it for errors?

**World** · 09-18-2009, 01:29 AM

Well, if the mistake cannot be seen from the code, I'll probably have to get started with that Javascript debugging plug-in for Firefox.