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
    541
    <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 1 users browsing this thread. (0 members and 1 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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.32552 seconds
  • Memory Usage 2,886KB
  • Queries Executed 13 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_code
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates