Afficher une image on mouseover
siobhan
-
adns Messages postés 1094 Date d'inscription Statut Membre Dernière intervention -
adns Messages postés 1094 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je cherche a afficher une image en superposition a mon background lorsque je survol un mot du menu.
je m explique: j ais une carte du monde en background et un menu avec plusieurs langues. je voudrais que lorsqu on survol une langue, tous les pays qui parlent cette langue s affichent en rouge. (j ais prepare les png correspondants bien sur)
j ais essaye avec le hover en css mais ce n est pas assez fluide a mon gout et ca me pose des problemes de positionnement. je voudrais essayer en javascript mais je ne sais pas par quel bout m y prendre.
si quelqu un peut m aider
je cherche a afficher une image en superposition a mon background lorsque je survol un mot du menu.
je m explique: j ais une carte du monde en background et un menu avec plusieurs langues. je voudrais que lorsqu on survol une langue, tous les pays qui parlent cette langue s affichent en rouge. (j ais prepare les png correspondants bien sur)
j ais essaye avec le hover en css mais ce n est pas assez fluide a mon gout et ca me pose des problemes de positionnement. je voudrais essayer en javascript mais je ne sais pas par quel bout m y prendre.
si quelqu un peut m aider
A voir également:
- Afficher une image on mouseover
- Image iso - Guide
- Légender une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Transformer une image en icone - Guide
1 réponse
Bonjour,
Pour faire simple je te dirais qu'il te suffit d'appliquer une class par défaut à l'élément qui contient le background.
Tu créer une autre class par langue juste en y changeant l'image de fond.
Ensuite il ne te restera plus qu'a chaque passage de la souris à changer la classe de l'élément en question.
Perdu ?
un petit exemple : (je le fais avec le changement de couleur mais c'est pareil)
Adns
Pour faire simple je te dirais qu'il te suffit d'appliquer une class par défaut à l'élément qui contient le background.
Tu créer une autre class par langue juste en y changeant l'image de fond.
Ensuite il ne te restera plus qu'a chaque passage de la souris à changer la classe de l'élément en question.
Perdu ?
un petit exemple : (je le fais avec le changement de couleur mais c'est pareil)
<html>
<head>
<script>
changeBg = function(id){
document.getElementById('element').className=id;
}
</script>
<style>
.defaut {
width : 300px;
height : 300px;
background-color : red;
}
.FR {
width : 300px;
height : 300px;
background-color : blue;
}
.US {
width : 300px;
height : 300px;
background-color : green;
}
</style>
</head>
<body>
<ul>
<li id="FR" onmouseover="changeBg(this.id);">France</li>
<li id="US"onmouseover="changeBg(this.id);">U.S.A.</li>
</ul>
<div id="element" class="defaut">Contenu</div>
</body></html>
Adns