Z-index 透明圖像

Question

我需要采用現有的橫幅圖像，作為圖像的一部分，圖像左側有一個公司徽標，但整個橫幅是一個圖像。

現在我所追求的是一種在現有圖像徽標上創建圖層區域（透明/不可見）的方法，以便：

1. 仍然可以看到原始圖像 &
2. 當您將鼠標懸停在覆蓋下方徽標的分層區域上時，我想將其超鏈接到指定的 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>