Afficher une image on mouseover

Fermé

siobhan - 4 sept. 2011 à 11:55
adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 - 8 sept. 2011 à 15:06

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

A voir également:

Afficher une image on mouseover
Image iso - Guide
Comment agrandir une image - Guide
Acronis true image - Télécharger - Sauvegarde
Google recherche par image - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama

1 réponse

Réponse 1 / 1

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
8 sept. 2011 à 15:06

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)

<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

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

programme qui n'affiche pas le mot secret

=Si la cellule A1 a du texte = B1 devient couleur

Sur la plage...

Discussions similaires

Newsletters