0

ここで少しガイドが必要です...

私は2つのリンクを持っています:

<div class="tarjBodyHolder">
    <div class="imageHolder">
        <a href="#" onclick="alert('picture link'); return false;">
           <img border="0" src="/picture.jpg" />
        </a>
    </div>
    <div class="linkTransp">
       <a href="#" onclick="alert('family link'); return false;">RAM Moudles</a>
    </div>
</div>

CSS:

.tarjBodyHolder{
    position: relative; 
    clear: both; 
    height: 152px;
 }

.tarjBodyHolder .linkTransp{
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     width: 120px;
     height: 15px;
     z-index: 6; /*IE bug*/
}
.tarjBodyHolder .linkTransp a {
     display: block;
     text-indent: -9999px; 
     width: 120px; 
     height: 15px;
     overflow: hidden;
     z-index: 6;
 }
 .tarjBodyHolder .imageHolder{
     position: absolute; 
     bottom: 0px; 
     left: 0px;/*IE 7 bug*/
 }

これは次です。

img リンクはアイテムの写真です。この写真には、アイテムが属するカテゴリが印刷されています。例: DDR RAM モジュールには、画像と文字列 "<< RAM MODULES" が印刷されています。これの考え方は、この文字列をクリックすると、このアイテムのこのカテゴリに移動し、そこに含まれるすべての製品を見ることができるということです。ただし、製品の写真をクリックすると、製品の説明ページが表示されます。私が必要とするのは次のとおりです。

「見えない」(*)カテゴリのリンクと画像のリンクを重ねます。それが私が position: absolute; を使用した理由です。Firefoxでは本当に素晴らしい..しかし、IE6 / 7でこれを行う方法がわかりません.何をしても、テキストインデントでは機能しません:-9999px..これにコメントすると、テキストが表示され、私はそれをクリックすることができます..それ以外の場合はできません。Aの幅と高さを宣言してみました!!

(*) このリンクにはテキストが必要なので、「見えない」と言います..しかし、-9999px にインデントされているため、表示できないはずです。

4

1 に答える 1

1

あなたが望むように私には聞こえます、そして昔ながらのイメージマップ。このようにリンクされたアイテムを重複させることは、めったに良い考えではありません。

私が聞いているのは、あなたにはイメージがあるということです。画像の一部（写真部分）は説明ページにリンクしています。他の部分（テキスト部分）は、カテゴリの別のURLにリンクしています。

上の1つの画像と下のテキストリンクを使用するか、<map>タグを使用して画像を分割します。

花火/dreamweaverのようなものでそれを行うのはかなり簡単です。ただし、古き良きテキストエディタを作成したい場合は、ここにドキュメントがあります。

http://www.w3schools.com/TAGS/tag_map.asp

于 2009-07-31T16:38:11.490 に答える