[code HTML] image changeante avec la souris

Tangee Messages postés 12 Statut Membre -  
antoine9298 Messages postés 101 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour!!

Je cherche comment faire pour que, lorsque dans mon site, la souris passe sur une image, celle-ci change... Je ne sais pas vraiment comment expliquer ça j'espere que ovus voyez ce que je veux dire!!

Je pense qu'il y a un code HTML pour ça, meric à ceux qui sauront éclairer ma lanterne!!

11 réponses

  1. Ssylvainsab Messages postés 2892 Statut Modérateur 825
     
    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
    27
  2. ginji
     
    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 ^^
    18
    1. Stephane Fournier
       
      LE problème est lorsque j'en ai plusieurs ex: boutons Menu ça ne fonctionne pas.
      Merci
      Stéphane
      0
    2. Bigayoum
       
      Merci ginji! tu as la réponse la plus claire...ça fait plaisir de tout comprendre du premier coup d'oeil...
          
      0
    3. romaric88 Messages postés 1 Statut Membre
       
      merci pr t sa
      0
    4. Neals
       
      @ 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.
      0
    5. Gekscorsez
       
      Bonjour à tous, juste pour vous dire que j'ai tester la technique qui marche très bien par contre la réctification de mettre1 puis 2 puis 3 n'est pas valable. car chez moi cela marche seulement si je met 1 partout.

      En tout cas merci ginji et bonne continuation à tous
      0
  3. CousinHube Messages postés 44 Statut Membre 10
     
    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
    6
  4. bill-le-retour Messages postés 33 Statut Membre 4
     
    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>
    4
    1. TanguyPass Messages postés 32 Statut Membre
       
      Bonjour,
      Merci beaucoup pour cette formule très simple
      C'est agréable de trouver des infos aussi facilement!
      0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. Pantagruel Messages postés 93 Statut Membre 27
     
    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.
    2
    1. sadki
       
      salut, je viens de lire ton message, je suis entrain de créer un myspace et j'ai besoin de la fonction mouseover,

      les myspace n'accepte pas le javascript, c'est la raison pour laquelle ta méthode m'interesse beaucoup, peut tu m'en dire un peu plus dessu merci

      www.myspace.com/sadkidesign
      0
  7. Ssylvainsab Messages postés 2892 Statut Modérateur 825
     
    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
    1
    1. antoine9298 Messages postés 101 Date d'inscription   Statut Membre Dernière intervention   6
       
      attention! la syntaxe pour la propriété cursor est du type:
      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
      0
  8. kai.hei
     
    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!)
    1
  9. Tangee Messages postés 12 Statut Membre 2
     
    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!
    0
  10. jojo
     
    slt je veux des images qui exprimée que un mémoire parler à système de vote
    0
  11. Melvin; Messages postés 3 Statut Membre
     
    C'est simple, c'est un rollover, chercher sur google :)
    0
  12. Mortallys Messages postés 203 Statut Membre 16
     
    Merci CousinHube pour ta solution j'ai été voir ton codage js super perso sa marche niquel pour moi aussi !!
    0