Image swapping

**Tullamore** · 04-25-2012 04:55 PM

This is the web page I'm working on:
http://grabilla.com/02419-97c039ec-1...7281f4fc63.png

I need to modify my code so that when you click the small images for the 4 speakers, a larger one appears below it. I need to modify both my HTML and Javascript. Here is my code:

HTML:

HTML Code:

!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>San Joaquin Valley Town Hall</title>
	<link rel="shortcut icon" href="../images/favicon.ico">
	<link rel="stylesheet" href="../styles/speakers_pages.css">
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<!-- JavaScript HTML requirements -->
    <script src="../javascript/image_swap_library.js"></script>
    <script src="../javascript/image_swap.js"></script>
</head>

<body>
	<header>
		<img src="../images/town_hall_logo.gif" alt="Town Hall logo" height="80">
		<hgroup>
			<h1>San Joaquin Valley Town Hall</h1>
			<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
		</hgroup>
	</header>
	<nav>
    	<ul>
    		<li><a href="../index.html">Home</a></li>
    		<li><a class="current" href="#">Speakers</a></li>
    		<li><a href="../luncheons.html">Luncheons</a></li>
    		<li><a href="../tickets.html">Tickets</a></li>
    		<li><a href="about.html">About Us</a></li>
    	</ul>
    </nav>
	<section>
		<h1>JavaScript Image Swaps</h1>
		<ul id="image_list">
            <li><img src="../images/toobin75.jpg" alt="Jeffrey Toobin"></li>
            <li><img src="../images/sorkin75.jpg" alt="Andrew Ross Sorkin"></li>
            <li><img src="../images/chua75.jpg" alt="Amy Chua"></li>
            <li><img src="../images/sampson75.jpg" alt="Scott Sampson"></li>
        </ul>
        <h2>Jeffrey Toobin</h2>               
        <p><img src="../images/toobin_court.jpg" alt=""></p>
	</section>
	<aside>
		<h1 id="speakers">Applications</h1>
		<h2>JavaScript</h2>
		<p><a href="image_swaps.html">Image Swaps</a></p>
		<p><a href="image_rollovers.html">Image Rollovers</a></p>
		<h2>jQuery</h2>
		<p><a href="carousel.html">jQuery Carousel</a></p>
		<p><a href="slideshow.html">jQuery Slide Show</a></p>
		<p><a href="accordion.html">jQuery Accordion</a></p>
		<h2>HTML5 and CSS3</h2>
		<p><a href="geolocation.html">Fonts, Geolocation, and Storage</a></p>
		<p><a href="canvas.html">Canvas</a></p>
		
	</aside>
	<footer>
		<p>&copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
	</footer>
</body>
</html>

JavaScript:

Code:

var $ = function (id) { return document.getElementById(id); }

var ImageGallery = function ( listId, imageId, captionId ) {
    var that = this;
    this.listNode = $(listId);
    this.imageNode = $(imageId);
    this.captionNode = $(captionId);

    // Validate nodes
    this.validateNode( this.listNode, "*", "List ID");
    this.validateNode( this.imageNode, "img", "Image ID");
    this.validateNode( this.captionNode, "span", "Caption ID");

    // Retrieve image links
    this.imageLinks = this.listNode.getElementsByTagName("a");
    if ( this.imageLinks.length == 0 ) {
        throw new Error("Image Gallery: List ID contains no image links.");
    }

    // Process image links
    var i, node, image;
    this.imageCache = [];
    for ( i = 0; i < this.imageLinks.length; i++ ) {
        node = this.imageLinks[i];

        // Attach event handler
        node.onclick = function (evt) {
            var link = this;
            if (!evt) evt = window.event;
            that.linkClick(evt, link);
        }

        // Preload image
        image = new Image();
        image.src = node.href;
        this.imageCache.push( image );
    }
}

ImageGallery.prototype.validateNode = function ( node, nodeName, nodeDesc ) {
    if ( ! node ) {
        throw new Error("Image Gallery: " + nodeDesc + " not found.");
    }
    if ( node.nodeType !== 1 ) {
        throw new Error("Image Gallery: " + nodeDesc +
            " is not an element node.");
    } 
    if ( nodeName != "*" && node.nodeName !== nodeName.toUpperCase() ) {
        throw new Error("Image Gallery: " + nodeDesc +
            " is not a " + nodeName.toLowerCase() + " tag.");
    }
}

ImageGallery.prototype.linkClick = function (evt, link) {
    this.imageNode.src = link.href;
    this.captionNode.firstChild.nodeValue = link.title;
    link.blur();
    
    // Cancel the default action of the event
    if ( evt.preventDefault ) {
        evt.preventDefault();
    }
    else {
        evt.returnValue = false;
    }
}

As always, any help is MUCH appreciated.

**holyhttp** · 04-25-2012 10:58 PM

<section>
<h1>JavaScript Image Swaps</h1>
<ul id="image_list">
<li><img src="../images/toobin75.jpg" alt="Jeffrey Toobin" onclick="swap_image('toobin.jpg')"></li>
<li><img src="../images/sorkin75.jpg" alt="Andrew Ross Sorkin" onclick="swap_image('sorkin.jpg')"></li>
<li><img src="../images/chua75.jpg" alt="Amy Chua" onclick="swap_image('chua.jpg')"></li>
<li><img src="../images/sampson75.jpg" alt="Scott Sampson" onclick="swap_image('sampson.jpg')"></li>
</ul>
<h2>Jeffrey Toobin</h2>
<p><img src="../images/toobin_court.jpg" alt="" name="speaker" id="speaker"></p>
</section>

============================================
Assuming toobin.jpg, sorkin.jpg, chua.jpg, sampson.jpg are the big images.

function swap_image(newimg){
document.speaker.src="../images/"+newimg;
}

**Tullamore** · 04-26-2012 11:02 AM

Ok. Do I just plug this in or do I have to edit it at all, besides changing the bigger image names? And where would I plug the Javascript portion in?

**Tullamore** · 04-26-2012 12:31 PM

Nevermind, figured it out. Thanks for the help!

Thread: Image swapping

Thread Tools

Display

Image swapping

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions