HTML/CSS: Placing links inside an image

Question

I have a static image which contains a map displayed on a web page. Inside the image there are several dots which represent cities. I have to make every dot a clickable link which will redirect users to another page. I'm looking for the best way to do that keeping in mind that some of the dots are close to each other.

I've been thinking to create a div on top of the image with the same size and then position smaller divs with fixed size (they will be small squares actually) inside of it, each smaller div being a link. Is there a better way to do that?

Answer 1

The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).

The element is always nested inside a <map> tag.

The usemap attribute in the tag is associated with the element's name attribute, and creates a relationship between the image and the map.

hope this will help you. :)

Example

Answer 2

I think your idea sounds good <div> and <a> . I would rather go with that approach instead of <map> . Because you have the freedom to style it as you want and easier to make it dynamic. You can even take it a step further then I have made in the demo and have a <div> instead as the click area and have a dot in the middle to represent a area if you like (if that makes any sense?).

DEMO

<div class="map__image">
    <a href="#" id="first" class="map__link"></a>
    <a href="#" id="second" class="map__link"></a>
    <a href="#" id="third" class="map__link"></a>
</div>

.map__image {
    background: url(https://lh5.ggpht.com/RPZEPRAtdW4lSTE0v1vXe8z9GEmgMSp84ZCEmdb8SJ5-acTtcnvgFjwjWsK7hiejzjQ=w300) no-repeat;
    width: 300px;
    height: 300px;
    position: relative;
}

.map__link {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: red;
}

#first {
    top: 30px;
    left: 100px;
}

#second {
    top: 100px;
    left: 200px;
}

#third {
    top: 220px;
    left: 150px;
}

Answer 3

As @zzzzBov stated, the <map> element should do the trick.

You can see the docs for it here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

It uses the <area> elements to map the clickable regions, that can act just as links. More info about the <area> element and it's attributes can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area