Question

I want to place links over a background image (set in CSS) and I want to ask is there an alternative to the map tag ? an HTML5 or elegant JS solution ?

Note: the image itself is not a map. I just want to place 5 links on specific positions

thanks

Answer 1

I would NEVER recommend using the map tag. You lose all SEO value of doing so. I recommend you use a similar syntax:

<div id="backgroundElement">
 <a href="#" id="link1">Follow Me on Twitter</a>
 <a href="#" id="link2">Follow Me on Facebook</a>
 <a href="#" id="link2">Follow Me on Google+</a>
</div>

and in the CSS use

#backgroundElement{ position:relative; background:url(image/bg.jpg) no-repeat; }
#link1{ position:absolute; top:150px; left:200px; background:url(image/icon/twitter.png) no-repeat; height:24px; width:24px; display:block; text-indent:-9999em; }

The links top and left will determine it’s location on the background. Ensure the height and width is set, and that the display block and text-indent is set to remove the text and format it correctly.