Geek Answers Handbook

Image Map in Nivo Slider

I am having problems adding an image map to my nivo slider. Below is the code I'm using, and here is the link to the site . Any suggestions?

<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="wp-content/themes/sourcetone/images/1-difference.png" data-thumb="wp-content/themes/sourcetone/images/1-difference.png" alt="" /> <img src="wp-content/themes/sourcetone/images/2-mood.png" data-thumb="wp-content/themes/sourcetone/images/2-mood.png" alt="" usemap="#mood" /> <img src="wp-content/themes/sourcetone/images/3-activity.png" data-thumb="wp-content/themes/sourcetone/images/3-activity.png" alt="" usemap="#activity" /> <img src="wp-content/themes/sourcetone/images/4-health.png" data-thumb="wp-content/themes/sourcetone/images/4-health.png" alt="" usemap="#health" /> <img src="wp-content/themes/sourcetone/images/5-buy.png" data-thumb="wp-content/themes/sourcetone/images/5-buy.png" alt="" usemap="#buy" /> </div> <map name="mood" id="mood"><area shape="rect" coords="10,453,162,482" href="/products/our-products/more-info/" alt="" /><area shape="rect" coords="10,400,162,445" href="google play" alt="" /></map> <map name="activity"><area shape="rect" coords="929,449,1081,478" href="/products/our-products/more-info/" alt="" /><area shape="rect" coords="929,398,1081,443" href="google play" alt="" /></map> <map name="health"><area shape="rect" coords="11,449,163,478" href="/products/our-products/more-info/" alt="" /><area shape="rect" coords="11,396,163,441" href="google play" alt="" /></map> <map name="buy"><area shape="rect" coords="563,251,790,314" href="/products/our-products/more-info/" alt="" /><area shape="rect" coords="563,333,790,375" href="google play" alt="" /></map> </div> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' animSpeed: 800, // Slide transition speed pauseTime: 5000, // How long each slide will show lastSlide: function(){}, // Triggers when last slide is shown }); }); </script>
+4
source share
2 answers

Honestly, I don’t think it’s possible, since the Nivo Slider actually splits your image into dozens of smaller images.

In fact, Nivo uses the same method that is used for sprites, loading the image on the page (it is thus cached), and then using it as a background for dozens of smaller images, and the specified background is shifted by any amount, so that div displayed the desired part of the overall image. That way, the image you actually give to Nivo never displays itself.

Since the image map cannot be applied to the div , you will need to use some client-side logic to create your own div map. If this is not possible, I suggest you contact Nivo directly to ask if they have any ideas / solutions for you that will be integrated directly with their plugin.

Let me know if you have more questions. Good luck! :)

+2
source

You can use jQuery to dynamically update the display

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

Then just call this function after loading and after each transition

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

More articles:


All Articles