Search code examples
htmlcssimagemap

One image with two hrefs controlled by an image map

I'm trying to figure out a way to have two href's attached to a single image, sort of like an old school image map, but just using CSS. Is this even possible?

Currently the HTML looks like this. But I'm being ask to have two URL's attached based on where the user is hovering their mouse.

<div id="logo-wide">
<a href="http://myurl"><img src="BIG-Logo_FINAL.png" alt="url-name"></a>
</div>

Philip

Solution

  • You'll have to either

    1. Use an image map
    2. Slice the image in half and wrap each half in a link
    3. Use z-index to hover two absolutely positioned links over the images (this would be really hackish and ugly)

    Option 1 or 2 is best.