tags:

views:

46

answers:

1

I am new to html especially to jquery but I want to show hide a photo on click. I pulled some sample code which is exactly what I want. I did not write this code and I am wanting to modify the code for an image versus a div. The code is noted below.

I have tried this several different ways and the My goal:
1. To hide an image versus a div tag

Any help would be wonderful

<!DOCTYPE html> 
<html>
<head>
  <style>
  div { background:#def3ca; margin:3px; width:80px; 
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
</head>
<body>

  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello 3,</div>

  <div>how</div>
  <div>are</div>
  <div>you?</div>
<script>
$("#showr").click(function () {
  $("div:eq(0)").show("fast", function () {
    /* use callee so don't have to name the function */
    $(this).next("div").show("fast", arguments.callee);
  });
});
$("#hidr").click(function () {
  $("div").hide(2000);
});

</script>
</body>
</html>

<button id="showr">Show</button>
<button id="hidr">Hide</button>

<div id="div">Test</div>

+1  A: 

For images, just change the div to img (or stick your images in the divs and change nothing in the script, whatever floats your boat), like this:

$("#showr").click(function () {
  $("img:eq(0)").show("fast", function () {
    $(this).next("img").show("fast", arguments.callee);
  });
});
$("#hidr").click(function () {
  $("img").hide(2000);
});

The div parts of the script were saying "match <div> tags", since you want <img> tags, you can just swap it out like above. Also, I'm guessing this was taken from something else/larger, in that case you can probably remove the , arguments.callee part, but I'm not 100% sure, depends on what it was supposed to do.

Nick Craver
Thanks, What if have 4 images and I want to make it class how would it look?
Michael
@Michael - In that case change `img` to `img.myClass`, this would match `<img class="myClass">` elements. There's a good intro worth the time to read on selectors here as well if you have a few minutes :) http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Find_me:_Using_selectors_and_events
Nick Craver
@ Nick - kind of like this? <a href="auction/auction1.shtml"><img class="myClass" ref="auction/auction1.shtml"><img src="Gibson_LesPaul.jpg" width="200" height="200" alt="LesPaul" />
Michael
@Michael - do you just want to swap those 2 images inside the `<a>` when clicked, or on hover or...?
Nick Craver
@ Nick - Actually I will have buttons under each image.image 1show hideimage 2show hide
Michael
@Michael - If you can update the question with the markup you're after (I'd wrap the image and both buttons in a div or something) I can show you what the jQuery side would look like.
Nick Craver