Surligner un texte au passage de la souris sur une image

0/5 (3 avis)

Snippet vu 13 246 fois - Téléchargée 33 fois

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

Ajouter un commentaire Commentaires
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
3 mars 2005 à 19:02
de rien
cube45 Messages postés 14 Date d'inscription vendredi 18 février 2005 Statut Membre Dernière intervention 3 novembre 2006
2 mars 2005 à 19:19
merci quand même
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
2 mars 2005 à 18:49
le mieux c'est de le faire en Css, avec l'atribut :hover... comme ça si la personne a désactivé js, ça marche, et puis ça n'alourdi pas la page...

et ça reste un bout de code copié collé de tutorial... stp : essai de faire quelquechose de plus ... évolué avant de le poster ici...

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.