Image qui change au survol de la souris (HTML)

Résolu/Fermé

Utilisateur anonyme - 18 nov. 2013 à 21:15
Utilisateur anonyme - 18 nov. 2013 à 22:08

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.

A voir également:

Image qui change au survol de la souris (HTML)
Quelle touche pour débloquer la souris ? - Guide
Piratage facebook changer mot de passe - Guide
Image iso - Guide
Editeur html - Télécharger - HTML
Acronis true image - Télécharger - Sauvegarde

5 réponses

Réponse 1 / 5

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225
Modifié par gravgun le 18/11/2013 à 21:18

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.

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

Utilisateur anonyme
18 nov. 2013 à 21:24

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

Utilisateur anonyme
18 nov. 2013 à 21:26

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 ?

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225
Modifié par gravgun le 18/11/2013 à 21:31

"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

Utilisateur anonyme
18 nov. 2013 à 21:43

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.

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225
Modifié par gravgun le 18/11/2013 à 21:48

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]

<!--raw-->

Réponse 4 / 5

Utilisateur anonyme
Modifié par Alexandrer40 le 18/11/2013 à 22:03

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...

ElementW Messages postés 4816 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 225
18 nov. 2013 à 22:03

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.

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

Posez votre question

Réponse 5 / 5

Utilisateur anonyme
18 nov. 2013 à 22:08

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

Discussions similaires

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

compte facebook piraté et adresse email changé

Comment changer le sens de la souris avec un double écran ?

Discussions similaires

Newsletters