Hi I wonder if you can give me a hand with this please. I have an html page: HTML Code: <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <div> <p>This paragraph is the default</p> <p class="hide_paragraph">This paragraph comes in with image 1</p> <p class="hide_paragraph">This paragraph comes in with image 2</p> <p class="hide_paragraph">This paragraph comes in with image 3</p> </div> <div class = "big_image"> <img src="placeholder.jpg" alt="" class="show_image"> <img src="test1.jpg" alt="" class="hide_image"> <img src="test2.jpg" alt="" class="hide_image"> <img src="test3.jpg" alt="" class="hide_image"> </div> <div class="thumb_box"> <ul class="thumb_images"> <li><a href="#"><img src="test1_thumb.jpg" alt="">Thumb1</a></li> <li><a href="#"><img src="test2_thumb.jpg" alt="">Thumb2</a></li> <li><a href="#"><img src="test3_thumb.jpg" alt="">Thumb3</a></li> </ul> </div> </body> </html> HTML: CSS: HTML Code: .big_image{ border:1px solid red; width:700px; height:525px; margin:0 auto; } .thumb_images{ list-style:none; } .thumb_images li{ float:left; padding:15px; } .thumb_images li img{ display:block; } body{ background-color:pink; } .thumb_images li a img{ border-style:none; } .thumb_images li a{ text-decoration:none; } .thumb_images li a:hover{ color:red; text-decoration:underline; } .hide_image{ display:none; } .show_image{ display:block; } .hide_paragraph{ display:none; } .show_paragraph{ display:block;S } HTML: and part of the script I am trying to develop: Code: var pic1 = new Image(); pic1.src = "test1.jpg"; var pic2 = new Image(); pic2.src = "test2.jpg"; var.pic3 = new Image(); pic3.src = "test3.jpg"; $(document).ready(function(){ $("thumb_images li a").click(function(){ $("big_image.show_image").fadeOut(1000, function(){ ($this).removeClass("show_image").addClass("hide_image"); }); }); }); Code (markup): I am not entirely sure how to proceed though. I have preloaded the images and what I need to do is when I click on a thumbnail the image in the big div will change to reflect the thumb I clicked on. The same should happen to the paragraphs that are at the moment hidden. SO, to summarize: when I land on the page there is a default paragraph and a default image: when I click on the thumbnail both the big image and the paragraph will be removed and replaced by the big image and the paragraph that goes with it. I was thinking to first remove the class of hidden and replace it with the visible one, as per css. Sorry not quite sure how to proceed: http://antobbo.webspace.virginmedia....mages/test.htm So any suggestion please? at the end of the day it doesn't matter if I use javascript or jayquery, I mean even a script like this would do: var pic1 = new Image(); pic1.src = "test1.jpg"; var pic2 = new Image(); pic2.src = "test2.jpg"; var pic3 = new Image(); pic3.src = "test3.jpg"; function changeImage(){ var theImage = document.getElementById("placeholder_image"); theImage.src = pic1.src; } which works ok but I can only change one image... thanks
I recommend using the document.getElementById() method. What do you mean you can only change one image? Give each image tag its own id then you can pass the id and the appropriate new image: function(id, image) { document.getElementById(id).src = image.src; } Code (markup): If you need to retrieve the id of an unknown element you can use the this object. Something like: var curElementId = this.id; Code (markup):