Question

我基本上需要的是一个可点击的大图像并链接到实际网站（这个工作），并在该图像的顶部是电子邮件地址所在的区域，也是可点击的，并打开一个电子邮件客户端窗口（这适用于除IE之外的所有浏览器

我一直试图通过在IE中使用z-index来解决问题（没有成功）我一直在关注以下z-index issue但是，当我尝试应用它时我不会得到想要的结果。我真的不知道如何在不使用javascript（我想不惜一切代价避免）的情况下解决这个问题。

网站示例：thuisverplegingjacobs.be

可点击区域应该是电子邮件信封位于底部的位置，但它位于图像的可点击区域后面。我不知道如何解决这个问题。

Answer 1

通常，我会将图像分成3个矩形图像 - 标题，正文和电子邮件部分。

因为我不是只使用了用于电子邮件字段的技巧，明确设置div来覆盖标题和正文（图像）我然后在这些元素中设置链接以填充它们 - 有效给你一个带有href的div。

当我开始输入此内容时，我记得有关图像映射 - 也许它们会是更好的实现？

无论如何，我刚刚更换了</script>标记下的所有内容。 IE8和当前的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">&nbsp;</a>
    </div>

    <div id='blueMain'>
        <a href="http://www.thuisverplegingjacobs.be/site/index.php">&nbsp;</a>
    </div>

    <div id="clickable-email">
        <a href="mailto:info@thuisverplegingjacobs.be">&nbsp;</a>
    </div>
</body>
</html>

Answer 2

你给了我一个完美的榜样来做我想做的事。我不知道为什么我首先没有想到将图像设置为背景并制作可点击的div。

对于那些感兴趣的人。这是最终的布局：

<body class="wpc hpc no-padding-margin center-ie splash">

 <div id="splash-content">
  <div id="splash-image" class="center">
    <a href="/site/index.php"><span>&nbsp;</span></a>
    <div id="clickable-email">
        <a href="mailto:info@mysite.com"</a>
    </div>
  </div>
 </div>

</body>

并使用以下电子邮件样式

#splash-image{
background-image: url('../images/design/splash_image2.png');
width: 1057px;
height: 863px;
position:relative;/* so #clickable-email is positioned right */
}

#splash-image a{
display:block;
cursor:pointer;
}

/*required to give full size dimensions to the link*/
#splash-image a span{
display:block;
width: 1057px;
height: 863px;
}

#clickable-email{
position:absolute;
top:690px;
left:73px;
width:595px;
height:87px;    
}

#clickable-email a{
display:block;
text-decoration:none;
height:87px;
}

#clickable-email a span{
display:block;
height:87px;
}

将可点击的电子邮件放在启动图像中，并通过给#shlow-image一个位置：relative。我们确保当屏幕尺寸与预期不同时，＃clickable-email的绝对定位不会变得混乱。这样我们就可以将可点击区域精确地保持在背景图像的正确坐标之上。

mailto IE问题

2 个答案: