CSS image rollover onclick with multiple thumbs

Question

I am trying to achieve a very common effect on ecommerce site where you have one main picture of a product and beside it a bunch of thumbs. When you hover or click on one, it changes the image in the main picture. However, I can't find a tutorial, question on SO or other place that shows how to do it.

I have the following code to show one thumb and one picture. However, I don't know how to extend this to multiple thumbs.

HTML:

<tr>
    <td colspan=2>
        <p align="center">  <a class="rollover" href="detail.php">
            <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" name="pic" border="0"/>
            <span><img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"/></span>
</a> 
        </p>
    </td>
</tr>
<tr>
    <td>Here is text</td>
</tr>

CSS:

a.rollover {
    display: block;
    position: relative;
}
a.rollover span {
    position: absolute;
    left: -10000px;
}
a.rollover:hover span {
    position: absolute;
    left: 200px;
}

Thanks for any suggestions.

score 2 · Accepted Answer · answered Feb 13 '13 at 03:32

2

you need to use javascript or jQuery to do this. Its easily explained in the tutorial mentioned below using a coda slider jQuery plugin.

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

and the demo here,

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

Here is another good tutorial, http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

The basic logic behind this is to capture the click on the smaller thumbnail image using javascript and change the img tag's src attribute of the bigger image though it can be done in numerous ways! :)

answered Feb 13 '13 at 03:32

Sandeep Raju Prabhakar

18,652
8
35
44

That's an awesome slider but I really just need a swap main image on hover or click. Is javascript still needed for that? – user1904273 Feb 13 '13 at 03:40
you can do it with css but its tricky and all your images need to be loaded to the DOM already to do this in pure CSS which is not recommended.. in javascript its too simple and efficient... – Sandeep Raju Prabhakar Feb 13 '13 at 03:44
basically if you want to do it in pure CSS, you need explore on the css property, `display : none;` to hide the image and `display : block/inline;` to make it visible.. thats the basic underlying logic. – Sandeep Raju Prabhakar Feb 13 '13 at 03:45
I don't have jquery. Would consider JS but the tutorials above are a bit more involved than I'm probably up for. Using code above, I can replace thumbnails with background images. I just can't make images display in same pane on page. Guess I could populate div using javascript with getelementbyid following onclick or mouseover event. Can you change src with getelementbyid.value? or something? – user1904273 Feb 13 '13 at 03:59
yes you can do that, lets consider an example, `` now, you can access this as, `document.getElementById("flower").src = "some/other/img/here2.jpg"` – Sandeep Raju Prabhakar Feb 13 '13 at 04:47
this thread on SOF can give you some leads, http://stackoverflow.com/questions/11722400/javascript-change-img-src – Sandeep Raju Prabhakar Feb 13 '13 at 04:49
Thanks, One last question. Can you use an id or class in css to set an absolute position on the page for the big pic. I notice that craigslist does the following .

Somehow when you click on link, it puts the target large pic in the c1 div on the page, rather than just loading the large pic in the browser. – user1904273 Feb 13 '13 at 13:24
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24446/discussion-between-sandeepraju-and-user1904273) – Sandeep Raju Prabhakar Feb 13 '13 at 13:27

score 1 · Answer 2 · answered Feb 13 '13 at 03:34

I would suggest you use the jQuery addClass function. What you basically need to do is to apply the rollover CSS class to the hovered element and then remove it when the mouse leaves said element, as such:

$(img).hover(function(){
$(this).addClass(rollover);
}, function(){
$(this).removeClass(rollover);
});

CSS image rollover onclick with multiple thumbs

2 Answers2