Question

I have a simple CSS image map that works like this:

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;}

This works great, but I would like to add a pointer image to the left of the link when hovered. The pointer image can be made a link (doesn’t matter), but I do not want this link to be apart of the border when the user hovers. For example:

What is an efficient way of doing this? Many thanks.

Answer 1

I did a live demonstration here:
http://jsfiddle.net/5abv6/

I used a background color instead of an image though for the example.

But what I did was set up your 3 links in HTML:

    <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>

And the CSS for it (based on an image pointer image of 20px by 20px – adjust accordingly)

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 */
}

The span class="pointer" is where your pointer image would appear. The span class="border" is what puts the border around the link when hovered & all of it is in the a tag so when any of it is hovered, the border & pointer appear appropriately.

Alternatively, you could put the image in the HTML in between the <span class="pointer"> </span> And in the CSS do .pointer {display:none;} but on hover do a.main-link:hover .pointer {display:block;}