Question

我正在使用两个彼此重叠的图像。我可以在第一张图像后面看到第二张图像的一半（即）。如何提供第二个图像的链接。然而，当我给第二个图像链接时，第一个图像的div阻止链接。第一张图片没有链接。我怎么能克服这一点。

由于

Answer 1

我为这种情况做了一件棘手的事。

请参阅本网站的首页http://www.klim.com/en-us/并在中间滚动显示“选择您的激情”。请注意，它使用对角线对齐的图像或至少显示。

我所做的是采用一个透明的PNG填充图像区域的整个尺寸，并且位于顶部绝对定位，具有更高的z索引，其他图像以任何顺序无关紧要并且可以是一系列图像分割在我的情况下。

然后，您可以在要使后方图像工作的任何配置中将单个图像映射放置到透明PNG上。在图像映射中，您可以绘制所需的任何形状，并将鼠标悬停在与其相关的事件上。就我而言，我正在使用jQuery。

这是jQuery的一个片段，并注意它处理图像映射链接就像你正常鼠标一样，因为它就像那样。

<div class="choose-passion">
    <div class="snow"></div>
    <div class="moto"></div>

    <map name="passion-map" id="passion-map">
    <area alt="" shape="poly" coords="0,22,574,22,340,320,0,320" href="/en-us/snow" />
    <area alt="" shape="poly" coords="980,22,575,22,340,321,980,321" href="/en-us/moto" />
    </map>
    <img usemap="#passion-map" style="width:980px;height:333px;" src="//s3.amazonaws.com/klimsitecontent/web/img/transparent.png" alt="" />
</div>

<script>
    $('#passion-map area:first').hover(
        function () {
            $('.choose-passion .snow').stop(true, true).hide().fadeIn('fast');
        },
        function () {
            $('.choose-passion .snow').stop(true, true).show().fadeOut('fast');
        }
    );
    $('#passion-map area:eq(1)').hover(
        function () {
            $('.choose-passion .moto').stop(true, true).hide().fadeIn('fast');
        },
        function () {
            $('.choose-passion .moto').stop(true, true).show().fadeOut('fast');
        }
    );
</script>

如何提供过度叠加图像的链接

1 个答案: