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

Question

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

Mat*_*umi 3 html jquery css3

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

我有透明的PNG,我可以用它作为图像叠加来完成突出显示.我知道如何使叠加使用span标签出现静(如解释在这里).

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

任何建议,示例或相关的教程将不胜感激!

马特

Answer 1

Mar*_*ich 5

这应该工作.只需用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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，2 月前
查看次数：	9156 次
最近记录：	15 年，2 月前