IE6 / 7リンクのオーバーラップ+テキストインデント

Question

ここで少しガイダンスが必要です...

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モジュールには画像と文字列<！> quot; <！> lt; <！> lt;があります。 RAMモジュール<！> quot;それに印刷された。この考えは、この文字列をクリックすると、このアイテムのこのカテゴリに移動し、それに含まれるすべての製品を表示できるということです。ただし、製品の写真をクリックすると、製品の説明ページで終了します。必要なのは次のとおりです：

<！> quot; invisible <！> quot;（*）カテゴリリンクと画像リンクを重ねます。それが私が使った理由です 位置：絶対; Firefoxでは本当に素晴らしい..しかし、IE6 / 7でこれを行う方法を理解することはできません。クリックすることはできますが、それ以外はできません。 Aの幅と高さも宣言しようとしました!!

（*）<！> quot; invisible <！> quot;このリンクにはテキストが含まれている必要がありますが、-9999pxでインデントされているため表示できません。

Answer 1

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

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

上の画像1つと下のテキストリンクのいずれかでライブ、または<！> lt;マップ<！> gt;タグで画像を分割します。

fireworks / dreamweaverのようなもので行うのはかなり簡単です。ただし、古き良き時代のテキストエディターを使いたい場合は、次のドキュメントを参照してください。

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