Surligner un texte au passage de la souris sur une image

Commenter

Contenu du snippet

je débute en progamation et voici mon 1er script
j'en ai eu besoin récemment et je pense que ca peut être utile
lorsque la souris passe au dessus d'une zone cliquable sur une image un lien se surligne
c'est pratique pour ,par exemple, une photo de groupe et où l'on veut savoir qui est qui: on met les noms au dessus de la photo et ,au passage de la souris sur la tête le nom se surligne

Source / Exemple : 


<html>

<head>
<script language="javascript">
function changecouleurlien(lien, clr){
document.getElementById(lien).style.backgroundColor = clr;
}

function retourcouleurlien(lien){
document.getElementById(lien).style.backgroundColor = "";
}
</script>
<title>votre titre ici</title>
</head>

<body>
<a id="iddulien1">lien1</a> <a id="iddulien2">lien2</a> <a id="iddulien3">lien3</a>
<!-- si vous changez un id ici pensez a mettre le même id plus bas-->

<map name="nomdelamap">
<area onmouseover="changecouleurlien('iddulien1', 'couleurde surlignage')"
onmouseout="retourcouleurlien('iddulien1')" shape="circle" /*pour obtenir un cercle*/ 
coords="70, 70, 70"/*coordonnées du cercle : distance du bord gauche au centre du cercle, distance du bord haut au centre du cercle, rayon du cercle*/ >

<area onmouseover="changecouleurlien('iddulien2', 'couleur')" onmouseout="retourcouleurlien('iddulien2')" shape="rect" /*pour obtenir un rectangle*/ coords="347, 368, 460, 478" /*coordonnées du rectangle : distance du bord gauche au point en haut a gauche du rectangle, distance du bord haut au point en haut a gauche du rectangle, longueur du rectangle, hauteur du rectangle*/ >

<area onmouseover="changecouleurlien('iddulien3', 'couleur3')"  onmouseout="retourcouleurlien('iddulien3')" shape="polygon" /*pour obtenir un polygone*/ coords="91, 196, 388, 230, 231, 417, 88, 398, 103, 281" /*coordonnées du polygone : distance du bord gauche au premier point du polygone, distance du bord haut au premier point du polygone, distance du bord gauche au deuxieme point du polygone, distance du bord haut au deuxieme  point du polygone, distance du bord gauche au troisieme point du polygone, distance du bord haut au troisieme point du polygone ...*/ >
<!-- et on peut en mettre autant que l'on veut... -->

</map>
<img src="votreimage.extension" usemap="nomdelamap" width="longueurdevotreimage" height="hauteurdevotreimage">
</body>

</html>

Conclusion :


merci de me signaler s'il y a des bugs ou si on pourrait l'ameliorer mais svp ne soyez pas trop durs je débute...

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.