Invisable image as link

I am thinking about using an invisable(transparant .png) image to overlap some parts of a html page, stretching it over a cirtain area and using it as a link. Is this possible?

or does this cause bugs?

If possible and without bugs: Can I give it a mouseover hover effect aswell (using another png)?

Sorry if I make it all sound more complex as it is.
Ill rephrase myself if needed.

Hi,

You said for a HTML page, right ?
Should be possible.
Are you using header and page footer ?

Explaination to first part:
Ok so: I have currently an image which is located allready over another image and I wanted to place another invisable (1*1px).png image over it and stretch it over an area(lets say: 315*600px) also located at the very same spot. adding to that I want to use the same thing but as a mouseover.
So the total image count which overlaps eachother at the very same spot is 4.

Answer to second question: Yeps I think I can use all.

Hello...

I'm sorry, I don't really understand everything... You want to 4 images to get over each other ?

Try to create divs :

<div class="something" style="width: auto;">CONTENT</div>

For exemple :

<div class="first" style="width: auto;"><div class="second" style="width: auto;"><div class="third" style="width: auto;"><a href="url"><img src="https://2img.net/i/fa/empty.gif" class="fourth" /></a></div></div></div>

To choice your images, put this in the CSS :

.first {background: transparent url('image1') no-repeat center;}
.second {background: transparent url('image2') no-repeat center;}
.third {background: transparent url('image3') no-repeat center;}
.fourth {background: transparent url('image1') no-repeat center; width: Xpx; height: Ypx;}

The image4 will be over the image3, over the image2, over the image1.
X is the width of the image4, and Y is the height.

And to change the images when you hover them :

.first:hover {background: transparent url('image1') no-repeat center;}
.second:hover {background: transparent url('image2') no-repeat center;}
.third:hover {background: transparent url('image3') no-repeat center;}
.fourth:hover {background: transparent url('image1') no-repeat center; width: Xpx; height: Ypx;}

I'll explain it a bit more clearly since I make no sense(once again xD)

Pictures do better:



This image functions as a link (I forgot to add this)
I noticed that image 4 made no sense and there was no need for it so i got rid of it
I hope it makes perfect sense now.

Once again some things might sound obvious but please dont take it as an offence.

Hum... Let's begin with this (without the hover)
The HTML code :

<div class="first" style="width: auto;"><div class="second" style="width: auto;"><a href="url"><img src="https://2img.net/i/fa/empty.gif" class="fourth" /></a></div></div></div>

In your CSS :

.first {background: transparent url('gradiant_image_url') repeat-x top center;}
.second {background: transparent url('tank_image_url') no-repeat topcenter;}
.fourth {background: width: WIDTHpx; height: HEIGHTpx;}