将指针图像添加到图像映射

Question

我有一个简单的CSS图像映射，其工作原理如下：

HTML:
<div style="display:block; width:791px; height:1022px; background:url(images/image.jpg); position:relative; margin:2px auto 2px auto;">
<div><a class="imagemaplink" style="left:112px; top:564px; background:transparent; display:block; width:336px; height:0; padding-top:29px; overflow:hidden; position:absolute;" title="Image1" href="#"></a></div>
………

CSS:
a.imagemaplink:hover{background:transparent; border:1px solid black; color:black;}

这很好用，但我希望在悬停时在链接的左侧添加指针图像。指针图像可以成为一个链接（无关紧要），但我不希望这个链接在用户悬停时与边界分开。例如：

这样做的有效方法是什么？非常感谢。

Answer 1

我在这里做了现场演示： http://jsfiddle.net/5abv6/

虽然我举了一个背景色而不是图像。

但我所做的是用HTML设置你的3个链接：

    <a href="#" class="main-link"><span class="pointer">
        <!-- img of finger could go here or make it background in css --></span>
        <span class="border">Link 1</span>
    </a>
    <a href="#" class="main-link">
        <span class="pointer"></span><span class="border">Link 2</span>
    </a>
    <a href="#" class="main-link">
        <span class="pointer"></span><span class="border">Link 3</span>
    </a>

它的CSS（基于20px×20px的图像指针图像 - 相应调整）

a.main-link {display:block; height:30px; width:150px; margin-bottom:5px;}

a.main-link .border {
    margin-left:40px;
    display:block;
    height:30px;
    width:105px;
    padding-left:5px; /* margin-left + width + padding-left = width of .main-link */
}

a.main-link:hover .border {border:1px solid #000;}
a.main-link:hover .pointer {
    display:block;
    background:url(yourpointerimage.jpg) no-repeat 0 0;
    width:20px;
    height:20px;
    float:left;
    margin-top:5px;
    margin-left:10px; /* I just added some margins to center it more to the link */
}

范围class="pointer"是指针图像出现的位置。跨度class="border"是在悬停时将边界置于链接周围的原因。所有这些都在一个标签中，所以当任何一个悬停时，边界和指针显示得恰到好处。

或者，您可以将图片放在HTML中<span class="pointer"> </span>和CSS .pointer {display:none;}之间，但悬停时a.main-link:hover .pointer {display:block;}