[code HTML] image changeante avec la souris
Fermé
Tangee
Messages postés
12
Date d'inscription
lundi 13 novembre 2006
Statut
Membre
Dernière intervention
11 mai 2007
-
13 nov. 2006 à 21:34
antoine9298 Messages postés 101 Date d'inscription vendredi 5 avril 2013 Statut Membre Dernière intervention 23 décembre 2014 - 23 déc. 2014 à 02:53
antoine9298 Messages postés 101 Date d'inscription vendredi 5 avril 2013 Statut Membre Dernière intervention 23 décembre 2014 - 23 déc. 2014 à 02:53
A voir également:
- [code HTML] image changeante avec la souris
- Quelle touche pour débloquer la souris ? - Guide
- Image iso - Guide
- Code asci - Guide
- Editeur html - Télécharger - HTML
- Code puk bloqué - Guide
11 réponses
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
14 nov. 2006 à 11:34
14 nov. 2006 à 11:34
Ah je vois.
Tu peux faire ca en CSS avec les images de fond.
Html
CSS
Mais comme IE ne prend en compte le hover que sur des liens...
En JS je pense que ceci devrait fonctionner :
<img src="image.jpg" style="width:16px;height:16px;" alt="Image" onfocus="this.src='image_de_fond.jpg';this.style='width:dimensions;height:dimensions;';" />
Voila, essaye et dis moi si ca marche ;)
Il y a aussi pas mal de tutos sur Alsacreations et autres.
a plus
Tu peux faire ca en CSS avec les images de fond.
Html
<div id="image"></div>
CSS
div#image{
background:url(image_de_fond.png);
width:taille de l'image;
height:taille de l'image;
}
div#image:hover{
/*les mêmes choses mais quand on passe la souris dessus*/
}
Mais comme IE ne prend en compte le hover que sur des liens...
En JS je pense que ceci devrait fonctionner :
<img src="image.jpg" style="width:16px;height:16px;" alt="Image" onfocus="this.src='image_de_fond.jpg';this.style='width:dimensions;height:dimensions;';" />
Voila, essaye et dis moi si ca marche ;)
Il y a aussi pas mal de tutos sur Alsacreations et autres.
a plus
Ben voila tangee moi j'ai eu le meme probleme que toi quand j'ai crée mon site !
Pour changer l'image de tons ite lorsque ton curseur passe dessus il te suffit d'utilisé du javascript : très simple a utiliser !
<a href="page.html"
onMouseOver="document.img_1.src='image.jpg';" <------ ici tu met l'image que tu veux faire aparaitre lorsque ta souris passe dessus
onMouseOut="document.img_1.src='image2.jpg';"> <------ ici l'image lorsque ton ta souris n'est plus sur l'image (sinon la 1er image reste)
<img class="img" name="img_1" src="image/boutonacc.jpg"> </a><----- ici l'image par default ^^
Pour changer l'image de tons ite lorsque ton curseur passe dessus il te suffit d'utilisé du javascript : très simple a utiliser !
<a href="page.html"
onMouseOver="document.img_1.src='image.jpg';" <------ ici tu met l'image que tu veux faire aparaitre lorsque ta souris passe dessus
onMouseOut="document.img_1.src='image2.jpg';"> <------ ici l'image lorsque ton ta souris n'est plus sur l'image (sinon la 1er image reste)
<img class="img" name="img_1" src="image/boutonacc.jpg"> </a><----- ici l'image par default ^^
romaric88
Messages postés
1
Date d'inscription
jeudi 9 septembre 2010
Statut
Membre
Dernière intervention
9 septembre 2010
9 sept. 2010 à 16:31
9 sept. 2010 à 16:31
merci pr t sa
@ Stephane
en fait je vien de trouver : il faut changer le "1" dans le code ici :
<a href="page.html"
onMouseOver="document.img_1.src='image.jpg';" <------ ici tu met l'image que tu veux faire aparaitre lorsque ta souris passe dessus
onMouseOut="document.img_1.src='image2.jpg';"> <------ ici l'image lorsque ton ta souris n'est plus sur l'image (sinon la 1er image reste)
<img class="img" name="img_1" src="image/boutonacc.jpg"> </a><----- ici l'image par default ^^
il faut mettre 1, puis 2, puis 3, etc.
en fait je vien de trouver : il faut changer le "1" dans le code ici :
<a href="page.html"
onMouseOver="document.img_1.src='image.jpg';" <------ ici tu met l'image que tu veux faire aparaitre lorsque ta souris passe dessus
onMouseOut="document.img_1.src='image2.jpg';"> <------ ici l'image lorsque ton ta souris n'est plus sur l'image (sinon la 1er image reste)
<img class="img" name="img_1" src="image/boutonacc.jpg"> </a><----- ici l'image par default ^^
il faut mettre 1, puis 2, puis 3, etc.
CousinHube
Messages postés
44
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
6 juillet 2008
10
26 nov. 2007 à 21:24
26 nov. 2007 à 21:24
Pour mon site http://www.de-enchante.fr j'ai procédé de la manière suivante :
J'ai inséré l'applet suivant dans la balise HEAD :
<script language="javaScript">
<!--
image1=new Image
image1.src="Première image à afficher"
image2=new Image
image2.src="Deuxième image à afficher"
//-->
</script>
Puis dans la balise BODY :
<ONMOUSEOVER="document.lien2.src=image2.src"
ONMOUSEOUT="document.lien2.src=image1.src">
<IMG NAME="lien2" SRC="Première image à afficher" BORDER="0" WIDTH="130" HEIGHT="57" ALIGN="RIGHT" >
J'ai utilisé la même astuce sur mon autre site http://www.hubert-antz.net dans les pages de la construction mécanique et cela marche très bien.
Espérant avoir été util...
Informatiquement à toi
Cousin Hube
J'ai inséré l'applet suivant dans la balise HEAD :
<script language="javaScript">
<!--
image1=new Image
image1.src="Première image à afficher"
image2=new Image
image2.src="Deuxième image à afficher"
//-->
</script>
Puis dans la balise BODY :
<ONMOUSEOVER="document.lien2.src=image2.src"
ONMOUSEOUT="document.lien2.src=image1.src">
<IMG NAME="lien2" SRC="Première image à afficher" BORDER="0" WIDTH="130" HEIGHT="57" ALIGN="RIGHT" >
J'ai utilisé la même astuce sur mon autre site http://www.hubert-antz.net dans les pages de la construction mécanique et cela marche très bien.
Espérant avoir été util...
Informatiquement à toi
Cousin Hube
bill-le-retour
Messages postés
5
Date d'inscription
dimanche 14 juin 2009
Statut
Membre
Dernière intervention
13 mars 2012
4
23 mars 2011 à 17:43
23 mars 2011 à 17:43
Comme dit Ssylvainsab,
Css
div#image{
background:url(Votre image); /*Votre première image ^^*/
background-repeat: no-repeat; /*Empêcher la répétition de l'image*/
width:194; /*Largeur*/
height:87; /*hauteur*/
}
div#image:hover{
background:url(VOTRE image); /*les mêmes choses mais quand on passe la souris dessus*/
background-repeat: no-repeat; /*Le meme que l'autre ^^*/
}
Code <div id="image"></div>
Css
div#image{
background:url(Votre image); /*Votre première image ^^*/
background-repeat: no-repeat; /*Empêcher la répétition de l'image*/
width:194; /*Largeur*/
height:87; /*hauteur*/
}
div#image:hover{
background:url(VOTRE image); /*les mêmes choses mais quand on passe la souris dessus*/
background-repeat: no-repeat; /*Le meme que l'autre ^^*/
}
Code <div id="image"></div>
TanguyPass
Messages postés
26
Date d'inscription
samedi 29 octobre 2011
Statut
Membre
Dernière intervention
7 avril 2014
Modifié par TanguyPass le 21/01/2012 à 18:33
Modifié par TanguyPass le 21/01/2012 à 18:33
Bonjour,
Merci beaucoup pour cette formule très simple
C'est agréable de trouver des infos aussi facilement!
Merci beaucoup pour cette formule très simple
C'est agréable de trouver des infos aussi facilement!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Pantagruel
Messages postés
88
Date d'inscription
mardi 29 janvier 2008
Statut
Membre
Dernière intervention
15 janvier 2009
27
30 mai 2008 à 19:54
30 mai 2008 à 19:54
Pour ma part, j'ai réussi en contournant un peu les règles et en n'utilisant que du html et du css. J'ai créé une image transparente de type .png de la même taille que l'image que je voulais afficher. J'ai mis comme background de la section de cette image l'image que je voulais afficher et, dans mon css, j'ai introduit
#monimage:hover
{ background-image: url("l'image que je voulais faire apparaître au passage de la souris");
}
C'est un peu forcé comme méthode, mais ça fonctionne très bien et tout le monde n'y voit que du feu s'ils ne se mettent pas le nez dans mon code. Comme ça, pas besoin de java script ou de flash, juste du html/css.
#monimage:hover
{ background-image: url("l'image que je voulais faire apparaître au passage de la souris");
}
C'est un peu forcé comme méthode, mais ça fonctionne très bien et tout le monde n'y voit que du feu s'ils ne se mettent pas le nez dans mon code. Comme ça, pas besoin de java script ou de flash, juste du html/css.
Ssylvainsab
Messages postés
2884
Date d'inscription
samedi 29 juillet 2006
Statut
Modérateur
Dernière intervention
15 août 2020
825
13 nov. 2006 à 22:15
13 nov. 2006 à 22:15
Bonsoir.
C'est très simple a faire en CSS, avec la propriété cursor :
Code html :
<img id='une_image' src="image.png" alt="image" />
Code CSS :
img#une_image{cursor:xxxx}
Il y a plusieurs curseurs disponibles :
http://blog.oli-web.com/?2006/04/18/48-les-curseurs-en-css
Tu peux aussi créer tes propres curseurs, mais pour ca il faut un logiciel qui crée des fichiers .ani
Exemple de CSS:
cursor:help;/*un curseur avec un point d'interrogation*/
cursor:'mon_curseur.ani';/*le curseur que j'ai crée*/
Pour le chemin du curseur crée, il se fait par rapoort a l'emplacement du CSS.
Je trouve que le plus pratique est d'indiquer une valeur a partir de la racine.
a plus
C'est très simple a faire en CSS, avec la propriété cursor :
Code html :
<img id='une_image' src="image.png" alt="image" />
Code CSS :
img#une_image{cursor:xxxx}
Il y a plusieurs curseurs disponibles :
http://blog.oli-web.com/?2006/04/18/48-les-curseurs-en-css
Tu peux aussi créer tes propres curseurs, mais pour ca il faut un logiciel qui crée des fichiers .ani
Exemple de CSS:
cursor:help;/*un curseur avec un point d'interrogation*/
cursor:'mon_curseur.ani';/*le curseur que j'ai crée*/
Pour le chemin du curseur crée, il se fait par rapoort a l'emplacement du CSS.
Je trouve que le plus pratique est d'indiquer une valeur a partir de la racine.
a plus
antoine9298
Messages postés
101
Date d'inscription
vendredi 5 avril 2013
Statut
Membre
Dernière intervention
23 décembre 2014
6
23 déc. 2014 à 02:53
23 déc. 2014 à 02:53
attention! la syntaxe pour la propriété cursor est du type:
il faut obligatoirement spécifier un curseur par défaut sinon la propriété n'est pas accepté...
de plus les .ani sont loin d'être universel (IE only) il faut donc au moins avoir un .cur ou même un .gif (non animé) au cas où...
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propri%C3%A9t%C3%A9_cursor
cursor: url("moncurseur.ani"), url("moncurseur.cur"), help;
il faut obligatoirement spécifier un curseur par défaut sinon la propriété n'est pas accepté...
de plus les .ani sont loin d'être universel (IE only) il faut donc au moins avoir un .cur ou même un .gif (non animé) au cas où...
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propri%C3%A9t%C3%A9_cursor
Salut!
Je ne comprends pas très bien à ce que vous raconter mais moi ce que je voudrais c'est pouvoir afficher des images sur hi5, pas dans les albums mais dans la section "moi" ou encore dans la section "centre d'intérêts" par exemple mais je sais pas comment faire!!! Pouvez-vous m'aider, SVP? Merci d'avance!
(J'crois qu'il faut le code de l'image ou du truc du genre, j'sais pas trop!)
Je ne comprends pas très bien à ce que vous raconter mais moi ce que je voudrais c'est pouvoir afficher des images sur hi5, pas dans les albums mais dans la section "moi" ou encore dans la section "centre d'intérêts" par exemple mais je sais pas comment faire!!! Pouvez-vous m'aider, SVP? Merci d'avance!
(J'crois qu'il faut le code de l'image ou du truc du genre, j'sais pas trop!)
Tangee
Messages postés
12
Date d'inscription
lundi 13 novembre 2006
Statut
Membre
Dernière intervention
11 mai 2007
2
13 nov. 2006 à 22:21
13 nov. 2006 à 22:21
oups oups!!!
Je me suis mal exprimée...
Ce que je veux, c'est que l'image change quand la souris passe dessus, pas que la souris change de forme...
Je viens de faire plus de recherches et j'ai vu que ça s'appelle le mouseover
Maintenant je galere un peu pour installer ça
merci quand meme!!!!!
bonne soirée!
Je me suis mal exprimée...
Ce que je veux, c'est que l'image change quand la souris passe dessus, pas que la souris change de forme...
Je viens de faire plus de recherches et j'ai vu que ça s'appelle le mouseover
Maintenant je galere un peu pour installer ça
merci quand meme!!!!!
bonne soirée!
Melvin;
Messages postés
3
Date d'inscription
samedi 13 juin 2009
Statut
Membre
Dernière intervention
13 juin 2009
13 juin 2009 à 14:10
13 juin 2009 à 14:10
C'est simple, c'est un rollover, chercher sur google :)
Mortallys
Messages postés
186
Date d'inscription
dimanche 28 septembre 2008
Statut
Membre
Dernière intervention
19 février 2018
16
7 déc. 2009 à 00:25
7 déc. 2009 à 00:25
Merci CousinHube pour ta solution j'ai été voir ton codage js super perso sa marche niquel pour moi aussi !!
