HTML как сделать кликабельную кнопку поверх изображения

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

Может, мой вопрос звучит глупо, но я новичок в HTML. Надеюсь, вы, ребята, можете мне помочь!

Источник

3 ответа

Решение

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

Источник

Как сказал @programminginallston, вы должны использовать карту изображений.

Чтобы использовать карту изображения, добавьте usemap приписать к вашему <img> тег:

<img src="img/image.png" alt="an image" usemap="#usethismap">

Далее положить <map> отметить и добавить <area> теги для определения интерактивных областей:

<map name="usethismap">
    <area shape="rect" coords="0, 0, 100, 100" alt="Area Description" href="otherpage.html">
</map>

Вы можете прочитать больше на MDN:

Надеюсь, это поможет!

Источник

Еще один способ сделать это, просто для тех, кто нуждается в другом методе, это поместить другой элемент (кнопку, div и т. Д.) Поверх изображения и сделать его кликабельным. Например, вы можете разместить невидимый div (css: opacity:0;), где вы хотите, и сделать его кликабельным.

Я использую jQuery, чтобы сделать элемент (div) кликабельным, поэтому вы должны включить ссылку на библиотеку jQuery в <head> теги для этой страницы:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Секрет в том, чтобы поместить и img, и кликабельный div внутри другого div. Внешний div это позиция: относительный, а внутренний div это позиция: абсолютный.

#clickableDiv{
    position:absolute;
    top: 290px;
    left:85px;
    height: 20px;
    width: 30px;
    background-color:yellow;
    cursor:pointer;
}

Посмотрите этот пример jsFiddle, где я объединил как imagemap, так и скрытые методы div.

Источник
Другие вопросы по тегам