Image Map in Nivo Slider

Posted: April 21, 2014 in JavaScript, jQuery
Tags: , ,

You could use jQuery to dynamically update the mapping

function drawMap() {
 // remove image overlays used during transition
 $('.nivo-slice, .nivo-box').remove();
 var current_title = $('.nivoSlider').data('nivo:vars').currentImage.attr('title'); 
// set usemap attribute for current image
 $('.nivo-main-image').attr("useMap", current_title + "_map"); }

 

Then just call that function after load and after each transition

$('.nivoSlider').nivoSlider({
 // slider config
 afterLoad: drawMap,
 afterChange: drawMap
));
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s