Position images and links on a image

Question

I have an image, on which I want to place links, which could be either text or an image. Pretty much what Wikipedia has here for example (the map of Germany and its states): http://en.wikipedia.org/wiki/States_of_Germany Back in the 90s I would've used the map tag to create clickable parts on the image.

I've looked at the source code of the map on Wikipedia and noticed that all the states of an absolute position. So is there an easy way to implement such a thing? Or do I have to use, for example, Photoshop to check for the absolute position and hardcode it in CSS/HTML?

Veger · Accepted Answer · 2013-01-09T14:29:08.023

As you already noticed, Wikipedia uses <div>-elements which are positioned over the image. One way or another you would need to provide the (absolute) coordinates for the texts you want to place on top of the image.

You can try to fiddle around to get the correct coordinates or use a(ny) image editing application to exactly find the required coordinates within the image.

Wikipedia uses some structure like this

HTML:

<div class="container">
  <img src="myImage.png" />
  <div class="text1">Text1</div>
  <div class="text2">Text2</div>
</div>

CSS:

.text1 {
  position:absolute;
  left:50px;
  top:100px
}

.text2 {
  position:absolute;
  left:200px;
  top:50px
}

(Except that they directly put the CSS styles in the HTML elements...)

See this jsFiddle for an working example.

Not a big fan of absolute positioning – Piyush Mattoo Apr 21 '15 at 23:39 — Piyush Mattoo, Apr 21 '15 at 23:39

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

I guess you need a HTML map (example http://www.w3schools.com/tags/tag_map.asp) plus some javascript to include the text over it.

Please take a look to the following question, it might help you:

HTML, jQuery : Show text over area of image-map

edited May 23 '17 at 11:43

Community

1
1

answered Jan 09 '13 at 14:12

tetuje

279
3
9

Praveen Puglia · Answer 3 · 2013-01-09T14:29:40.143

If you are creating something similar in the link you mentioned, you gotta be pin pointing those positions. Isn't it? absolute positioning is good to go in that case.

But if your scenario does not require you to put those links in the exact locations on the image, you can try something like this.

CSS//////////

div.back{
    background:url('path/to/your/image.extension');
    width:/*width of the image*/;
    height:/*height of the image*/
}

This div with class back will just work like the way you want. Then put the links inside the div and the links will be displayed on top of that image.

Check out this fiddle.

Position images and links on a image

3 Answers3