ссылки на картинке

Маркеры надо позиционировать на карте абсолютно в процентах. При этом очень важно держать соотношение сторон карты, см. как сделано в сниппете. Само соотношение сторон задается padding-bottom.

.map { 
  position: relative; 
  display: block; 
  width: 100%; 
  height: 0; 
  padding-bottom: 50%; 
  overflow: hidden; 
} 
 
.map img { 
  position: absolute; 
  display: block; 
  width: 100%; 
  height: auto; 
  top: -80%; // выставляем видимый участок карты 
  left: 0; 
} 
 
.marker { 
  position: absolute; 
  display: block; 
  color: red; 
  width: 10px; 
  height: 10px; 
} 
 
.paris { 
  left: 27%; 
  top: 63%; 
} 
 
.moscow { 
  left: 80%; 
  top: 18%; 
}

<div class="map"> 
  <img src="http://mapeurope.ru/wp-content/uploads/konturnaya-karta-evropy-10klass.jpg"> 
  <div class="marker paris">x</div> 
  <div class="marker moscow">x</div> 
</div>

Свойство top: -80% выставляет видимый участок для данной конкретной карты и не является обязательным.

Есть 2 варианта решения вашей проблемы:

1 Вариант - вы используете jpg\png, тогда вам необходимо воспользоваться возможностью задавать area для картинки пример можете посмотреть здесь и здесь и уже при нажатии на area вы можете делать все что душе угодно

2 Вариант - использовать SVG для схемы метро. Тогда вы можете задать каждому элементу на картинке id (или, предпочтительно, некий атрибут) и уже при нажатии\наведении\любом_другом_событии делать всё что вашей душе угодно с помощью js+css - для SVG (если она вставлена в сам html, а не картинкой) будут работать все селекторы как в css, так и в js.

Лично для меня, 2-й вариант наиболее предпочтителен, так как в первом варианте еще может всплыть проблема с адаптивностью, да и впринципе вырисовывать area на картинках - довольно трудозатратно, в SVG проще на этапе её рисования сразу необходимые аттрибуты прописать и всё. Да и к тому же, на сайте, приведенном вами в качестве примера, используется как раз-таки 2-й вариант