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 上执行此操作。无论我做什么它都不适用于 text-indent: -9999px .. 如果我评论这个文本变得可见并且我可以点击它..但不能。我什至尝试过声明 A 的宽度和高度!

(*) 我说“不可见”是因为这个链接应该有文本.. 但你不应该看到它,因为它缩进了 -9999px。

4

1 回答 1

1

听起来像你想要的和老式的图像地图。像这样重叠的链接项目很少是一个好主意。

我听到的是你有一个形象。图片的一部分(图片部分)链接到描述页面。另一部分(文本部分)链接到另一个类别的 URL。

可以使用上面的 1 张图片和下面的文本链接,或者使用 <map> 标签来分割图片。

在像烟花/织梦者这样的东西中很容易做到这一点。但是,如果您想打破一个好的老式文本编辑器,请参阅文档:

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

于 2009-07-31T16:38:11.490 回答