Как сделать область div кликабельной? Не весь div!

Question

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

Приветствия

Answer 1

Попробуйте этот код:

#container { width:200px; height:100px; position:relative }
#clicker { display:block; width:20px; height:10px; position:absolute; top:20px; left:100px; }

<div id="container">
    <a id="clicker" href="#link"></a>
</div>

Очевидно, измените все размеры, чтобы они соответствовали области, которую вы хотите сделать кликабельной.

Answer 2

Поместите элемент, который является прозрачным и относительно расположен внутри div. Поместите его в верхней части кнопки и сделайте так же, как размер кнопки. Сделайте элемент кликом.

Answer 3

Короче - нет.

Фоны - это фоны. Они не довольны. Они не интерактивные.

Это можно взломать, но не стоит. Если у вас есть контент для взаимодействия с пользователем, то представьте его как контент. Используйте <img>.

Answer 4

Вы можете сделать div "position: относительный", а затем разместить тег на чертеже, используя

display: block;
width: your_width;
height: your_height;
position: absolute;
left: your_position_x;
top: your_position_y;

Это был бы самый чистый путь.