Forum Moderators: not2easy
As the Lightbox image display utility doesn't work with 'area' image maps (out of the box, anyway, and I can't rely on modified installations), I am implementing a pseudo image map using positioned, block-level links that sit over the image regions.
I'm doing this with divs located immediately after the image tag, set to position: absolute so they're out of the text flow, but positioned relatively using margins. Inside the divs are link tags with display:inline-block and with 100% width and height. This seems to satisfy most browsers, including IE 6, but not IE 7.
In IE 7, the link is not clickable, although putting a border on it shows that it is still positioned correctly. Further investigation reveals that it is because IE 7 doesn't appear to be capable of maintaining a transparent clickable area over existing page content.
Is anyone aware of a workaround to this problem? Or, alternatively, does anyone have any different suggestions for providing image map functionality that is compatible with Lightbox?
Many thanks in advance!
Sample code follows:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
</head>
<body>
<h1>Working link</h1>
<p><em>Link is in an absolutely positioned div, with inline-block and 100% width and height. It is out of content flow, but with no content behind it. Works as expected.</em></p>
<div style="width: 50px; height: 50px; position: absolute;"><a href="http://example.com" style="display: inline-block; border: 1px solid red; width: 100%; height: 100%;"></a></div>
<!-- Blank spacer -->
<div style="height: 50px;"></div>
<h1>Bug demonstration</h1>
<p><em>Same link markup, but now has content behind. Link no longer functions.</em></p>
<div style="width: 50px; height: 50px; position: absolute;"><a href="http://example.com" style="display: inline-block; border: 1px solid red; width: 100%; height: 100%;"></a></div>
<!-- Content underneath absolutely positioned block link -->
<p>Ilit adipsusto hendrerit velisl velenis est sismolore quatums phasellus; velisit eugue placerat nostra tin aliquet. Vulla odio fames vel. Eugiam incipis nisit, tortor henisi eleifend conubia faciliquis prate, adion habitant eumsandre. Ex enibh exercillaore deliqui msandre nullandigna odigna volesed facipsum, vent feugiamet adignit. Volor pharetra autatie, turpis rutrum habitasse vendre acipit ullut, volobore enim molor.</p>
<h1>One, non-viable workaround</h1>
<p><em>Supply a background color on the link or the div container. Not a viable solution though, as link must be transparent.</em></p>
<div style="width: 50px; height: 50px; position: absolute; background: #fee;"><a href="http://example.com" style="display: inline-block; border: 1px solid red; width: 100%; height: 100%;"></a></div>
<!-- Content underneath absolutely positioned block link -->
<p>Ilit adipsusto hendrerit velisl velenis est sismolore quatums phasellus; velisit eugue placerat nostra tin aliquet. Vulla odio fames vel. Eugiam incipis nisit, tortor henisi eleifend conubia faciliquis prate, adion habitant eumsandre. Ex enibh exercillaore deliqui msandre nullandigna odigna volesed facipsum, vent feugiamet adignit. Volor pharetra autatie, turpis rutrum habitasse vendre acipit ullut, volobore enim molor.</p>
</body>
</html>
<!--[if IE7]>
<style type="text/css" media="all">
a.ie-hack {
background-image: url(transparent.gif);
}
</style>
<![endif]-->
</head>
Note that the hack does not work with an empty value, but the value does NOT have to be legitimate. I could have knocked out a legit transparent .gif and plugged it in, but it gives click functionality whether the image exists or not.
<div style="width: 50px; height: 50px; position: absolute;"><a href="http://example.com" class="ie-hack" style="display: inline-block; border: 1px solid red; width: 100%; height: 100%;"></a></div>
Due to some awkward circumstances, I'm limited to using inline CSS, so I used the IE7-and-earlier targeting hack that involves placing a "*" before the attribute in question. Safari at least seems to successfully ignore it. So, something like:
<div style="position: absolute; margin-top: -349px; margin-left: 41px; width: 171px; height: 256px;">
<a href="http://example.com" title="Title" style="display: inline-block; width: 100%; height: 100%; *background-image: url(transparent.gif);"></a>
</div>
Many thanks!
