What I basicly need is a big image that is clickable and links to the actual site (this works), and on top of that image an area where an email adress resides, that is clickable aswell and opens an email client window (this works for all browsers except IE)
I've been trying to solve the problem with the use of a z-index in IE (without success) I've been looking at the following z-index issue However, when trying to apply it I don't get the wanted result. I really don't know how to fix this without the use of javascript (which I want to avoid at all costs)
Example of the site: thuisverplegingjacobs.be
clickable area should where the email envelope is at the bottom, however it is behind the clickable area of the image. I don't know how to fix this.
Usually, I would chop that image up into 3 rectangular ones - the header, the body and the email part.
Since it's not like that I've just used the trick used for the email field, explicitly setting divs to cover the header and body (of the image) I've then set the links within these elements to fill them - effectively giving you a div with a href.
As I started typing this, I remembered about image-maps - perhaps they would be a better implementation?
Anyway, I've just replaced everything below your </script> tag. It's fine with IE8 and current Chrome.
<style>
/* set the image as a background-image of a div */
div #splash-image
{
background-image: url('Thuisverpleging Eric Jacobs_files/splash_image2.png');
width: 1057px;
height: 863px;
}
/* resposition it */
#clickable-email
{
left: 216px;
}
#greyHeader a, #blueMain a
{
display: block;
}
#greyHeader
{
position: absolute;
left: 539px;
top: 20px;
width: 596px;
height: 90px;
}
#greyHeader a{ height: 90px; }
#blueMain
{
position: absolute;
left: 216px;
top: 110px;
width: 916px;
height: 580px;
}
#blueMain a{ height: 580px; }
</style>
</head>
<!--
Usage of certain elements
-----------------------------
class:
- center en width-x-px moeten samen voorkomen om te werken in alle browsers
- height-x moet voorkomen op een div
-
-->
<body class="wpc hpc no-padding-margin center-ie splash">
<!-- Content of the site -->
<div id="splash-content">
<div id="splash-image" class="center">
<a href="http://www.thuisverplegingjacobs.be/site/index.php"></a>
</div>
</div>
<div id='greyHeader'>
<a href="http://www.thuisverplegingjacobs.be/site/index.php"> </a>
</div>
<div id='blueMain'>
<a href="http://www.thuisverplegingjacobs.be/site/index.php"> </a>
</div>
<div id="clickable-email">
<a href="mailto:[email protected]"> </a>
</div>
</body>
</html>