Question

希望有人可以提供协助，但我需要拍摄一张现有的横幅图片，该图片在图片的左侧有一个公司徽标作为图片的一部分，但整个横幅是图片。

现在我所追求的是在现有图像徽标上创建图层区域（透明/不可见）的方法，以便：

A）原始图像仍可以看到＆amp; B）当您将鼠标悬停在覆盖下方徽标的分层区域上时，我想将其超链接到指定的URL

希望这是有道理的。

我考虑过z-index但不确定如何使用它，特别是如何计算新分层图像的确切尺寸。

希望有一个工具能够计算出重叠徽标所需的四个点吗？

无论如何，希望有人可以协助

感谢。

Answer 1

我建议您只是将图片设为链接，但如果不能，则可以绝对地在其上设置链接：

.header             { position:relative; }
.header .bannerLink { position:absolute; top:0; left:0; 
                      width:100px, height:100px; display:block; }

-

<div class="header">
  <img src="banner.jpg" />
  <a href="index.php" class="bannerLink"><span>Click Me</span></a>
</div>

Answer 2

你看过图像地图吗？

http://www.w3schools.com/TAGS/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

Z-Index透明图像

2 个答案: