begin process at 2010 02 10 10:15:57
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > IMAGE QUI CHANGE AU SURVOL DE LA SOURIS

IMAGE QUI CHANGE AU SURVOL DE LA SOURIS


 Information sur la source

Note :
4 / 10 - par 8 personnes
4,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :image, imagesurvol, survol, imagequichange, imagequichangeausurvoldelasouris Niveau :Débutant Date de création :05/06/2006 Date de mise à jour :13/06/2006 07:47:30 Vu :30 395

Auteur : nexan44

Ecrire un message privé
Site perso
Commentaire sur cette source (22)
Ajouter un commentaire et/ou une note

 Description

Ce code html simple permet de substituer une image à une autre au survol de la souris sur celle-ci.

Source

  • <a href="LIEN.htm" target="_blank" onmouseover="document.NOM.src='"IMAGE2.gif"';" onmouseout="document.NOM.src='"IMAGE1.gif"';"><img src="IMAGE1.gif" name="NOM" border=0></a>
<a href="LIEN.htm" target="_blank" onmouseover="document.NOM.src='"IMAGE2.gif"';" onmouseout="document.NOM.src='"IMAGE1.gif"';"><img src="IMAGE1.gif" name="NOM" border=0></a>


 Conclusion

LIEN.htm = la page ou le visiteur sera redirigé aprés le clic
_blank = le type d'ouverture de cette page

<img src="IMAGE1.gif" name="NOM" border=0></a> = image d'origine (au chargement de la page) (la même que onmouseout)
onmouseover=document.NOM.src='"IMAGE2. gif"' = image au survol
onmouseout=document.NOM.src='"IMAGE1.gif"'= image lorsque la souris sort (la même que l'image d'origine)

name="NOM" = les trois NOM doivent porter le même nom si vous voullez que l'image change au survol de la souris.

border = 0 (ou 1) pour ajouter une bordure à l'image (inutile !!)


 Historique

05 juin 2006 01:59:15 :
Mise à jour sur l'explication
09 juin 2006 21:37:13 :
Note : je vais bientôt faire un tuto sur la personalisation (couleur fond, taille, police) des champs d'un formulaire (champs, zones de textes, boutons radios, etc...)
13 juin 2006 07:47:30 :
J'espère que j'ai été plus clair sur la description ;

 Sources du même auteur

Source avec Zip CALCULATRICE SIMPLE

 Sources de la même categorie

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Source avec Zip Source avec une capture AFFICHAGE D'IMAGE par kazma
Source avec Zip Source avec une capture DIAPO EN FONDU ENCHAINE par kazma

Commentaires et avis

Commentaire de ImmortalPC le 05/06/2006 13:00:30

Salut,
perso j' aurais fait comme ça :
<a href="mon_lien.html" title="Mon p'tit lien"><img src="image1.jpg" alt="Image ^^" style="border:0px;" onmouseover="this.src='image2.jpg';" onmouseout="this.scr='image1.jpg';" /></a>

@+

Commentaire de nexan44 le 05/06/2006 13:14:05

ouais ça marche aussi

Commentaire de wizard512 le 07/06/2006 20:21:34

J'ai pas envie de passer pour le méchant codeur,
mais ces genre de code a la "hello world" ne servent pas a grand chose...

Commentaire de Swiper le 09/06/2006 10:44:15

Oui mais j'ai respecté votre shéma mais l'image ne redevient pas comme elle etait au début lorsque la souris n'est plus sur l'image.

Commentaire de nexan44 le 09/06/2006 21:32:01

<a href="LIEN.htm" target="_blank" onmouseover="document."nom".src='"image2.gif"';" onmouseout="document."nom".src='"image1"';"><img src="image1".gif name="nom" border=0></a>

il faut bien respecter IMAGE 1 et IMAGE 2 ; l'image 1 est à deux fois dans le code car la première c'est pour indiquer l'image qu'il y a au chargement de la page et la deuxième fois c'est l'image qu'il y a une fois que la souris s'est retirée de l'image (c'est la même image bien sûr ! il ne faut pas changer ou mettre IMAGE 2)

et WIZARD512 ; je débute et puis il faut bien que je mette un code pour être un peu plus actif : à quoi ça sert de s'inscrire si on met pas de codes sources ??

Commentaire de wizard512 le 09/06/2006 22:19:14

lols
Ben a aprendre avant de poster des sources "Hello World", nn tu ne trouve pas ?

Commentaire de chaoul le 12/06/2006 09:06:13

tout le monde n'a pas ton niveau Wiz, il y en a (moi par exemple) qui ont besoin de ce genre de scripts à la "Hello World" ne serait-ce que pour se familiariser avec les syntaxes de languages qu'on ne connait pas encore.
Si le mélange avec les basses classes (sans jeu de mot) ne te plait pas, il faut faire une pétition aux webmasters pour séparer les niveaux dans deux sites.

Commentaire de WildKiller le 12/06/2006 10:01:30

Entierement d'accore avec CHAOUL mais je pense qu'il faut mettre les images en cache dans les <head></head> Ce qui nous donne:
"
<head>
<!--
image1= newImage();
image1.src="images/image1.png";
//-->
</head>
"
Voila j'avais le même problème sur mon site et en mettant les images en cache, plus de problèmes ;-)

Ensuite je modif la balise img:
"
<a href=# onmouseover="image2.src='images/image2.png';" onmouseout="image2.src='images/image1.png';"><img src="images/image1.png" title="titre..." name="image1" /></a>
"

Voila je pense que c'est bon

Commentaire de aze555666 le 12/06/2006 15:16:11

Pas la peine de poster pour dire ça. surtout que c'est plus simple avec le code de Immortalpc.
Tanr qu'à faire, met le lien à côté, pour que ton code serve à quelque chose (image qui change au survol d'autre chose que l'image elle même). Mais c'est quelque chose que j'ai déjà fait, et je n'ai pas ressenti le besoin de poster pour ça!

la prochaine fois que tu découvres une fonction javascipt toute faite interessante, garde là pour toi, tout le monde est capable de rechercher dans les dictionnaire.

Commentaire de dvdstory le 12/06/2006 18:51:12

Quelqu"un a deja fait une source avec le meme code sur ce site !!!

Commentaire de puppetmastr le 12/06/2006 21:46:34

euh moi je trouve ca sympa comme code,

mais le pire c'est j'arrive pas a le faire fonctionner (aucun des 3 d'ailleurs indique dans cette page).
Faut-il mettre quelque chose de plus quelque part ? et quand tu dit qu'il faut enlever les " ", oui ok mais lesquels il y en a tellement ??? tous ???
merci de votre aide

Commentaire de dvdstory le 12/06/2006 22:21:50

Si ta envie de voir le code en fonctionnemant avec des vrai valeur, je l'ai utilisé sur
http://britneyspears.unrealnetwork.net

Commentaire de puppetmastr le 13/06/2006 10:04:17

merci DVDSTORY, c'est plus clair et ca marche ;)

Commentaire de vincjava le 03/09/2007 21:26:38

Attention ImmortalPC, ton code comporte une légère erreur dans le onMouseOut ( scr au lieu de src )

<a href="mon_lien.html" title="Mon p'tit lien">
<img src="image1.jpg" alt="Image ^^" style="border:0px;" onmouseover="this.src='image2.jpg';" onmouseout="this.src='image1.jpg';" />
</a>

A prendre en compte pour les débutants ^-^

Commentaire de ju0123456789 le 11/01/2008 17:14:10

hello everybody !

Jsute une petite remarque, ce code ne marche pas sur firefox ! je recherche un code qui marche sous mozilla, firefox, opéra et safari SVP !!
Car, pour IE, c'est bien, mais de + en + de gens utilisent Firefox.

Si qqn a uen idée je suis prenneur :)

Merci d'avance !!

Commentaire de kazma le 14/05/2008 20:26:19 2/10

trop basic

Commentaire de kdence le 01/10/2008 01:49:41

