begin process at 2012 05 28 10:35:05
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs Amusants

 > IMAGE REGARDANT ET SUIVANT LA SOURIS

IMAGE REGARDANT ET SUIVANT LA SOURIS


 Information sur la source

Note :
4,33 / 10 - par 3 personnes
4,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs Amusants Classé sous :image, souris, suivre, regarder Niveau :Débutant Date de création :06/02/2007 Vu :8 230

Auteur : abder05

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

 Description

C'est une image une sorte de tête qui suit la souris et qui la regarde, par exemple, vous dirigez la souris à gauche de l'image elle regarde vers la gauche et vis versa. Voici la page où vous pourrez retrouver la démonstration: http://foot-abder.ifrance.com/demo_code_script.htm l

Source

  • <!-- DEBUT DU SCRIPT -->
  • <script type="text/javascript">
  • var x = 0;
  • var y = 0;
  • if (document.getElementById)
  • {
  • if(navigator.appName.substring(0,3) == "Net")
  • document.captureEvents(Event.MOUSEMOVE);
  • document.onmousemove = Pos_Souris;
  • window.onload = Bouge_Image;
  • }
  • function Pos_Souris(e)
  • {
  • x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
  • y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
  • }
  • posX = 0;
  • posY = 0;
  • anim = true;
  • oldpos = "Entrez ici le chemin de l'image qui regarde vers la gauche";
  • function Bouge_Image()
  • {
  • if (document.getElementById && anim)
  • {
  • posX = posX+(((x-posX)+20)/15);
  • posY = posY+(((y-posY)+20)/15);
  • if(posX<x)
  • newpos='Entrez ici le chemin de l'image qui regarde vers la droite';
  • else
  • newpos='Entrez ici le chemin de l'image qui regarde vers la gauche';
  • if(newpos!=oldpos)
  • {
  • document.tete.src=newpos;
  • oldpos=newpos;
  • }
  • document.getElementById("teteronde").style.top = posY+"px";
  • document.getElementById("teteronde").style.left = posX+"px";
  • tempo = setTimeout("Bouge_Image()", 15)
  • }
  • }
  • if(document.getElementById)
  • {
  • document.write('<div id="teteronde" style="position: absolute">');
  • document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
  • document.write('<img src="Entrez ici le chemin de l'image qui regarde vers la droite" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
  • document.write('</a>');
  • document.write('</div>');
  • }
  • </script>
  • <!-- FIN DU SCRIPT -->
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
var x = 0;
var y = 0;

if (document.getElementById)
   {
   if(navigator.appName.substring(0,3) == "Net")
      document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = Pos_Souris;
   window.onload = Bouge_Image;
   }

function Pos_Souris(e)
   {
   x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
   y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
   }

posX = 0;
posY = 0;
anim = true;
oldpos = "Entrez ici le chemin de l'image qui regarde vers la gauche";

function Bouge_Image()
   {
   if (document.getElementById && anim)
      {
      posX = posX+(((x-posX)+20)/15);
      posY = posY+(((y-posY)+20)/15);
      if(posX<x)
         newpos='Entrez ici le chemin de l'image qui regarde vers la droite';
      else
         newpos='Entrez ici le chemin de l'image qui regarde vers la gauche';
	  if(newpos!=oldpos)
	  	{
		document.tete.src=newpos;
		oldpos=newpos;
		}
      document.getElementById("teteronde").style.top = posY+"px";
      document.getElementById("teteronde").style.left = posX+"px";
      tempo = setTimeout("Bouge_Image()", 15)
      }
   }

if(document.getElementById)
   {
   document.write('<div id="teteronde" style="position: absolute">');
   document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
   document.write('<img src="Entrez ici le chemin de l'image qui regarde vers la droite" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
   document.write('</a>');
   document.write('</div>');
   }
</script>
<!-- FIN DU SCRIPT -->

 Conclusion

Je trouve que c'est un script amusant et j'espere que vous aimerez.


 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip Source avec une capture INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info
TEXTE EN SPIRALE SUR SOURIS par beladel
Source avec Zip IMAGE SUIVANT LA SOURIS ET ESCAMOTABLE PAR UN DOUBLE CLICK par peter1789

Commentaires et avis

Commentaire de Palleas_44 le 06/02/2007 18:34:08

L'idée est amusante mais j'aurai opté pour une utilisation du DOM plutot qu'utiliser document.write(). Ta  condition document.getElementById devrait avoir un else quand même, que le script soit plus compatible, même chose pour recuperer la position de la souris et puis je crois que c'est tout ;)

Commentaire de dlafrette le 12/02/2007 06:46:45

Ne fonctionne que sous IE et non sous Firefox! Dommage car c'est effectivement amusant. Bon courage.

Commentaire de abder05 le 12/02/2007 18:53:48

Si ça marche sous Firefox. Justement j'ai les deux navigateurs et ça marche sur les IE et Firefox, t'as quelle version? Moi j'ai 1.5

Commentaire de PetoleTeam le 27/02/2007 19:22:40

Bonjour,
cela marche même sous FireFox à condition de lignes 32, 34 et 50 il faut mettre un \ devant 'image.
;0)

