Générateurs
Bannières animéesImages gifs à effet gratuitBoutons images htmlTitres Web 2.0Badges Web 2.0Signatures pour forumsImages perso pour forums (avatar)Effets et filtres sur imageCartes Google MapsRibbons (Bandeaux) web 2.0Boutons de partage bookmark
Référencement
Top liste/sitePageRank GoogleCe que voient les moteurs de rechercheExtracteur de liensEntêtes HTTPBalises meta tagsFlash
Lecteur de vidéos flv, mov... en flashMenu flash Web 2.0Lecteur de musique MP3 en flashBoutons flashHorloges Flash analogique et numetiquesCode flashServices
Livre d'orNews (Nouvelles)Tchat AjaxSondagesModule de commentairesVotes (Module de notation)Compteurs
Compteur Global gratuit sans inscriptionCompteur de visiteurs sans inscriptionCompteur de visites sans inscriptionCompteur de pages vues sans inscriptionCompteur de clicsCompteur de connectés (Live)
Image qui change au passage de la souris(rollover) |
|---|
Image qui change au passage de la souris(rollover)Note : 4.5/5 (1 vote) Derniéres modifications : 03/04/2009 à 23:04:52 Mots-Clés : Image change passage souris bouton rollover detecter passage onmouseover onmouseout event dans ce tutoriel, je vais simplement, vous montrer comment faire une image qui change au passage de la souris sur celle-ci. pour réaliser ce script, il faut avoir 2 image, une qui vas être affichée normalement et une qui vas être affichée lors du passage de la souris sur la première. voici les images que l'on vas utiliser:   Voici le code: image_change_souris.html Code: (X)html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Image qui change au passage de la souris</title> </head> <body> <img src="image_1.png" alt="Image" onmouseover="javascript:this.src='image_2.png';" onmouseout="javascript:this.src='image_1.png';" /> </body> </html> c'est tout! j'espère que vous avez aimé ce tutoriel. merci Scripts et tutoriaux similaires à celui ci:
CommentairesAjouter un commentaireLes commentairesEnvoyé par PereSonne le 09/10/2009 à 18:08:03
Dit, c'est possible de faire ça avec du texte ?
Si oui, comment ? Envoyé par BillyBl le 05/12/2009 à 23:59:36
C'est possible que les 2 images se chargent lors du chargement du site ? pour éviter que ceux qui ont une petit connexions attendent que ça charge.
merci d'avance Envoyé par ybouane le 12/12/2009 à 04:51:29
Bonjour,
@PereSonne: Voici un code pour faire ce que tu veut: <span onmouseover="javascript:this.innerHTML='Mon texte #2';" onmouseout="javascript:this.innerHTML='Mon texte #1';">Mon texte #1</span> @BillyBl: Il suffit de précharger les images, voici un tutoriel: http://www.supportduweb.com/scripts_tutoriaux-code-source-30-precharger-des-images-en-javascript-et-detecter-la-fin-du-prechargement.html Merci :) Envoyé par Xalie le 17/06/2010 à 17:16:11
Bonjour ! Je suis une debutante en informatique et ça fait longtemps que je cherchais ce tuto! Le pb c'est que je n'aarive pas a l'appliquer sur mon blog (sur over-blog)... je clique sur htlm de ma page et je copie a l'interieur le code sité plus haut... le pb c'est que rien ne s'affiche, ou dois-je remplacer les adresse de mes image dans le code? désolé de déranger mais je suis une vraie nulle en informatique ^^'''
Envoyé par Xalie le 17/06/2010 à 17:20:54
C'est tout bon j'ai enfin reussi ^^ ralala chui pas très douée xD MERCI POUR CE TUTO !! =D
Envoyé par edFaUEiGiZDwF le 04/06/2011 à 15:57:36
Wow, that’s a really clever way of thkining about it!
Envoyé par LeTrucker le 12/01/2012 à 23:38:31
Merci beaucoup :)
Envoyé par julwkqgj le 24/01/2012 à 12:30:02
20
|
