Questions about "DOM Scripting" chapter 6

**ZernanToledo** · Feb 19, 2007 09:14

I'm working my way through Jeremy Keith's DOM Scripting and have encountered hurdles in getting the Image Gallery script from chapter 6 tow work. I've been through it a couple of times and I'm sure I've copied it verbatim from the book. However, fresh eyes may expose a flaw.

The script is

Code:

// showPic Function 
function showPic(whichpic) {
	if (!document.getElementById("placeholder")) return true; // if image successfully swaps, return value of true								 
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src", source);

	if (!document.getElementById("description")) return false; // check whether the ID "description" exists
	var text = whichpic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue = text;
	return false;
}

function.prepareGallery() {
	if (!document.getElementsByTagName) return false; //check if the browser understands getElementsByTagName
	if (!document.getElementById) return false; //check if the browser understands getElementById
	if (!document.getElementById("imageGallery")) return false; // check whether the ID "imageGallery" exists
	
	var gallery = getElementById("imageGallery"); // load "imageGallery" into varible
	var links = gallery.getElementsByTagName("a"); // make "links" an array ( or "node list")containing all links in "imageGallery"
	
	for ( var i=0; i < links.length; i++ ) {
		links[i].onClick = function() {
			return showPic(this);
		} // anon function 
	} // for loop
} // prepareGallery

//addLoadEvent function written by Simon Willison (http://simon.incutio.com)
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

addLoadEvent(prepareGallery);
addLoadEvent(showPic);

and the XHTML is.....

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=iso-8859-1">
<title>Image Gallery Test</title>
<script type="text/javascript" src="imageGallery.js"></script>

<style type="text/css">
<!--
#placeholder {
	display: block;
	height: 150px;
	width: 200px;
}
-->
</style>
</head>

<body>
<p>My Images</p>

<ul id="imageGallery">
  <li><a href="Images/At the Arch.jpg" title="rocks">Image 1</a></li>
  <li><a href="Images/Big Wave.jpg" title="water">Image 2</a></li>
  <li><a href="Images/Blue hills.jpg" title="blue">Image 3</a></li>
  <li><a href="Images/Fish.jpg" title="fish">Image 4</a></li>
</ul>

<img src="Images/Water lilies.jpg" id="placeholder" alt="my image gallrY">

<p id="description">Choose an image</p>
</body>
</html>

Can anyone see where I'm going wrong?

**Kravvitz** · Feb 19, 2007 09:23

Code:

function.prepareGallery() {

should be

Code:

function prepareGallery() {

and

Code:

links[i].onClick = function() {

should be

Code:

links[i].onclick = function() {

**ZernanToledo** · Feb 19, 2007 09:29

Aha! Well noticed.

However it's still not working correctly, just links directly to image files. At least it's degrading gracefully ;o)

User Tag List

Thread: Questions about "DOM Scripting" chapter 6

Thread Tools

Display

Questions about "DOM Scripting" chapter 6

Bookmarks

Bookmarks

Posting Permissions