This pages demonstrates how the images in hoverpulse can be used as anchors.
Loading thumbnails...
<div id="thumbs">
<div class="thumb"><img src="images/beach1.jpg" width="64" height="64" data-link="http://google.com" /></div>
<div class="thumb"><img src="images/beach2.jpg" width="64" height="64" data-link="http://yahoo.com" /></div>
<div class="thumb"><img src="images/beach3.jpg" width="64" height="64" data-link="http://msn.com" /></div>
<div class="thumb"><img src="images/beach4.jpg" width="64" height="64" data-link="http://facebook.com" /></div>
<div class="thumb"><img src="images/beach5.jpg" width="64" height="64" data-link="http://twitter.com" /></div>
<div class="thumb"><img src="images/beach6.jpg" width="64" height="64" data-link="http://jquery.com" /></div>
<div class="thumb"><img src="images/beach7.jpg" width="64" height="64" data-link="http://sitepoint.com" /></div>
<div class="thumb"><img src="images/beach8.jpg" width="64" height="64" data-link="http://tuaw.com" /></div>
<div class="thumb"><img src="images/beach9.jpg" width="64" height="64" data-link="http://ajaxian.com" /></div>
</div>
$(document).ready(function() {
$('div.thumb img').hoverpulse().each(function() {
var $img = $(this);
var link = $img.attr('data-link');
$img.attr('title','Goto: ' + link);
$img.click(function() {
window.open(link);
return false;
});
});
});