javascript swap image & swap links

Posted on 2009-12-30
Last Modified: 2012-05-08
I am using swapimage jquery code ( to swap out a number of images when a corresponding button is clicked. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="" xml:lang="en" lang="en">
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" type="text/css" href="css/style.css" />
            <script type="text/javascript" src="js/scripts.js"></script>
            <!-- jQuery scripts for Home page theater -->
            <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
      <script type="text/javascript" src="js/jquery.metadata.min.js"></script>
      <script type="text/javascript" src="js/jquery.swapimage.min.js"></script>
            <script type="text/javascript">
                  $.swapImage(".swapImageClick", true, true, "click");
                  $.swapImage(".swapImageDoubleClick", true, true, "dblclick");
                  $.swapImage(".swapImageSingleClick", true, true, "click");
                  <div id="theater_wrap">
                        <div id="theater_main">
                              <div style="width:386px;">
                                    <a href=""><img id="main" src="images/theater-plan.jpg" id="main" alt="" width="386" height="288" /></a>
                        <div id="theater_nav">
                              <a href=""><img src="images/tag-plan.gif" id="tag" alt="" class="tag" width="541" height="213" /></a>
                              <div><img class="swapImageSingleClick { sin: ['#main:images/theater-honest.jpg','#tag:images/tag-honest.gif','#btn1:images/theater_btn1_on.gif'] }" src="images/theater_btn1_off.gif" id="btn1" alt="" />
                              <img class="swapImageSingleClick { sin: ['#main:images/theater-control.jpg','#tag:images/tag-control.gif','#btn2:images/theater_btn2_on.gif'] }" src="images/theater_btn2_off.gif" id="btn2" alt="" />
                              <img class="swapImageSingleClick { sin: ['#main:images/theater-plan.jpg','#tag:images/tag-plan.gif','#btn3:images/theater_btn3_on.gif'] }" src="images/theater_btn3_off.gif" id="btn3" alt="" />
                              <img class="swapImageSingleClick { sin: ['#main:images/theater-solutions.jpg','#tag:images/tag-solutions.gif','#btn4:images/theater_btn4_on.gif'] }" src="images/theater_btn4_off.gif" id="btn4" alt="" /></div>

That part is working fine, but I also need to swap the link URLs that surround the #main image and #tag image onClick but am unsure of how to do that.

Related jscripts are here:
Question by:tekgrl
    LVL 51

    Expert Comment

    what does "swap the link URLs" mean?

    Author Comment

    Swap the <a href> around the images.
    LVL 51

    Expert Comment

    those <a href=""> does not do anything just adding a pointer cursor (I guess, unless the library used here is adding something at run time)

    or did you remove the href on purpose? just I could not get the issue here...

    Author Comment

    I left them blank because the link points to different places based on what image is loaded. <a href="page1.html>, <a href="page2.html>, <a href="page3.html>, etc.
    LVL 51

    Accepted Solution

    ok, you can do this...

    on the link, there is a full swap code, here
    use this

    modify the links to similar to this:

    <a href="page1.htm" href2="page1_alt.htm">...

    then  modify jQuery.swapImage.swap with this & add a new function to swap links

    jQuery.swapImage.swap = function() {
    		var data = jQuery(this).metadata();
    		var tmp = data.src;
    		data.src = this.src;
    		this.src = tmp;
    function swapLinks(img){
      var a = img.parentNode;
      var tmphref = a.href;
      a.href = a.href2;
      a.href2 = tmphref;

    Open in new window


    Author Comment

    That didn't work. I've attached my code.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    In this tutorial I will show you how to provide a dynamic RTF document on your website generated with data from your database. For this tutorial you will need Microsoft Word or WordPad, WhizBase and Microsoft Access. In this tutorial I will show …
    Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now