CODEWITHSUNDEEP
jquerycssimagehover
David Horton
David Horton

Reputation: 47

Image Swap by thumbnail hover?

http://visually-minded.com/portfolio-project.php

On the above link when the user hovers over any thumbnail the main image will be swapped. Would anyone be able to point me in the right direction for a tutorial for this?

Upvotes: 3

Views: 3950

Answers (5)

mpapis
mpapis

Reputation: 53178

with html:

<img id="target" src="full_img_name1"/>
<a href="full_img_name1"><img src="thumb1"/></a>
<a href="full_img_name2"><img src="thumb2"/></a>
<a href="full_img_name3"><img src="thumb3"/></a>

and a script:

$("a img").hover(function(){
  var img = $(this).closest('a').attr('href');
  $('#target').show().attr('src',img);
},function(){
  $('#target').hide().attr('src','');
});

Upvotes: 3

Kyle
Kyle

Reputation: 67234

in jQuery you can do this:

$(function() {
$('#myImage-hover').hover(function() {
    $('#myImage').attr("src","path-to-file/img.png");}, function() {
    $('#myImage').attr("src","path-to-file/img_2.png");

    });
 });

As exampled here in jsFiddle.

Upvotes: 0

tbleckert
tbleckert

Reputation: 3801

$(element).hover(
    function () { $(this).data('original', $(this).attr('src')).attr('src', newsrc),
    function () { $(this).attr('src', $(this).data('original')
);

I don't know how you define the new source for the image but this is pretty much the way to go. In addition you probably want to use each() on every image and inside define the 'newsrc'.

Upvotes: 0

Sibo Lin
Sibo Lin

Reputation: 339

Here is a dead simple CSS-only implementation if you are not comfortable with javascript:

http://www.cssplay.co.uk/menu/gallery4.html

Upvotes: 0

SCBoy
SCBoy

Reputation: 545

Here it is used with on click.

http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails

just over looked the code. But should be something like what you are searching

Upvotes: 0

Related Questions