0

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

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

网站示例：thuisverplegingjacobs.be

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

4

2 回答 2

0

通常，我会将该图像切成 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>
于 2012-09-09T19:25:03.300 回答
0

你给了我一个完美的例子来做我想做的事。我不知道为什么我一开始没有想到将图像设置为背景并制作可点击的 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;
}

通过将可点击的电子邮件放置在启动图像中，并给#splash-image 一个位置：相对。当屏幕尺寸与预期不同时，我们确保#clickable-email 的绝对定位不会失控。通过这种方式，我们将可点击区域精确地保持在背景图像的正确坐标之上。

于 2012-09-10T17:40:43.107 回答