Eklablog

Editer l'article Suivre ce blog

Administration + Créer mon blog

MENU

Connexion + Créer mon blog Editer l'article Suivre ce blog

Partager

Image changeante au passage de la souris

code, document, image, img, src

05.09.2012 …

Par rimoussitta

•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é.

« Article précédent Article suivant »

Retour à l'accueil

Partager cet article

Repost0

Commenter cet article

C

chouky

12/06/2016 17:18

ses tros bien lapino<br />

M

manolitasse

05/09/2012 00:59

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