I am having trouble adding an image map to my nivo slider. Below is the code I am 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>
Honestly, I don’t think this is possible, as Nivo Slider actually breaks your image into dozens of smaller images.
Essentially Nivo leverages the same technique used for sprites, by loading the image into the page (it is, thus, cached), and then using it as the background for dozens of smaller images, with said background shifted by whatever amount is necessary to have the
div
display the desired portion of the overall image. As such, the image that you actually give to Nivo is never, itself, displayed.Because an image map cannot be applied to a
div
, directly, you will have to use some sort of client side logic to create your own map on thediv
. If this is not feasible I suggest that you contact Nivo directly, to ask if they have any ideas/solutions for you that will integrate, directly, with their plugin.Let me know if you have any more questions. Good luck! 🙂
You could use jQuery to dynamically update the mapping
Then just call that function after load and after each transition