Nivo Slider中的圖像地圖

Question

我無法將圖像映射添加到我的nivo滑塊。以下是我正在使用的代碼，這裏是the site的鏈接。有什麼建議麼？

<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> 

Answer 1

老實說，我不認爲這是可能的，因爲Nivo Slider實際上會將您的圖像分解爲幾十個較小的圖像。

本質上，Nivo利用了與用於精靈的相同技術，通過將圖像加載到頁面（因此被高速緩存），然後將其用作幾十個較小圖像的背景，所述背景移位了任意數量有必要讓div顯示整個圖像的所需部分。因此，你實際給Nivo的圖像從來都不會顯示出來。

由於圖像映射無法直接應用於div，因此您必須使用某種客戶端邏輯在div上創建自己的映射。如果這不可行，我建議您直接聯繫Nivo，詢問他們是否有任何想法，可以直接與他們的插件集成。

讓我知道你是否還有其他問題。祝你好運！ :)

Answer 2

你可以使用jQuery動態更新映射

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); 
} 

然後，只需調用加載後和每次躍遷之後該功能

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