0

私が基本的に必要としているのは、クリック可能で実際のサイトにリンクする大きな画像 (これで機能します) と、その画像の上にある電子メール アドレスが存在する領域です。これもクリック可能で、電子メール クライアント ウィンドウが開きます (これはIE を除くすべてのブラウザ)

IE で z-index を使用して問題を解決しようとしました (成功しませんでした) 次のz-index の問題を見てきましたただし、適用しようとすると、必要な結果が得られません. JavaScriptを使用せずにこれを修正する方法が本当にわかりません（これは絶対に避けたいです）

サイトの例: thuisverplegingjacobs.be

クリック可能な領域は、電子メールの封筒が下部にあるはずですが、画像のクリック可能な領域の背後にあります。これを修正する方法がわかりません。

4

2 に答える 2

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内に配置し、＃splash-imageにposition：relativeを指定します。画面のサイズが予想と異なる場合でも、＃clickable-emailの絶対位置が狂わないようにします。このようにして、クリック可能な領域を背景画像の正しい座標の上に正確に配置します。

于 2012-09-10T17:40:43.107 に答える
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 に答える