How to click different parts of the image and be directed to different destinations?

Question

I have a png image, it's a map, it represents 4 countries : france, italy, spain and germany, what I need to do, is to use CSS to devided and by passing cursor on each zone, i'll have a popup with name of every country.

Div doesn't need to be with exact shapes of every country.

Any idea how to put div for each zone inside this image please ?

For now i'm trying this :

container{
   width : 100px;
   height : 100px;
   overflow : hidden;
}

and the HTML is :

<div class = "container"><img src="src/assets/img_map.png"/></div>

Please read ["How do I ask a good question?"](https://stackoverflow.com/help/how-to-ask) and edit your question accordingly. Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) of the code you're currently working with. — Fred Gandt, Jul 19 '17 at 11:16
@Vishnu I was thinking of triming the image, i'll update my question again — Sushi, Jul 19 '17 at 11:17
It isn't possible. Just use 4 images and combine them to appear single image and use hover effect on images — Nimish, Jul 19 '17 at 11:18
you would put images inside divs, not the other way around :) — treyBake, Jul 19 '17 at 11:18

Alfin Paul · Answer 1 · 2017-07-19T11:43:04.433

2

Create hotspot/imagemap on image

An imagemap is a graphic image where a user can click on different parts of the image and be directed to different destinations. imagemaps are made by defining each of the hot areas in terms of their x and y coordinates (relative to the top left hand corner). With each set of coordinates, you specify a link that users will be directed to when they click within the area.

Image map generator link

edited Jul 19 '17 at 11:43

answered Jul 19 '17 at 11:30

Alfin Paul

1,543
14
26

http://jsfiddle.net/alfinpaul/np72xv2s/ click the first box on the image – Alfin Paul Jul 19 '17 at 11:45

score 1 · Answer 2 · answered Jul 19 '17 at 11:22

1

Use an imagemap (html Elements map and area) and do the necessary highlighting via JavaScript.

Or do a position: relative on your container and add your divs with position: absolute inside the container.

answered Jul 19 '17 at 11:22

Björn Tantau

1,564
14
13

How to click different parts of the image and be directed to different destinations?

2 Answers2