HTML/CSS: Размещение ссылок внутри изображения

У меня есть статическое изображение, которое содержит карту, отображаемую на веб-странице. Внутри изображения есть несколько точек, которые представляют города. Я должен сделать каждую точку кликабельной ссылкой, которая перенаправляет пользователей на другую страницу. Я ищу лучший способ сделать это, имея в виду, что некоторые точки близки друг к другу.HTML/CSS: Размещение ссылок внутри изображения

Я думал создать div сверху изображения с тем же размером, а затем разместить меньшие div с фиксированным размером (они будут на самом деле небольшими квадратами) внутри, каждый меньший div будет ссылкой. Есть ли лучший способ сделать это?

источник

2014-09-25 mmvsbg

изображение карты может работать, если вы ничего сверхъестественного не нужно. – zzzzBov

Я думаю, что ваша идея звучит хорошо <div> и <a>. Я предпочел бы использовать этот подход вместо <map>. Потому что у вас есть свобода, чтобы стиль, как вы хотите, и сделать его динамичным. Вы даже можете сделать это еще дальше, чем я сделал в демо, и вместо этого сделайте <div> как область щелчка и располагайте точку посередине, чтобы представить область, если хотите (если это имеет смысл?).

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; 
}

источник

2014-09-25 05:36:45

Это имеет смысл, именно то, что я хотел. Я также проверил другие решения, но подход к карте/области не дает вам столько свободы, чтобы играть, пока это решение довольно устойчиво. Спасибо! – mmvsbg

Как указано в @zzzzBov, элемент <map> должен сделать трюк.

Вы можете увидеть документы для этого здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

Он использует <area> элементы для отображения интерактивных областей, которые могут действовать так же, как ссылки. Более подробная информация о <area> элементе, и это атрибуты может быть найдена здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

источник

2014-09-25 05:26:37 fabiofl

<area> Тег определяет область внутри изображения-карты (изображение-карта представляет собой изображение с интерактивными областями).

Элемент всегда вложен в тег <map>.

Атрибут usemap в теге связан с атрибутом имени элемента и создает связь между изображением и картой.

надеюсь, что это вам поможет. :)

Example

источник

2014-09-25 05:38:41 WisdmLabs

HTML/CSS: Размещение ссылок внутри изображения

ответ

Смежные вопросы