Problèmes de survol

Fermé
TanguyPass Messages postés 26 Date d'inscription samedi 29 octobre 2011 Statut Membre Dernière intervention 7 avril 2014 - 14 janv. 2012 à 14:29
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 3 févr. 2012 à 11:00
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

5 réponses

-lolo666- Messages postés 566 Date d'inscription dimanche 11 septembre 2011 Statut Membre Dernière intervention 4 mai 2012 120
14 janv. 2012 à 14:31
Essaye de les espacer avec un <p></p> ou un <br />
0
TanguyPass Messages postés 26 Date d'inscription samedi 29 octobre 2011 Statut Membre Dernière intervention 7 avril 2014
15 janv. 2012 à 13:37
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
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 15/01/2012 à 14:12
hello,

<img src="images/analyse.jpg" name="image" onmouseover="this.src='images/analyse2.jpg'" onmouseout="this.src='images/analyse.jpg'" /> </code>
0
Opium59000 Messages postés 30 Date d'inscription dimanche 15 janvier 2012 Statut Membre Dernière intervention 3 août 2012 4
15 janv. 2012 à 21:05
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;).
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
15 janv. 2012 à 21:24
Ca pour les éléments du design, mais pour des éléments dynamiques c'est beaucoup plus simple à gérer en javascript.
0
Opium59000 Messages postés 30 Date d'inscription dimanche 15 janvier 2012 Statut Membre Dernière intervention 3 août 2012 4
15 janv. 2012 à 21:32
Oui pour les éléments dynamiques on ne peut pas échapper au JS (mais je ne sais pas si c'est le cas ici).

Pour les éléments dynamiques personnellement je passe uniquement par du JQuery, c'est beaucoup plus simple à mettre en place, mais ça c'est surtout une question de goût ;)
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
15 janv. 2012 à 21:51
Effectivement, et il est conseillé de précharger les images avant de les afficher pour éviter d'avoir un "blanc" durant le changement d'image
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
3 févr. 2012 à 11:00
Bonjour,
Normalement, la réponse de prosthetiks a du résoudre votre problème. Est-ce le cas ?
0