ImmortalPC ton code est presque bien!!!
<a href="mon_lien.html" title="Mon p'tit lien"><img src="image1.jpg" alt="Image ^^" style="border:0px;"
onmouseout="this.scr='image1.jpg';" onmouseover="this.src='image2.jpg';"  /></a>
Mais il marche mieux comme ça. il faut juste inverser onmouseout et onmouseover. Parce que avant l'image changeait quand tu passais la souris dessus mais elle ne se remettais pas normalement quand tu l'enlevais

Commentaire de ImmortalPC le 01/10/2008 18:25:21

Salut !
la position du onmouseout par rapport à onmouseover n' a pas d' importance ( à moins qu' il y est une nouvelle normme ^^ ).
Néanmoins le mieux reste d' utiliser le css :-)

@+

Commentaire de willowtiamo le 09/10/2008 17:22:05

Bonjour,
alors moi rien ne fonctionne pourtant c'est le même code j'ai fait :
<a href="Untitled-3.html" target="_blank" onmouseover="this.src='VR_gabin.jpg';" onmouseout="this.src='V_gabin.jpg';"><img src="V_gabin.jpg" name="NOM" border=0 /></a>

et rien ne se passe :-S

Commentaire de ImmortalPC le 09/10/2008 18:27:34

Salut !

Normal que ton code ne marche pas, tu essaies de changer le src d' un lien ^^
essaie ce code :<a href="Untitled-3.html" target="_blank"><img src="V_gabin.jpg" onmouseover="this.src='VR_gabin.jpg';" onmouseout="this.src='V_gabin.jpg';" name="NOM" style="border:0px;" /></a>

@+

Commentaire de Tithomme75 le 03/11/2008 21:54:23

Bonjour à tous!

Petite question, le code marche pour le premier bouton de mon site mais pas pour le second.
Y a t il des choses spécifiques à faire lorsque l'on veut plusieurs survols différents?
Merci d'avance.

Commentaire de Tithomme75 le 03/11/2008 22:00:26 8/10

Bonjour à tous,

Une petite question pour vous, j'ai réussi à créer via le code html de ma page un survol sur l'un des bouton de mon menu mais ne parviens pas à le créer pour les autres (sachant que les images de bases et de survol changent pour chaque bouton de mon menu (6 au total (soit normalement 12 images (avec le survol)...
Merci de votre aide.

Adrien

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

2 actions sur survol d'une image/bouton [ par metis15 ] Bonjour,je ne trouve pas comment associer deux fonction dns un script, il s'agit de changer l'image d'un bouton (rollover clasique) + faire appara&#23 Texte au survol d'une image [ par Shagrath69 ] Bonjour à tous,pour le site que je suis en train de développer j'ai besoin d'un texte qui s'affiche au survol d'une image.Ne connaissant rien au JS, j image qui apparait au survol d'un lien [ par tchiptchip ] bonjour,je suis photographe depuis 20 ans, et depuis tres peu je me suis mis à la création de sites internetje commence par un tres gros truc(dessins menu déroulant sur image [ par JackNUMBER ] bonjour !Je cherche un moyen de faire un menu qui se déroule lors du survol d'une image, si possible avec une image map.en gros mon menu sera une imag [Req] Clique au survol d'une image [ par Razox ] Bonjour a vous tous, tout d'abord je tiens a remercier le Staff pour avoir concu un site aussi complet et enrichissant !Ensuite j'espose mon problème image lors du survol d un mot????? [ par mantagte ] bonjour je suis debutant sur les forums et je cherche comment lors du survol d un mot une imageapparait pour visualiser se mot merci pour tout Découpe d'une image pour zone survol pour musique [ par vincecb ] Est ce que quelqu'un peut m'aider pour mapper une image avec the gimp par exemple .  je dois effectuer 6 zones sur une image pour que ces zones devien afficher une image au survol d'une zone map [ par veroq ] bonjour à tous,je dois faire un organigramme avec les têtes des gens dans des bulles et lorsque l'on passe la souris sur une bulle, une image un peu p miniature au survol d'un texte [ par zut69 ] <td id="HB_Focus_Element" unselectab="" background="" Effet survol d'un lien avec affichage d'une image [ par apz ] Bonjour à tous, J'aimerais avoir le code qui produit l'affichage d'une image lors d'un survol de la souris sur un lien. J'ai cet exemple : http://l


Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,451 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales