Surligner un texte au passage de la souris sur une image

Soyez le premier à donner votre avis sur cette source.

Snippet vu 12 076 fois - Téléchargée 32 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

Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
34
de rien
Messages postés
14
Date d'inscription
vendredi 18 février 2005
Statut
Membre
Dernière intervention
3 novembre 2006

merci quand même
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
34
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.