Question

我有一个包含内容图片的网页。在此图片上，我想突出显示一些不同的项目，由用户在同一页面上的文本中滚动相应的项目触发。

我有透明的PNG，我可以用它作为图像叠加来完成突出显示。我知道如何使用span标签（如here所述）静态显示叠加层。

但是，我不知道如何在用户滚动某些特定文本时显示特定的叠加层。为了想象我想要做什么，想象一下显示伦敦地铁地图的图像。当指针位于文本中该站的名称上时，我希望在特定站点上显示黄色突出显示。

非常感谢任何建议，示例或相关教程！

马特

Answer 1

这应该有效。只需用PNG图像标签替换SPAN即可。您可能还想使用显示块而不是内嵌显示图像。

<html><head>
    <style>
        .overlay {
            display: none;
            position: absolute;
        }
        #map {
            position: relative;
            border: 1px solid black;
            width: 350px;
            height: 200px;
        }
        #station_A { top: 20px; left: 85px }
        #station_B { top: 150px; left: 180px }
        .hover { color: green }
    </style>
</head><body>
    <div id="map">
        <span id="station_A" class="overlay">Highlight image here.</span>
        <span id="station_B" class="overlay">Highlight image here.</span>
    </div>

    <p>
        <span class="hover station_A">Station Alpha</span> is one example.
        <span class="hover station_B">Station Beta</span> is another.
    </p>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
    jQuery(function() {
        jQuery('.overlay').each(function(i, el) {
            jQuery('.' + el.id)
                .mouseenter(function() { jQuery(el).css('display', 'inline') })
                .mouseleave(function() { jQuery(el).css('display', 'none') });
        });
    });
  </script>
</body></html>

Answer 2

在您给出的示例链接中，您可以执行此类操作。

在你的CSS中

.photo {
    margin: 30px;
    position: relative;
    width: 180px;
    height: 130px;
    float: left;
}
.photo img {
    background: #fff;
    border: solid 1px #ccc;
    padding: 4px;
}
.photo span {
    width: 20px;
    height: 18px;
    display: block;
    position: absolute;
    top: 12px;
    left: 12px;
    background: url(images/digg-style.gif) no-repeat;
}

javascript使用jquery

$(document).ready(function(){
    $(".photo span").hide();  // initialize the span as hidden

            // only show the span on hover
    $("a.mapper").hover(
        function(){
            var aHash = $(this).attr("href").split("#")[1];
            $("#"+aHash).show();
        },
        function(){
            var aHash = $(this).attr("href").split("#")[1];
            $("#"+aHash).hide();
        }
    );
});

和HTML

<div class="photo">
    <a href="#">
        <span id="map1"></span>
        <img src="photo.jpg" />
    </a>
</div>

<a href="#map1" class="mapper">map1</a>

说明：

在您的HTML标记中，将id放入要显示的每个范围并在悬停时隐藏
在您的文字链接中放置一个哈希链接，该链接对应于您想要在悬停时显示的ID。
使用jquery悬停功能显示和隐藏跨度覆盖。

如何在图像上叠加透明PNG /滚动其他项目/

2 个答案:

说明：