Изготовления части изображения интерактивного

Question

У меня есть фоновое изображение, нанесенной таким образом

HTML 

<div id="background"> 
    <img src="stock.png" class="stretch" alt="image" /> 
</div> 

CSS 

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
} 

.stretch { 
    width:100%; 
    height:100%; 
} 

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

Answer 1

Вы всегда можете сделать ссылку relative и z-index его к правильной позиции:

<div id="background"> 
    <img src="stock.png" class="stretch" alt="image" /> 
    <a href="path/to/url/" class="link"></a> 
</div> 

Тогда что-то вроде:

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0; 
} 
.stretch { 
    width:100%; 
    height:100%; 
    z-index:1; 
} 
.link { 
    width:200px; 
    height:200px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    display:block; 
    z-index:2; 
} 

Затем переместите и как вы будете с CSS и/или изображениями.

Answer 2

Ну добавить еще один DIV с position: absolute;, а затем определить его положение с этим

left:100px; 
top:100px; 

Answer 3

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

http://www.w3schools.com/tags/tag_map.asp объясняет, как его использовать.