Image Maps

Working with attaching events to image maps. Uses Kate Upton

by Brian Duffey

HTML

<img src="http://i.cdn.turner.com/si/2011_swimsuit/images/frontContent/splash/kate-upton.jpg" style="max-width:400px;" usemap="#test" />
<map name="test" id="test">
    <area id="test1" shape="rect" coords="0,0,100,100" href="#">
</map>
<img src="http://www.playerwives.com/wp-content/uploads/2011/12/si21.jpg" style="max-width:200px; display:none;" id="test2" />

JavaScript

// Runs when the DOM has been loaded
jQuery(function(){
    // Check if map exists
    if(jQuery('#test')) {
        // Loop through each AREA in the imagemap
        jQuery('#test area').each(function() {
    
            // Assigning an action to the mouseover event
            jQuery(this).mouseover(function(e) {
                jQuery('#test2').show();
            });
            
            // Assigning an action to the mouseout event
            jQuery(this).mouseout(function(e) {
                jQuery('#test2').hide();
            });
            
            // Assigning an action to the click event
            jQuery(this).click(function(e) {
                e.preventDefault();
                alert('You clicked on Kate Upton');
            });
        
        });
    }
});