Problème changement d'image survol de souris
Résolu
Ghostly
-
Ghostly -
Ghostly -
Bonjour,
Je créée actuellement un site web pour un proche, et j'ai problème pour créer une image avec lien, dont l'image change au survol de la souris. J'ai fait de nombreuses recherche, essayer de nombreuse façon :
Le mouseOut/Over
Les a:hover ou img:hover sous une feuille CSS ...
Ainsi que d'autre technique tordu, mais à chaque fois, l'image apparait, mais rien ne se passe au survol de la souris.
E fait, j'ai une page avec des morceaux d'images, en cliquant sur l'une d'entre elle, on accède sur la série totale d'image (Des œuvres d'art), je précise que les images de chaque série utilise le highslide avec une gallerie (identique à l'exemple "highslide-with-caption" qu'on peux trouver dans le dossier exemple des fichiers highslide, pour ceux qui connaissent).
Voici les 2 images :
image normale : https://imageshack.com/
image au survol : https://imageshack.com/
Et le lien est href="Travaux.htm"
Avez vous une solution, qui fonctionne sur un maximum d'explorateur internet ? ( De préférence, Safari, Firefox 3.0, 3.5 et internet explorer 7.0)
Merci d'avance.
Je créée actuellement un site web pour un proche, et j'ai problème pour créer une image avec lien, dont l'image change au survol de la souris. J'ai fait de nombreuses recherche, essayer de nombreuse façon :
Le mouseOut/Over
Les a:hover ou img:hover sous une feuille CSS ...
Ainsi que d'autre technique tordu, mais à chaque fois, l'image apparait, mais rien ne se passe au survol de la souris.
E fait, j'ai une page avec des morceaux d'images, en cliquant sur l'une d'entre elle, on accède sur la série totale d'image (Des œuvres d'art), je précise que les images de chaque série utilise le highslide avec une gallerie (identique à l'exemple "highslide-with-caption" qu'on peux trouver dans le dossier exemple des fichiers highslide, pour ceux qui connaissent).
Voici les 2 images :
image normale : https://imageshack.com/
image au survol : https://imageshack.com/
Et le lien est href="Travaux.htm"
Avez vous une solution, qui fonctionne sur un maximum d'explorateur internet ? ( De préférence, Safari, Firefox 3.0, 3.5 et internet explorer 7.0)
Merci d'avance.
A voir également:
- Problème changement d'image survol de souris
- Changer de dns - Guide
- Comment activer le pavé tactile sans souris - Guide
- Image iso - Guide
- Changement d'heure - Guide
- Changement d'écriture facebook - Guide
6 réponses
Voilà comment faire un rollover simple :
Démo avec les images sur ImageShack :
<img src="image1.png" alt="" onmouseover="this.src = 'image2.png';" onmouseout="this.src = 'image1.png'" />
Démo avec les images sur ImageShack :
<img src="http://img25.imageshack.us/img25/1776/backoff.jpg" alt="" onmouseover="this.src = 'http://img223.imageshack.us/img223/4941/backon.jpg';" onmouseout="this.src = 'http://img25.imageshack.us/img25/1776/backoff.jpg';" />
Merci, la démo avec les images sur ImageShack marche impec' (même si ce n'est pas immédiatement réactif du au chargement de l'image), mais dès que je fait la première avec des images dans le dossier du site (il n'est pas encore en ligne) et bien, le rollover ne marche pas o.O
C'est que tu te trompes dans l'url.
Si l'image est dans le même dossier que le fichier .html, alors il te suffit de mettre nom_de_limage.ext sinon mets "images/image.ext" ou "dossier/sous-dossier/image.ext" ...
Nommes tes images avec des caractères de a à z, des chiffres, des tirets et des underscores (tirets bas).
Lorsque tu mets l'url de ton image, n'oublie pas l'extension (.png, .jpg, .gif, ...).
Si l'image est dans le même dossier que le fichier .html, alors il te suffit de mettre nom_de_limage.ext sinon mets "images/image.ext" ou "dossier/sous-dossier/image.ext" ...
Nommes tes images avec des caractères de a à z, des chiffres, des tirets et des underscores (tirets bas).
Lorsque tu mets l'url de ton image, n'oublie pas l'extension (.png, .jpg, .gif, ...).
Je n'ai pas fait d'erreur, j'ai même renommé dans le doute.
Les images sont bien présentes dans le dossier.
Voici la ligne de code que j'utilise :
<a href="Travaux.htm"><img src="images/back_off.png" alt="Back to Works" onmouseover="this.src = images/back_on.png';" onmouseout="this.src = 'images/back_off.png'" /></a>
C'est étrange que cela ne fonctionne pas, puisqu'en dessous, j'utilise des lignes de codes comme celle ci pour le Highslide :
<a class="idoles" href="images/SEKA.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/SEKA_MINI.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
<div class="highslide-caption">
Seka<br/>
Techniques mixtes sur bois<br/>
20x30 cm 2009
</div>
Et j'ai aucun problème avec les images :/
J'ai eu le même problème pour changer l'image de mes puces. J'ai du les héberger sur un site comme ImageShack.
Merci.
Les images sont bien présentes dans le dossier.
Voici la ligne de code que j'utilise :
<a href="Travaux.htm"><img src="images/back_off.png" alt="Back to Works" onmouseover="this.src = images/back_on.png';" onmouseout="this.src = 'images/back_off.png'" /></a>
C'est étrange que cela ne fonctionne pas, puisqu'en dessous, j'utilise des lignes de codes comme celle ci pour le Highslide :
<a class="idoles" href="images/SEKA.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/SEKA_MINI.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
<div class="highslide-caption">
Seka<br/>
Techniques mixtes sur bois<br/>
20x30 cm 2009
</div>
Et j'ai aucun problème avec les images :/
J'ai eu le même problème pour changer l'image de mes puces. J'ai du les héberger sur un site comme ImageShack.
Merci.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question