Is there no support to click through transparent portions of images on a page? I'm speaking for images like GIF or 8bit PNG with transparency as well as 32bit PNG with regards to the 0-valued alpha regions.

Take a look at this page in progress: http://derekstag.com

Note, this page is not fully compatible with IE on Windows right now (I had to break it to test something) but that's not the issue at hand here.

The first example of what I'm talking about is the tie on the left. It's a giant rectangle but obviously has transparent areas (I've had to save it as an 8bit PNG to keep the size down). If you click in any of those transparent areas the clicks still register on the tie image (div in this case). Using the CSS Z property you can position the image within a hierarchy which affects both its visibility as well as clickability. Nothing I have tried prevents the whole rectangle from being the click region.

Anyway, you can't actually do anything by clicking on the tie or anything behind it right now, so the better example is next...

The functional example is on the right - the BUY TICKET button which currently features a fuchsia outline and is a working link. If you move your pointer over its top half (where the ribbon from the garter overlaps) you will see that the click is going to the garter image and not the button under it.

The other thing you will notice is that you can also click in the corners of the button's rect.

I can probably solve the button's region with an image map instead of making the whole image "hot" but what about the garter overlap? Sure, I can add a piece of the garter to the button image, but that seems really cheap. It also means I can't re-use that button image or move it around.

Any ideas? I haven't been able to turn up anything on this subject searching the net, but it's likely because my search terms are too broad or too specific.

Maybe you could put a completely transparent image which is actually the button on the top layer?

That's a good idea and will work to solve the clickability in the case of the ribbon over the button. So I'll use it.

But it won't solve the fact that the link area is still square on a round button. Are image maps the only way around this one?

If you don't want to use an image map, then you could theoretically do one giant image that you then slice up manually (and put it into a table in the HTML) and approximating the overall shapes. I used the product "Coffee Cup Image Slicer" to do this trick.

An example of a place where I did this is on the RioCar Button Guide, it's most obvious on the image of the faceplate, where I had to make links for the various sections of each button.

Is your opposition to imagemaps based on anything beyond the notion that the transparent area shouldn't be clickable? I mean, do you have some moral dilemma about using imagemaps or something?

If so, here's some absurdity about circular links.

No objection to image maps other than the pain in the arse it is to cut out complex shapes. The circle should be easy though.

Tony, I'm not using any tables, the site is pure XHTML and CSS. This page went up in no time at all but it's let me play around with a number of things that would now let me also convert my corporate site to a table-less design. If only that wasn't a huge complex headache to do.

Anyway, I was just hoping that the masked out area of an image would not be clickable (like in Mac OS' icons for instance - they're all square, but you can only click on pixel data that isn't 100% transparent).

I found an old, old thread about it, and it looks like the W3C considered it and decided that making a special case for 100% transparency was not the right thing to do. It's hard to argue, really. Should an image that is 99% (FE%? FE per FF? FE/FF?) transparent be clickable or not? It's not really any more visible. Perhaps it should only pass the click 99% of the time. Or only accept 1% of the click, merging the two links together in some mutant hybrid web page.

SVG has the ability to list parts of itself clickable and others not, but we both know the issues there. Too bad there's not a way to inherently tie an imagemap and an image together.

I've never tried doing anything other than saving simple slices in any Adobe apps. They mostly suck for anything web-related and right now I'm pretty much using Illustrator since it's much better than Photoshop for web graphics.

Anyway, the issue right now is that I can't seem to change the z-value of the image map. Well, I've been able to do it one way, but then it became a plain rect and lost its circular region. Odd.

Here's my CSS for the non-map case (using a plain anchor):
Code:

---

#buyticket, #buyticket a, #buyticket img { position: relative; top: 60px; left: 520px;
 width: 125px; height: 124px; margin-bottom: -124px; display: block; }
#buyticket a, #buyticket img { position: absolute; top: 0; left: 0; z-index: 10; }
#buyticket a { z-index: 30;}

---

And the HTML:
Code:

---

<div id="buyticket" >
	<a title="Buy your ticket online" href="/test.html"></a>
	<img src="images/btn_buyticket.png" width="125" height="124" />
</div>

---

HTML with an image map instead:
Code:

---

<div id="buyticket" >
	<a title="Buy your ticket online" href="/test.html"></a>
	<img src="images/btn_buyticket.png" width="125" height="124" usemap="#buyticketc233080f" />
	<map name="buyticketc233080f"><area shape="circle" coords="62,62,62" href="/test.html" /></map>
</div>

---

For now I've left it as a normal link since I still have to create the PayPal button to see what additional crap I may have to deal with.

I'd say it works fine how it is. But if you really want the hotspot to be rounded and you want it to be pure CSS and you don't mind spending a ton of time on it, try Stu Nicholls' solution for an irregular image map.

So basically he sliced the image into a bunch of 1px wide images.

Like I said, it's a huge pain. In this situation, you could slice the image into a main center square section, some smaller "outer" squares (those that fall outside the center square section), and the border pixels.

In my opinion, having a square hotspot is not the end of the world and transforming it into a circular hotspot is definitely not worth the hassle.

It's absolutely not worth the hassle to me to perform slicing kludges. It should just work the way I mentioned regarding icons with transparency. It's more important now than ever with layered style sheets.

Today I'm left fixing some incompatibilities with IE for both this Stag site as well as my own site. A couple of issues I've found were entirely my fault (not specifying image sizes while working with PNGHack causes them to disappear in IE). But I've found some that have obviously come up since the last time I did any serious testing with IE.

The "feel" is implied. If I'm going to be Bitt about it, the "mentioned" part didn't need to be altered since it was in reference to something I actually did mention. I'd actually prefer an option to enable this feature so as to preserve current compatibility. A "click-through mask" option that could be set on images.

Now, where can I contract someone to write a worm to systematically delete every copy of Internet Explorer on every PC in the world over a 30 day time span? Maybe write it as a trojan, containing a copy of Firefox to replace the removed IE. 7 versions and I'm still reading apologetic ramblings on their development blog.

I'd come up with a pretty slick way of making horizontal colored tabs with only a single element by using the left border property as a background fill and then a small PNG as a rounded end-cap on the right. Firefox, Camino, Safari, etc. all render text above the border color but IE renders it below. Totally ruins the whole concept of the design if you can't see the text on that tab. Ugh. Looks like i'll have to use multiple nested or left-floated elements.

IE is a pain, especially because between versions it is inconsistently inconsistent. Unfortunately, this is the reality we live in.

It seems to me you are trying to treat your webpage as print media. I've been trying to do less pixel-pushing recently and write minimal code for positioning, as long as it renders decently across browsers. You'll spend 10% of your time on the initial design and 90% of your time on browser incompatibility if you are determined to make it look exactly the same on all platforms.

I'm not as concerned without "exactly the same" as much as I am with it just not completely falling apart in IE. In print media I'm not concerned about pixels in the least and I can pretty much always get away with eyeballing ruller measurements, but when working for the screen, even a mistake by one pixel can mean disaster depending on the context (image slices lining up, etc..)

Latest quirk... If you float a block element, negative left margin pixel values seem to get multiplied by 2 in IE 6. I had to use negative relative positioning with an equal negative rightg margin to get around this.

Or why in IE if the div (logo) at the top of http://derekstag.com is offset to the right if it's placed at the top of the markup instead of the bottom. The reason is because that div will actually take on the left margin of the NEXT div (which is the blue part of the page). Even taking into account the broken box model (summing of widths and heights in various properties), I can't come up with a reason for this.

Here's an interesting find in IE...

If you create a link with no visible content, define it as a block element and then with CSS place it over an image, it will only be clickable where image data exists under it.

So for a free-floating circle this would act as a circular link.

However... If you have multiple images overlapping under the link, it does not sum those images together. Therefore you can only click on the non-transparent data of whichever image you're over. Example: If you had a small circle over a bigger circle, both within the same sized block, you could only click on the small circle, not any part of the larger circle.

In other browsers it's just a square regardless. Also, in IE you can't seem to adjust the Z order of the link, even after having made it a block element, only elements such as divs and images seem to take this property.

EDIT: Putting in a background image (transparent gif) into the link element allows IE to take its z-order.

Just wanted to share the updated site... http://derekstag.com

It will be finished on Saturday, the next time I have the chance to spend some time working on it. The three ladies are the actual hostesses. I didn't shoot any of the inset photographs, but did all the compositing and in the case of the TV/BBQ one also did the background isolation. The tie and garter photos are mine and all other artwork came from the tip of my finger on this Powerbook trackpad (I can't find my favorite mouse).

It actually looks *fine* in IE now. Phew. If you look at the CSS and page source, most of the "awkward" stuff is because of IE. There's a crapload of extra CSS that needs to be deleted (it's from my TM site).

I also squashed all the IE issues with my own site and shopping cart recently which I've been wanting to do for ages. I think I may start seling a couple of things that will work in Windows and leaving IE users incapable of shopping would have been a bad thing.

Very nice. An IE is of the devil.