www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image swapping

  1. #1
    Join Date
    Apr 2012
    Posts
    47

    Question Image swapping

    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.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    <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;
    }

  3. #3
    Join Date
    Apr 2012
    Posts
    47
    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?

  4. #4
    Join Date
    Apr 2012
    Posts
    47
    Nevermind, figured it out. Thanks for the help!

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

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



Recent Articles