[code HTML] image changeante avec la souris

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 Sylvain

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!

Ah je vois.

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 Sylvain

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