• Image changeante au passage de la souris

    Par rimoussitta dans Astuces le 5 Septembre 2012 à 00:07

    •Au début :
    Donc au début voila le code HTML de base :

    <a onmouseover="document.img_1.src='Ici l'adresse de l'image qui change au passage de la souris';" onmouseout="document.img_1.src='Adresse de l'image principale';"><img class="img" name="img_1" src="Répéter la même adresse de l'image principale" </a>



    Code d'exemple :

    Et

    <a onmouseover="document.img_1.src='http://img11.hostingpics.net/pics/735174Exemple22.png';" onmouseout="document.img_1.src='http://img11.hostingpics.net/pics/436100Exemple1.png';"><img class="img" name="img_1" src="http://img11.hostingpics.net/pics/436100Exemple1.png" </a>



    Même code + lien quand on clique sur l'image :

    <a href="http://life-in-lapino-fr.eklablog.fr"
    onmouseover="document.img_1.src='http://img11.hostingpics.net/pics/735174Exemple22.png';" onmouseout="document.img_1.src='http://img11.hostingpics.net/pics/436100Exemple1.png';"><img class="img" name="img_1" src="http://img11.hostingpics.net/pics/436100Exemple1.png" </a>



    •Bonus (Je suis gentille ) :
    Alors une petite astuce pour faire un texte qui est ombré au passage de la souris :
    1-Il nous faut :
    Texte simple :


    Texte ombré :


    Ps : Pour avoir un texte ombré il faut savoir utiliser Gimp ou un logiciel permettant d'ajouter une ombre à un texte.

    Résultat final :

    <a onmouseover="document.img_1.src='http://img11.hostingpics.net/pics/744070Exemple66.png';" onmouseout="document.img_1.src='http://img11.hostingpics.net/pics/768396Exemple55.png';"><img class="img" name="img_1" src="http://img11.hostingpics.net/pics/768396Exemple55.png" </a>


    Voila j’espère que je vous ai aidé.
     


    Tags Tags : , , , ,

  • Commentaires

    1
    manolitasse
    Mercredi 5 Septembre 2012 à 00:59

    Ouai super ! merci la lupat je savaismais j'ai quand meme apris

    Répondre
    2
    chouky
    Dimanche 12 Juin 2016 à 17:18

    ses tros bien lapino

     

    Répondre
    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :