Z-Index Transaparent Image

Question

Hi,

Hoping someone can assist but I need to take an existing banner image that has, as part of the image, a company logo at the left hand side of the image, but the whole banner is an image.

Now what I am after, is a means of creating a layer region (transparent/invisible) over the existing image logo, so that:

A) the orginal image can still be seen & B) when you hover over the layered region covering the logo underneath, I want to hyperlink this to a specified URL

Hope this makes sense.

I have thought about z-index but unsure how to use this and especially how to calculate the exact dimensions of my new layered image.

Wish there was a tool that would calculate the four points required to overlap over logo?

Anyways, hope someone can assist

Thanks.

Answer 1

I would suggest you just make the image a link, but if you can't, you can absolutely-position a link over it:

.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

Have you looked at an Image Map?

http://www.w3schools.com/TAGS/tag%5Fmap.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>