With CSS put one image on top of the other and the bottom on be link

mikek12004 · #1 June 30th, 2009, 01:48 PM

I want to place ontop of a picture another which is (gif with transparecy so the image below will be seen at some points) the easiest is put the image below as background but I want this image to also be link any ideas?

mikek12004 · #2 July 1st, 2009, 06:52 AM

OK found solution with this

Expand|Select|Wrap|Line Numbers

 
<style type="text/css"> 

.containerdiv { float: left; position: relative; } 

.cornerimage { position: absolute; top: 0; right: 0; } 

</style>

<a href="#">

<div class="containerdiv">

    <img border="0" src="prod_img/01136.jpg" alt="m" title="m" width="170" height="170">

    <img class="cornerimage" border="0" src="new_frame.gif" alt="m" title='m' width="172" height="172">

</div>

tharden3 · #3 July 1st, 2009, 04:04 PM

I think I can help you, but help me to clarify the issue. If I understand correctly:

-You have two images that you are layering, one on top of the other.
-The image on the bottom is supposed to be a link
-The top image has a transparent layer that is supposed to make only certain areas of the bottom link 'clickable.'

If you are trying to control the areas of the link that are clickable by the user, there is a better way to do this than layering images. It is called "Image Mapping." I can help you with it, but let me know for sure that what I described above is what you are trying to accomplish before I go into more detail.

Kind regards,
Tim

With CSS put one image on top of the other and the bottom on be link

re: With CSS put one image on top of the other and the bottom on be link

re: With CSS put one image on top of the other and the bottom on be link

/bytes/development

/bytes/it

/bytes/about