Z-Index прозрачное изображение

Question

Надеюсь, что кто-то может помочь, но мне нужно взять существующее изображение баннера, в котором часть изображения имеет логотип компании с левой стороны изображения, но весь баннер - это изображение.

Теперь, что мне нужно, это средство создания области слоя (прозрачной / невидимой) поверх существующего логотипа изображения, так что:

А) оригинальное изображение все еще можно увидеть и B) когда вы наводите курсор на многослойную область, покрывающую логотип внизу, я хочу сделать гиперссылку на указанный URL-адрес

Надеюсь, это имеет смысл.

Я думал о z-index, но не уверен, как его использовать и особенно, как рассчитать точные размеры моего нового многослойного изображения.

Хотели бы вы, чтобы был инструмент, который бы вычислял четыре точки, необходимые для наложения на логотип?

В любом случае, надеюсь, кто-то может помочь

Спасибо.

Answer 1

Вы смотрели на карту изображений?

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>

Answer 2

Я бы посоветовал вам сделать изображение ссылкой, но если вы не можете, вы можете разместить ссылку поверх него:

.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>