Image Map in Nivo Slider

3 Views

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>
Post Views: 3

Related posts

Leave a Reply

2 comments

  1. 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 the div. 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! 🙂

  2. You could use jQuery to dynamically update the mapping

    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 that function after load and after each transition

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