Nivo Slider中的图片地图

Question

我在给我的nivo slider添加图像地图时遇到了问题。以下是我使用的代码，这里是网站链接。有什么建议吗？

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

- hanleyhansen

Answer 1

老实说，我认为这是不可能的，因为Nivo幻灯片实际上将您的图像分成了许多较小的图像。

基本上，Nivo利用了精灵使用的相同技术，通过将图像加载到页面中（因此被缓存），然后将其用作许多较小图像的背景，所述背景通过必要的位移量进行移动以使div显示所需的整体图像部分。因此，您实际上提供给Nivo的图像永远不会被显示。

由于无法直接将图像映射应用于div，因此您将不得不使用某种客户端逻辑在div上创建自己的地图。如果这不可行，建议您直接联系Nivo，询问他们是否有任何想法/解决方案，可以直接与其插件集成。

如果您还有任何问题，请告诉我。祝你好运！ :)

- Zachary Kniebel

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

- user828878