Se connecter / S'enregistrer
Votre question

[HTML] comment changer d'image au survol de la souris

Tags :
  • mouseover
  • Html
  • survol
  • Png
  • Programmation
Dernière réponse : dans Programmation
27 Mai 2005 14:04:27

bonjour

voila j'ai deux images, le bouton normal et l'image quand le bouton est survolé

je voulais savoir si il y a une propriete qui permet lors du survol de la premiere image qu'elle se transforme en l'image numero 2 ?

merci

Autres pages sur : html changer image survol souris

27 Mai 2005 14:06:19

Cela se fait avec la fonction OnMouseOver et OnMouseOut va voir sur editeur javascript pour te faire un petit code
27 Mai 2005 14:07:08

Bien sûr :

<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />

image1 : normale
image2 : sulvolée
image3 : enfoncée
Contenus similaires
27 Mai 2005 17:55:15

bonjour,
pour te passer de javascript tu englobe une balise <a> dans une balise <div>


exemple
dans la partie head :

<style type="text/css">
#survol a {display:block;width:243px;
height: 98px;

background-image:url(imageafficherpardefaut.gif);
}
#survol a:hover{display:block;width:243px;
height: 98px;

background-image:url(imageaupassagedelasouris.jpg);
}
img{
border:0;
}
</style>

et dans la page

<body >
<div id="survol"><a href="#"></a></div>
</body>


et ça marche !
a plus

tu remet les dimension de ton image a la place de celle que j'ai indiquer, a propos tu peut encore mettre un texte sur ton image, voir une balise img avec un gif transparent, laisse ton imagination faire !

j'ajoute ici pour enlever vos doutes le code complet de la page que vous pourrez tester:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br>
<!-- declaration du doctype, ici une feuille codée en xhtml -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- la langue de la page -->
<head>
<!-- l'entete du document dans lequel peuvent figurer plusieurs
balises qui renseignent sur le contenu du document, comme le titre, le clavier/langue

utiliser, le "css", etc.
Ces informations ne seront pas affichées excepter pour le titre qui apparaitra dans la

barre du navigateur -->
<title>nom de votre page ou site web</title>
<!-- le titre -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<!-- encodage des caracteres, ici occidental -->
<!-- portions dans laquelle ont declare les styles -->
<style type="text/css">
#survol a,#survol1 a, #survol2 a {
display:block;
width:243px;
height: 98px;
text-decoration:none;
background-image:url(http://gcyrillus.free.fr/tructuto/tutokit/aspectvide.JP...);

}
#survol a:hover, #survol1 a:hover, #survol2 a:hover{
display:block;width:243px;
height: 98px;
background-image:url(http://gcyrillus.free.fr/tructuto/tutokit/aspectvidecol...);
}
img{border:0;}
</style>
</head><!-- fin des informations concernant la pages -->
<body ><!-- contenu visible de la page -->
<p>Il est encore possible d'ajouter un gif transparent dans la balise <a> et, ou du

texte</p>
<div id="survol"><a href="#"></a></div>
<div id="survol1"><a href="#"><br/>   et hop un joli texte<br/>heu, juste du

texte !</a></div>
<div id="survol2"><a href="#"><br/>   une image : <img

src="http://www.infos-du-net.com/images/menu/compte.gif" alt="une

image"/><br/>            &nb

sp; 
et une autre !<img src="http://www.infos-du-net.com/images/menu/deco.gif" alt="une

image"/></a></div>
</body></html><!-- fin du document -->
27 Mai 2005 19:02:52

Ah ouais, pas con ! ;-)
8 Novembre 2008 00:31:13

salut tout le monde! j'aimerai savoir comment déplacer un texte au survol de la souris c'est pour donner un style a mon tableau car la il est vraiment pourri

J'ESPERE QUE QUELQU'UN POURRA ME DONNER LE CODE (sans trop de difficulté dans le code car je suis un débutant ;)  )

merci d'avance a mon sauveur de mon tableaux !!!
4 Janvier 2009 21:49:58

Rennou a dit :
Bien sûr :

<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />

image1 : normale
image2 : sulvolée
image3 : enfoncée




Merci pour le tuyau, mais si je place deux images interactives, ça ne marche plus ... que dois-je taper entre chaque bloc pour les rendre indépendants et actifs ?
EA
a b L Programmation
4 Janvier 2009 21:56:53

Pour les 2 dernier posts, il faut appeler des fonctions javascript (sur le onmouseover par exemple) dans laquelle on peut par exemple modifier le style d'un objet (comme faire varier la taille de la police).
5 Janvier 2009 17:18:32

CRicky a dit :
Pour les 2 dernier posts, il faut appeler des fonctions javascript (sur le onmouseover par exemple) dans laquelle on peut par exemple modifier le style d'un objet (comme faire varier la taille de la police).



Merci, je m'amuse comme un gamin avec ces images interactives.
Autre question, sur le onmousedown peut-on envoyer un lien ?
Si ouiv merci (par avance) de donner la formule magique.
ElieA
a b L Programmation
5 Janvier 2009 19:49:28

