/ Published in: jQuery
Originally from Webdesignerwall (see src)
Hover thumbnails of images and see the big holder image being swapped.
Hover thumbnails of images and see the big holder image being swapped.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
//http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ $().ready(function() { $(".thumbs a").hover(function(){ var normalPath = $(this).attr("href"); //link on thumb var normalAlt = $(this).attr("title"); //alt on thumb $("#normalImg").attr({ src: normalPath, alt: normalAlt });//swap src of the normal sized image with url from href of the thumbnail $("#normalImg").parent().attr({ href: normalPath, alt: normalAlt });////swap href of the normal sized image with url from href of the thumbnail }); }); --- <div class="holder"> <a href="../images/photos/batisse-01.jpg"><img id="normalImg" src="../images/photos/batisse-01.jpg" alt="photo batiment" /></a> </div> <ul class="thumbs"> <li><a href="../images/photos/batisse-01.jpg"> <img src="../images/photos/batisse-01_thumb.jpg" alt="thumb" /> </a></li> <li><a href="../images/photos/batisse-02.jpg"> <img src="../images/photos/batisse-02_thumb.jpg" alt="thumb" /> </a></li> <li><a href="../images/photos/batisse-03.jpg"> <img src="../images/photos/batisse-03_thumb.jpg" alt="thumb" /> </a></li> </ul>
URL: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/