Сделать изображение кликабельным в определенном месте

Я пытаюсь сделать определенное кликабельное местоположение на моем изображении. Размер изображения динамически изменяется на размер браузера, поэтому для этого мне нужно окно с возможностью щелчка. Я создал поле, чтобы скрыть мое изображение (не уверен, что это необходимо), и подумал, что если я сделаю коробку (a.resume) внутри этого контейнера, она будет корректироваться относительно изображения. Однако окно, похоже, создается вне контейнера, вне экрана справа.Сделать изображение кликабельным в определенном месте

Ниже CSS:

#banner { 
    width: 100%; 
    margin-bottom: auto; 
    margin-top: auto; 
    margin-left: auto; 
    margin-right: auto; 
} 

img.banner { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 

a.resume { 
    top: 20%; 
    left: 35px; 
    width: 60%; 
    height: 28%; 
    position: relative; 
    background-color: black; /* to see where my box is */ 
    display:block; 
}

Ниже HTML:

<body> 
<div id="banner"> 
    <img src="banner.png" class="banner" /> 
    <a href="banner1.png" class="resume" /> 
</div> 
</body>

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

источник

2013-07-21 wpakt

Вам нужно будет использовать тег карты HTML. Вы можете узнать об этом here

источник

2013-07-21 02:50:43

Я попытался сопоставить его, но область не динамически размер вместе с изображением. – wpakt

Сделать изображение кликабельным в определенном месте

ответ

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