Tu peux toujours faire une redirection avec window.location.replace("tonlien")
2 Mars 2009 23:16:47

Salut tout le monde,

même problème mais avec une subtilité,
Est-il possible de changer une autre image que celle qu'on survole à la souris ?

je m'explique :
j'ai une image principale et je voudrais que cette image-là varie en survolant une autre sans que celle qui est survolée ne soit modifiée.

dans ce cas, la taille des images devrait-elle également être identique ?

Merci d'avance
a b L Programmation
3 Mars 2009 20:24:48

Tu crées une fonction javascript (appelée au survol d'une image) dans laquelle tu modifie l'autre image.
4 Mars 2009 09:49:29

sinon, tu crois que c'est possible en CSS aussi ?
et pour la taille des images dans tout ça ?

j'tape un lien vers le site du zéro qui massacre en passant ;) 
http://www.siteduzero.com
8 Juin 2012 18:37:28

Bonjour,
J'ai utilisé le tuto pour faire un "ascenseur" ici et j'ai un peu modifié le code de Rennou et sa donne sa :
  1. <div class="ascenseur"><br/>
  2. <a href="#top"><img src="http://i42.servimg.com/u/f42/16/22/92/15/haut11.png" name="image" onmouseover="image.src='http://i42.servimg.com/u/f42/16/22/92/15/32677410.jpg'" onmouseout="image.src='http://i42.servimg.com/u/f42/16/22/92/15/haut11.png'" onmousedown="image.src='http://i42.servimg.com/u/f42/16/22/92/15/haut11.png'" /></a><br/><br/>
  3. <a href="#bottom"><img src="http://i42.servimg.com/u/f42/16/22/92/15/bas11.png" name="image2" onmouseover="image.src='http://i42.servimg.com/u/f42/16/22/92/15/2325d610.jpg'" onmouseout="image.src='http://i42.servimg.com/u/f42/16/22/92/15/bas11.png'" onmousedown="image.src='http://i42.servimg.com/u/f42/16/22/92/15/bas11.png'" /></a><br/><br/>
  4. </div>
mais celui ci ne marche pas correctement : la flèche du haut marche très bien mais quand on passe la souris sur la flèche du bas, c'est la flèche du haut qui change. Pourriez vous me corriger mon code ou m'en donner un autre qui marche aussi plz.
PS : c'est pour les templates de forumactif
8 Juin 2012 21:15:47


Salut, j'me disais waaa, j'ai une réponse après 3 ans :p  mais même pas mdrrrr

Ton code est correct, tu dois juste remplacer "image.src" de ta 2e ligne par "image2.src

sinon forcément, la source entre en conflit avec l'autre vu que pointe vers le même nom...
9 Juin 2012 08:23:56

Sa marche merci beaucoup
11 Juin 2012 11:25:57

en faite mon changement d'image marche mais l'image qui remplace la première n'est pas visible et je souhaiterai savoir si c'est pas le format de l'image (qui un .psd car j'ai modifié la première avec photoshop) ou tout simplement mon code (sachant que j'ai mis un lien texte sur l'image) ci-dessous :
j'ai d'abord mis dans le HEAD :
  1. <script language="javascript">
  2. if(document.images)
  3. {
  4. i377490 = new image;
  5. i377490 = "Bienvenue_files/Button7.psd";
  6. }
  7. </script>


puis dans le BODY:
  1. <div style="height: 42px; width: 108px; height: 42px; left: 740px; position: absolute; top: 89px; width: 108px; z-index: 1; " class="tinyText style_SkipStroke_6">
  2. <img src="Bienvenue_files/Button7.png" alt="" style="border: none; height: 42px; width: 108px" name="i377490">
  3. </div>
  4.  
  5. <div id="id1" style="height: 45px; left: 755px; position: absolute; top: 95px; width: 19px; z-index: 1" class="style_SkipStroke_4 shape-with-text">
  6. <div class="text-content style_External_98_36 vertical-align-middle-middlebox" style="padding: 0px; ">
  7. <div class="style_1 vertical-align-middle-innerbox">
  8. <p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style_6">
  9. <a href="Lentreprise.html" style="text-decoration: none" onMouseover="i377490.src='Bienvenue_files/Button7.psd'" onMouseout="i377490.src='Bienvenue_files/Button7.png'">
  10. <section>
  11. <font color="black" onMouseover="this.style.color='white'" onMouseout="this.style.color='black'" face="Arial" size="3">
  12. Contacter
  13. </font>
  14. </section>
  15. </a>
  16. </p>
  17. </div>
  18. </div>
  19. </div>


Merci d'avance.
a c 232 L Programmation
11 Juin 2012 15:27:30

Tu ne peux pas afficher un fichier .psd dans un navigateur.
Enregistre le fichier sous un format compatible (.gif, .png, .jpg...)
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS