This pages demonstrates how the images in hoverpulse can be used as anchors.

Loading thumbnails...

Markup


        <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>
        

Script


$(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;
    	});
    });
});