CSS image rollover onclick with multiple thumbs -
i trying accomplish mutual effect on ecommerce site have 1 main image of product , beside bunch of thumbs. when hover or click on one, changes image in main picture. however, can't find tutorial, question on or other place shows how it.
i have next code show 1 thumb , 1 picture. however, don't know how extend 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 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 suggestions.
you need utilize javascript or jquery this. explained in tutorial mentioned below using coda slider jquery plugin.
http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
and demo here,
http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
here tutorial, http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/
the basic logic behind capture click on smaller thumbnail image using javascript , alter img tag's src attribute of bigger image though can done in numerous ways! :)
css image thumbnails rollover
No comments:
Post a Comment