Image qui change au survol de la souris (HTML) [Résolu/Fermé]

Signaler
-
 Utilisateur anonyme -
Bonjour,

J'ai un problème tout con. En me cherchant sur internet je suis tombé sur un script HTML me permettant de faire apparaître une autre image au survol de la souris. J'ai essayé le script sur une page de mon installation Wordpress, et il fonctionne sans problème avec une seule image.

Mais le problème, c'est que dès que j'ajoute une deuxième image, la deuxième image ne réagit pas au survol. Je vous met l'extrait du code qui pose problème : 

<a href="/saison1/"><img onmousedown="image.src='/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png'" onmouseover="image.src='/wp-content/uploads/2013/11/stanley_parable_saison11.png'" onmouseout="image.src='/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png'" alt="Stanley Parable Saison 1" src="/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png" name="image" /></a>

<a href="/saison2/"><img onmousedown="image2.src='/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png'" onmouseover="image2.src='t'" onmouseout="image2.src='/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png'" alt="Stanley Parable Saison 2" src="/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png" name="image2" /></a>


Je pensais d'abord que mon problème venait du même nom dans le name pour chaque image, mais même en changeant le nom de la deuxième image, le problème reste le même.
La première image réagit au survol de la souris, mais pas la deuxième. Que faire ?

Merci d'avance pour votre aide.


5 réponses

Réponse 1 / 5
Messages postés
4761
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
23 octobre 2020
 1 198
Salut, le problème est que la syntaxe utilisée est périmée depuis des années...
Remplace les 
name
par des 
id
, et change tous les 
image.
en 
document.getElementById("image").
.
Mais c'est surtout que 
onmouseover="image2.src='t'"
c'est pas bon: où est l'URL?
from human import idiocy
del idiocy
Signaler
Utilisateur anonyme 
onmouseover="image2.src='t'"
était un test que j'avais fait si ça créeait une erreur, j'ai oublié de le rectifier dans l'exemple ^^'

Je teste ta méthode
Réponse 2 / 5

En suivant tes recommendations, voici le nouveau code : 

<a href="/saison1/">
<img onmousedown="document.getElementById("image").src='/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png'" onmouseover="document.getElementById("image").src='/wp-content/uploads/2013/11/stanley_parable_saison11.png'" onmouseout="document.getElementById("image").src='/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png'" alt="Stanley Parable Saison 1" src="/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png" id="image" /></a>

<a href="/saison2/"><img onmousedown="document.getElementById("image2").src='/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png'" onmouseover="document.getElementById("image2").src='t'" onmouseout="document.getElementById("image2").src='/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png'" alt="Stanley Parable Saison 2" src="/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png" id="image2" /></a>


Je remarque à première vue qu'aucune des deux images ne réagit pas, je me suis trompé quelque part ?
Signaler
Messages postés
4761
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
23 octobre 2020
 1 198
"aucune des deux images ne réagit pas": négation d'une négation, donc ça marche? Non.
Mettre des guillemets doubles dans d'autres guillemets doubles sans mettre d'antislash avant (je précise que 
"\"" == '"'
) ça va pas marcher. Mais c'est de ma faute, je t'ai donné ce code, désolé, j'aurais du y penser.
Et le 
onmouseover="document.getElementById("image2").src='t'"
c'est toujours pas bon: 
't'
n'est pas une URL.
Réponse 3 / 5

Après plusieurs essais je me suis arrêté sur ce code : 

<a href="/saison1/"><img onmousedown="document.getElementById('image').src='/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png'"
onmouseover="document.getElementById('image').src='/wp-content/uploads/2013/11/stanley_parable_saison11.png'" 
onmouseout="document.getElementById('image').src='/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png'" 
alt="Stanley Parable Saison 1" src="/wp-content/uploads/2013/11/stanley_parable_saison1_non_survole.png" id="image" /></a>

<a href="/saison2/"><img onmousedown="document.getElementById('image2').src='/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png'" 
onmouseover="document.getElementById('image2').src='wp-content/uploads/2013/11/stanley_parable_saison_2.png'"
 onmouseout="document.getElementById('image2').src='/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png'" 
 alt="Stanley Parable Saison 2" src="/wp-content/uploads/2013/11/stanley_parable_saison_2_non_survole.png" id="image2" /></a>


Maintenant ma page Wordpress m'affiche le code, au lieu des images..
Pour le 't', désolé c'est la fatigue, oublié de l'enlever.
Signaler
Messages postés
4761
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
23 octobre 2020
 1 198
What the F? Wordpress doit bugger quelque part, ou tu as changé quelque chose d'autre que ce code, il n'y a aucune raison autre que ça ne marche pas. Je n'utilise pas WP (donc vais peut-être dire des bêtises), mais si tu te sers de RawHTML, tes balises sont-elles entre des balises 
[raw]
ou 
<!--raw-->
?
Réponse 4 / 5

Non j'utilise pas RawHTML, et avec la version précédente du code les images s'affichaient bien mais ne changaient pas au survol de la souris.. là c'est juste tout le code dans la balise <img > qui est affiché sous forme de lien...
Signaler
Messages postés
4761
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
23 octobre 2020
 1 198
Ah ça s'explique: c'est marqué ici (page en anglais) dans le paragraphe "JavaScript" que JS est désactivé sur les balises pour des raisons de sécurité, et ce que tu mets dans les onmouse... , c'est du JS. Un plugin du style RawHTML semble donc nécessaire.
Réponse 5 / 5

Après avoir installé le plugin Raw HTML et mis le code entre les balises [raw] tout fonctionne à Merveeeeeille ! Merci à toi pour ton aide ;)
Posez votre question