Make a transparent div?

[daGUY]

Hmm…this is an interesting dilemma I have, and I’m not even sure if CSS is capable of this, so I thought I would ask here. This might seem a little complicated, but let me try to explain and please bear with me :)

I have a page composed of one big graphic, which is chopped up into pieces and assembled back together in a table. So it looks like one image, but it’s really a bunch of smaller ones. The reason for this is that each piece is a link, and I want each piece to highlight (it’s actually just a change in opacity) when you mouseover it. So far so good. Here’s the code:

HTML:

Code:

CSS:

Code:

a:hover img.edit {
filter: alpha(opacity=70); /* opacity for IE */
opacity: 0.7;
}

Now, here’s where it gets tricky. I have to lay other graphics on top of the base image, so I created a bunch of PNGs and set them as background images on empty divs with absolute positioning to put them in the correct spots. If that sounds confusing, here’s the code:

HTML:

Code:

 

 

 

CSS:

Code:

#png1, #png2, #png3 {
background-repeat: no-repeat;
behavior: url(‘js/iepngfix.htc’); /* adds PNG transparency for IE */
cursor: pointer;
height: 32px;
position: absolute;
width: 32px;
}

#png1 {background-image: url(‘../images/image1.png’);}
#png2 {background-image: url(‘../images/image2.png’);}
#png3 {background-image: url(‘../images/image3.png’);}

#png1 {left: 100px; top: 100px;}
#png2 {left: 200px; top: 200px;}
#png3 {left: 300px; top: 300px;}

This is the problem – when you point at one of these divs (#png1, for example), I want the piece of the base image behind it to highlight, as if #png1 weren’t there.

The "easy" solution would be to take image1.png, etc. and just make it part of the base image, but I didn’t want to resort to that because I’m going to need to change and reposition them frequently. Without having separate images like this, I’d have to recreate the whole base all over again every time I needed to change something.

Anyways, I assumed this would work because the div itself is empty, but apparently it doesn’t matter. Is it possible to do this?

[Author]

Posts