SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Questions about "DOM Scripting" chapter 6

    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?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function.prepareGallery() {
    should be
    Code:
    function prepareGallery() {
    and
    Code:
    links[i].onClick = function() {
    should be
    Code:
    links[i].onclick = function() {
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha! Well noticed.

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •