Блог

Главная - Вопросы по программированию - как добавить несколько ссылок на части изображения

как добавить несколько ссылок на части изображения

#javascript #html #css

#javascript #HTML #css

Вопрос:

как бы я добавил несколько ссылок на изображение. Связывая изображение, я бы просто обернул его a href . У меня было бы изображение дерева с яблоками, тогда я хотел бы добавить ссылку на каждое яблоко на изображении. Как мне это сделать?

Я думал об использовании абсолютной позиции, но это кажется утомительным, особенно при попытке сделать его мобильным, реагирующим на перемещение ссылок.

Комментарии:

1. это можно сделать с map помощью тега

2. …но это для совершенно другой цели. Лучше использовать абсолютное позиционирование.

3. <map> создан для такого рода вещей, но это так же утомительно, как и размещение некоторых элементов над изображением.

4. так что в любом случае оба варианта утомительны

Ответ №1:

Яблоня

Вы можете использовать генератор карт изображений

 .wrap {
    transform: scale(0.3);
    width: 0px;
    height: 0px;
}  
 <div class="wrap">
    <img src="https://www.freepngimg.com/thumb/tree/76337-vector-fruit-tree-apple-download-free-image.png"
        usemap="#image-map">

    <map name="image-map">
        <area target="" alt="" title="" href="#1" coords="626,247,775,130" shape="rect">
        <area target="" alt="" title="" href="#2" coords="495,265,632,378" shape="rect">
        <area target="" alt="" title="" href="#3" coords="620,437,750,558" shape="rect">
        <area target="" alt="" title="" href="#4" coords="346,829,467,931" shape="rect">
        <area target="" alt="" title="" href="#5" coords="579,937,707,1041" shape="rect">
        <area target="" alt="" title="" href="#6" coords="885,289,1029,386" shape="rect">
        <area target="" alt="" title="" href="#7" coords="1082,540,1210,652" shape="rect">
        <area target="" alt="" title="" href="#8" coords="1268,926,1403,1035" shape="rect">
        <area target="" alt="" title="" href="#9" coords="1025,1096,1171,1206" shape="rect">
    </map>
</div>

Комментарии:

1. Я вижу, скажем, хочу ли я сделать его адаптивным для мобильных устройств? смогу ли я изменить координаты в css медиа-запроса

2. Есть два варианта, чтобы сделать его отзывчивым: 1. Использование JS. (Излишне сложный для этой цели) 2. Использование CSS путем изменения масштаба. Пример: @media screen и (максимальная ширина: 800 пикселей) { .wrap { преобразование: масштабирование (0.2); } }