Commentaire de PetoleTeam le 27/02/2007 19:59:17

Re Bonjour,
Il me semblait que cela me disait quelquechose...

Et bien OUI, une recherche sur Google donne pas moins de 168 réponses avec le mot clé document.getElementById("teteronde") dont une issue de http://www.editeurjavascript.com/ avec un code déposé en 2003 qui est déjà une reprise d'un exemple d'un ouvrage de MicroApplication de 2001 en e-Poche, à la ligne près.

La source restant une bonne source, je suis seulement désolé qu'aucune mention d'antériorité n'apparaîssent.

:0(

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

position de la souris sur une image [ par golgoth ] Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr click droit de la souris [ par ghita ] salutest ce quelqu'un peut me dire s'il existe un événement en javascript qui se declenche lors du click droit d'un objet (image par ex), j'ai une fon Gestion de la souris sur une image [ par ldm001 ] Bonjour,J'aimerais pouvoir récupérer les coordonnées de rectancles ( position, hauteur, largeur ) que l'utilisateur aurait dessinées avec la souris su Une [image] fixe qui suis la souris [ par ptitsky ] Bonjour à tous ,Mon pb :Je voudrai faire qu'une image suivent le mouvement de la souris, mais, que un bout de cette meme image reste au meme endroit.E Afficher du texte sous le passage de la souris [ par Arnauti ] Bonjour, je voudrais avoir une image qui lorsque la souris passe dessus, l'image change et que ca affiche le texte. Jusque la pas de probl&#232;me&nb Surligner un lien au passage de la souris sur une image??? [ par Monico9385 ] Bonjour, je vous &#233;cris car j'ai une image et un lien qui sont cote a cote, et j'aimerai que quand l'on survole l'image, le lien se souligne. Je Afficher 2 images au passage de la souris sur une image [ par Monico9385 ] Bonjour, alors voila mon probleme. J'aimerai qu'au passage de la souris sur une imge, cela m'ouvre cette image en plus grand, et au meme moment que c Son au passage de la souris [ par hugo37 ] Bonjour &#224; toutes et &#224; tous! Je construit un site&nbsp;avec beaucoup de dhtml et de java et j'ai un petit soucis parceque je n'arrive pas &#2 Déplacer un DIV avec une image à l'intérieur [ par flexx ] BonjourJe souhaite d&#233;placer un div avec la souris en cliquant &#224; l'int&#233;rieur (glisser-d&#233;placer)Le probl&#232;me, c'est que quand le Problème: Rollover sur une zone précise de l'image [ par Sp00ky ] Bonjour &#224; toutes et &#224; tous, Voil&#224; j'aimerais faire un rollover partiel sur une image... c'est &#224; dire en utilisant les zones (area


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
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 : 0,374 sec (4)

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