comment faire une image dans un lien

Question

J'ai une question simple que je ne peux pas sembler résoudre.

#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>

L'idée est qu'il ya 3 images côte à côte, et quand le vol stationnaire de plus de chaque image de la souris, l'image change à un mis en évidence une, et l'image est cliquable aussi, donc que l'utilisateur est amené à un autre endroit lorsque l'image est cliquée.

J'ai réussi à appliquer l'effet de survol, mais je n'arrive pas à faire fonctionner la liaison.

Quelqu'un peut-il m'aider?

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

Answer 1

Si vous êtes en mesure de modifier le code HTML, juste perdre les balises div internes et d'appliquer exactement les mêmes styles aux liens eux-mêmes:

<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> 

Mise à jour jsFiddle: http://jsfiddle.net/Fjmnt/7/

Answer 2

La meilleure solution si vous ne pouvez pas modifier le code HTML .. ajouter le CSS suivant.

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

Cela remplira <a> faire toute cliquable 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>