How can I change the <a href"" onclick of another Image with Jquery?

I have a script to change the img src displayed in a div (main_view) when the image in another div (gallery) is clicked:

JS

//Swap Image on Click
   $("ul.thumb li a").click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $("#main_view img").attr({ src: mainImage });
    return false;
   });

HTML

<div id="gallery">
  <ul class="thumb">
    <l开发者_如何学Ci><a href="images/childrentxt.png"><img src="images/buttons/kids.png"
         title="children.htm" /></a></li>
    <li><a href="images/martialartstxt.png"><img src="images/buttons/dee.png"
         title="mma.htm" /></a></li>   
    <li><a href="images/cardiotxt.png"><img src="images/buttons/cardio.png"
         title="fitness.htm" /></a></li>
    <li><a href="images/combattxt.png"><img src="images/buttons/tristan.png"
         title="combat.htm" /></a></li>
  </ul>
</div>

<div id="main_view">
    <a href="fitness.htm" title="Mixed Martial Arts" target="_self">
    <img src="images/maintxt.png" alt="" /></a>
</div>

I would then like to allow the user to click the image displayed in the main_view div to navigate to the page associated with that image.

I'm new to jquery and js and have not been successful in writing script to do this.

Currently the "main_view's img src" is found in the "gallery's a href". I've been trying to use the "gallery img title" to store the value to be used to update the "main_view a href" onclick. Can someone please HELP me??

Thanks, Tracey

 $("ul.thumb li a").click(function() {
    $("#main_view img").attr('src', $(this).attr("href"));
    return false;
   }); 

or get rid of the a href altogether and tie the click to the image

 $("ul.thumb li img").click(function() {
    $("#main_view img").attr('src', $(this).attr("title"));
    return false;
   }); 

First, I wouldn't recommend using the title attribute to store the href. Title is meant for something else. Instead, a better attribute would be rel.

So, here's how I would do it. I would change the title attribute to rel and then add a title attribute with the image title.

<div id="gallery">
  <ul class="thumb">
    <li><a href="images/childrentxt.png"><img src="images/buttons/kids.png"
         rel="children.htm" title="Name of image 1" /></a></li>
    <li><a href="images/martialartstxt.png"><img src="images/buttons/dee.png"
         rel="mma.htm" title="Name of image 2" /></a></li>   
    <li><a href="images/cardiotxt.png"><img src="images/buttons/cardio.png"
         rel="fitness.htm" title="Name of image 3" /></a></li>
    <li><a href="images/combattxt.png"><img src="images/buttons/tristan.png"
         rel="combat.htm" title="Name of image 4" /></a></li>
  </ul>
</div>

<div id="main_view">
    <a href="fitness.htm" title="Mixed Martial Arts" target="_self">
    <img src="images/maintxt.png" alt="" /></a>
</div>

And now the JS:

$("ul.thumb li a").click(function() {
    var mainImage = $(this).attr("href"); // Find Image URL
    var imgLink = $(this).children('img').attr('rel'); // Find the image link in rel
    var imgTitle = $(this).children('img').attr('title'); // Find the image title
    $("#main_view").html('<a href="' + imgLink + '" title="' + imgTitle + '" target="_self"><img src="' + mainImage + '" alt="" /></a>');
    return false;
});

So, instead of just changing the img src, I just populate the entire #main_view div. I've also grabbed the image title from the image tag.

I haven't tested this, but it should work.