Problèmes de survol
TanguyPass
Messages postés
26
Date d'inscription
Statut
Membre
Dernière intervention
-
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je programme en HTML et je désire créer des images lorsqu'on les survole elles changent d'aspect.
Jusque là je réussis à en faire une à part comme ceci:
<img src="images/watch.jpg" name="image" onmouseover="image.src='images/watch2.jpg'" onmouseout="image.src='images/watch.jpg'" />
Là ça marche...
Mais lorsque j'en rajoute une, les deux ne marchent plus!!:
<img src="images/watch.jpg" name="image" onmouseover="image.src='images/watch2.jpg'" onmouseout="image.src='images/watch.jpg'" />
<img src="images/analyse.jpg" name="image" onmouseover="image.src='images/analyse2.jpg'" onmouseout="image.src='images/analyse.jpg'" />
(J'ai testé la deuxième à part marche très bien...)
Pouriez-vous m'ader??!!
Merci d'avance,
TanguyPass
Je programme en HTML et je désire créer des images lorsqu'on les survole elles changent d'aspect.
Jusque là je réussis à en faire une à part comme ceci:
<img src="images/watch.jpg" name="image" onmouseover="image.src='images/watch2.jpg'" onmouseout="image.src='images/watch.jpg'" />
Là ça marche...
Mais lorsque j'en rajoute une, les deux ne marchent plus!!:
<img src="images/watch.jpg" name="image" onmouseover="image.src='images/watch2.jpg'" onmouseout="image.src='images/watch.jpg'" />
<img src="images/analyse.jpg" name="image" onmouseover="image.src='images/analyse2.jpg'" onmouseout="image.src='images/analyse.jpg'" />
(J'ai testé la deuxième à part marche très bien...)
Pouriez-vous m'ader??!!
Merci d'avance,
TanguyPass
5 réponses
Merci du conseil, mais cela ne marche toujours pas!!
en fait je pense que on ne peut tout simplement pas mettre deux images avec survol sur la mm page... Mais alors comment faire??!!
J'espère m'être fait comprendre,
Merci d'avance
TanguyPass
en fait je pense que on ne peut tout simplement pas mettre deux images avec survol sur la mm page... Mais alors comment faire??!!
J'espère m'être fait comprendre,
Merci d'avance
TanguyPass
hello,
<img src="images/analyse.jpg" name="image" onmouseover="this.src='images/analyse2.jpg'" onmouseout="this.src='images/analyse.jpg'" /> </code>
<img src="images/analyse.jpg" name="image" onmouseover="this.src='images/analyse2.jpg'" onmouseout="this.src='images/analyse.jpg'" /> </code>
Une autre solution très simple à mettre en place (mais difficile à expliquer sur un forum ^^) et sans JS consiste à créer une seule image avec l'image "de base" et l'image qui doit s'afficher au survole de la souris.
Supposons que tu possède une image1 et une image2 toute les deux d'une taille de 50px sur 50px. Tu vas donc créer une seule image de 50px sur 100px.
Ensuite tu crées une div. Tu vas donner à cette dernière comme background l'image que tu viens de créer, ainsi qu'une largeur et une hauteur de 50px. Ainsi seule l'image du haut va apparaître.
Il ne te reste plus qu'à indiquer (toujours dans le CSS) qu'au passage de la souris sur ta div (:hover) que le background position doit changer (background-position:-50px 0;).
Supposons que tu possède une image1 et une image2 toute les deux d'une taille de 50px sur 50px. Tu vas donc créer une seule image de 50px sur 100px.
Ensuite tu crées une div. Tu vas donner à cette dernière comme background l'image que tu viens de créer, ainsi qu'une largeur et une hauteur de 50px. Ainsi seule l'image du haut va apparaître.
Il ne te reste plus qu'à indiquer (toujours dans le CSS) qu'au passage de la souris sur ta div (:hover) que le background position doit changer (background-position:-50px 0;).
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
