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

Question

У меня есть простой вопрос, который я не могу решить.

#tps_block { 
 
    height: 45px; 
 
    width: 940px; 
 
} 
 
#tps_point1 { 
 
    width: 351px; 
 
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat; 
 
    text-indent: -9999px; 
 
    display: block; 
 
    height: 100%; 
 
    float: left; 
 
} 
 
#tps_point1:hover { 
 
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat; 
 
} 
 
#tps_point2 { 
 
    width: 284px; 
 
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat; 
 
    text-indent: -9999px; 
 
    display: block; 
 
    height: 100%; 
 
    float: left; 
 
} 
 
#tps_point2:hover { 
 
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat; 
 
} 
 
#tps_point3 { 
 
    width: 305px; 
 
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat; 
 
    text-indent: -9999px; 
 
    display: block; 
 
    height: 100%; 
 
    float: left; 
 
} 
 
#tps_point3:hover { 
 
    background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat; 
 
}

<div id="tps_block"> 
 
    <div id="tps_point1"><a href="#">Point 1</a> 
 
    </div> 
 
    <div id="tps_point2"><a href="#">Point 2</a> 
 
    </div> 
 
    <div id="tps_point3"><a href="#">Point 3</a> 
 
    </div> 
 
</div>

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

Мне удалось применить эффект наведения, но я не могу заставить ссылку работать.

Может кто-нибудь помочь мне?

JSFiddle:http://jsfiddle.net/ahmadka/Fjmnt/

Answer 1

Если вы можете изменить HTML, просто теряют внутренние div теги и применять одни и те же стили для самих ссылок:

<div id="tps_block"> 
    <a href="#" id="tps_point1">Point 1</a> 
    <a href="#" id="tps_point2">Point 2</a> 
    <a href="#" id="tps_point3">Point 3</a> 
</div> 

Изменено jsFiddle: http://jsfiddle.net/Fjmnt/7/

Answer 2

Лучшее решение если вы не можете изменить HTML .. добавить следующий CSS.

#tps_block a { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

Это заполнит <a> делает весь div кликабельным.

jsFiddle demo

Answer 3

<div id="tps_block"> 
    <a href="#"><div id="tps_point1"></div></a> 
    <a href="#"><div id="tps_point2"></div></a> 
    <a href="#"><div id="tps_point3"></div></a> 
</div>