begin process at 2010 02 10 00:33:40
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > IMAGE SUIVANT LA SOURIS ET ESCAMOTABLE PAR UN DOUBLE CLICK

IMAGE SUIVANT LA SOURIS ET ESCAMOTABLE PAR UN DOUBLE CLICK


 Information sur la source

Note :
7 / 10 - par 3 personnes
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :image, colle, souris Niveau :Débutant Date de création :31/05/2005 Date de mise à jour :13/07/2005 14:28:09 Vu / téléchargé :8 115 / 536

Auteur : peter1789

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

 Description

Ce code programme en javascript et dhtml une image qui suit le curseur de la souris et qui disparaît ou réapparaît avec un double-click... N'oubliez pas de remplacer "mon_image.jpg" (à côté du commentaire "<!--mettez ici le nom de votre image-->") par l'url de votre image.

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  • <html>
  • <head>
  • <title>curseurmove</title>
  • </head>
  • <body>
  • <div id="curseur" style="position:absolute;"><!--création du calque contenant l'image-->
  • <img src="mon_image.jpg"><!--mettez ici le nom de votre image-->
  • </div>
  • <script language="javascript">
  • <!--
  • function move(e)
  • {
  • document.getElementById("curseur").style.left = window.event/*on demande si le navigateur est compatible avec l'objet event sous la forme "condition ? instructions si oui : instructions si non" */ ? window.event.clientX :/*on utilise l'argument e de la fonction*/ e.pageX;//la position horizontale du curseur est affecté à la position horizontale du calque
  • document.getElementById("curseur").style.top = window.event/*idem*/ ? window.event.clientY :/*on utilise l'argument e de la fonction*/ e.pageY; //la position verticale du curseur est affecté à la position verticale du calque
  • }
  • /*correction de la fonction change*/
  • function change()
  • {
  • with (document.getElementById("curseur").style)//dans les accolades de l'element with, tous les objets désignés sont automatiquement issus du/des objets parent(s) indiqué(s) entre parenthèses
  • display = (display == "none")?/*si le calque est caché, on le fait réapparaître*/ "" :/*si le calque est visible, on le cache*/ "none";
  • }
  • document.onmousemove = move; //gestionnaire d'évenement surveillant le mouvement de la souris
  • document.ondblclick = change; //gestionnaire d'évenement surveillant le double click gauche de la souris
  • //-->
  • </script>
  • </body>
  • </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>curseurmove</title>
</head>

<body>

<div id="curseur" style="position:absolute;"><!--création du calque contenant l'image-->
<img src="mon_image.jpg"><!--mettez ici le nom de votre image-->
</div>

<script language="javascript">
<!--

function move(e)
   {
    document.getElementById("curseur").style.left = window.event/*on demande si le navigateur est compatible avec l'objet event sous la forme "condition ? instructions si oui : instructions si non" */ ? window.event.clientX :/*on utilise l'argument e de la fonction*/ e.pageX;//la position horizontale du curseur est affecté à la position horizontale du calque
    document.getElementById("curseur").style.top = window.event/*idem*/ ? window.event.clientY :/*on utilise l'argument e de la fonction*/ e.pageY; //la position verticale du curseur est affecté à la position verticale du calque
   }
/*correction de la fonction change*/
function change()
   {
with (document.getElementById("curseur").style)//dans les accolades de l'element with, tous les objets désignés sont automatiquement issus du/des objets parent(s) indiqué(s) entre parenthèses
    display = (display == "none")?/*si le calque est caché, on le fait réapparaître*/ "" :/*si le calque est visible, on le cache*/ "none";
   }
document.onmousemove = move; //gestionnaire d'évenement surveillant le mouvement de la souris
document.ondblclick = change; //gestionnaire d'évenement surveillant le double click gauche de la souris
//-->
</script>

</body>
</html>

 Conclusion

J'espère que ce code vous servira : je l'améliorerai peut-être si j'ai le temps ! C'est un de mes premiers codes (le 1er à être publié en tout cas :p)...
explication dans la source :)
Je remercie tout particulièrement le site référence SELFHTML de javascript-css-dhtml-(x)html pour son aide précieuse (adresse : "http://fr.selfhtml.org/").
pas de bugs à ce jour (compatible tous navigateurs versions récentes)...
@+

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

03 juin 2005 19:59:12 :
Je change radicalement mon script en le simplifiant au maximum grâca aux conseils de Gorrk ! @+
05 juin 2005 12:57:07 :
Je rajoute un zip :)
05 juin 2005 13:25:25 :
petite mise au point ;)
13 juillet 2005 14:28:09 :
ajout d'un ZIP

 Sources du même auteur

Source avec Zip LISTAGE DES OBJETS, MÉTHODES ET PROPRIÉTÉS
Source avec Zip Source avec une capture CHERCHOBJET
Source avec Zip EXTRACTION DES PARAMÈTRES D'UNE URL
Source avec Zip ANIMATION DYNAMIQUE DE BIENVENUE
Source avec Zip IMAGE MOBILE REBONDISSANTE

 Sources de la même categorie

Source avec Zip Source avec une capture STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma

 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 INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info
IMAGE REGARDANT ET SUIVANT LA SOURIS par abder05

Commentaires et avis

Commentaire de coucou747 le 01/06/2005 17:12:54

window.document. n'existe pas, on met soit l'un soit l'autre

Commentaire de Gorrk le 01/06/2005 17:40:53

Pas du tout, window.document existe parfaitement et c'est exactement pareil que document, car document est une propriété de window et qu'implicitemement, (presque) chaque fois qu'on appelle un objet c'est en réalité window.[objet] qui est retourné.

De même, il me semble que quand on declare une variable sans le mot clef var c'est une propriété qui s'ajoute à l'objet window.
var variable1 = value1; // Création d'une "vraie" variable
variable2 = value2; // Création d'une propriété de l'objet window
window.variable3 = value; // Equivalent à la déclaration précédente

Commentaire de Gorrk le 01/06/2005 17:58:59

Après avoir réaliser un petit test, je reviens pour modérer mes propos au sujet des déclarations de variable.

Voilà le script de test :

var var1 = "variable 1";
var2 = "variable 2";
window.var3 = "variable 3";

document.writeln(window.var1);
document.writeln(window.var2);
document.writeln(window.var3);

for (property in window)
  if (window.property.indexOf("var") != -1)
    document.writeln("window." + property + " : " +window[property]);

Les résultats sont assez étranges car non seulement il y a une différence de fonctionnement entre Firefox et IExplorer, mais en plus, dans ce dernier il y a une "bizarrerie".

Dans Firefox, les trois variables sont enregistrés comme des propriétés de window, dans IExplorer   ,en partie seulment, je m'explique : window.var{i} retourne bien la variable correspondante, comme sous Firefox, mais lors du for...in, impossible de récupérer les propriétés var1 et var2.

Commentaire de coucou747 le 01/06/2005 19:45:38

ils le font implicitement, mais document n'a pas window pour parent...

Commentaire de Gorrk le 01/06/2005 20:52:31

Si si, pour vérification, il te suffit de faire alert(window.document) ou même de parcourir toutes les propriétés de window :

for (property in window)
  document.writeln("window." + property + " : " +window[property]);

Vérifié sous Windows, Linux, IExplorer et Firefox, je n'ai pas regardé Konqueror.

Commentaire de Gorrk le 01/06/2005 21:49:04

Bon, assez papoté de tout et de n'importe quoi, je m'en vais commenter ce script : che moi, ca ne fonctionne pas, ce doit être du a quelques erreurs telle que la gestion des événements sur le modèle Netscape. Je ne vais pas faire un cours ici, mais dans le modèle Netscape les évènements se passent en paramètres de fonction, exemple :

function move(E)
{
  if (window.event)
  {
    document.getElementById("curseur").style.left = event.clientX;
    document.getElementById("curseur").style.top = event.clientY
  }
  else
  {
    document.getElementById("curseur").style.left = E.pageX;
    document.getElementById("curseur").style.top = E.pageY;
  }
}

Ou encore mieux, on condense la fonction :

function move(E)
{
  with (document.getElementById("curseur").style)
  {
    left = window.event ? event.clientX : E.pageX;
    top = window.event ? event.clientY : E.pageY;
  }
}

C'est quand même plus propre et léger non, et en plus, question compatibilité c'est bien mieux.

Commentaire de peter1789 le 03/06/2005 18:06:38

                       Salut  Gorrk !

Merci pour ce que tu m'as appris sur with -dont je suis tout de suite allé voir la signification sur SelfHTML- et aussi pour la manière de vérifier si le navigateur est compatible avec l'objet event ! Je mettrai ce code en commentaire à la fin de mon code original que je vais laisser pour qu'il reste accessible à tous le monde... ;)
Merci encore !
                          Amicalement, peter1789

Commentaire de Gorrk le 03/06/2005 18:24:52

Je t'en pris, tout le plaisir a été pour moi, si je puis encore t'être utile, n'hésites pas...

Commentaire de peter1789 le 03/06/2005 18:40:55

En fait j'ai changé d'avis je vais corriger le script et laisser le premier en commentaire !

                    peter1789

Commentaire de peter1789 le 03/06/2005 20:02:28

bon j'ai changé tout mon script et j'ai enlevé l'ancien code !
@+
              peter1789

Commentaire de coucou747 le 04/06/2005 11:23:38

oh, autant pour moi, pardonnez mon ignorence...

Commentaire de Gorrk le 04/06/2005 14:22:14

Au fait, si tu pouvais mettre un petit zip de ta source, ce serait pas mal, parce qu'avec la nouvelle version de code source, le copier-coller du code affiche les numéros des lignes qu'il faut enlever un par un pour tester le code, donc si tu pouvais faire ca, merci.

Commentaire de Gorrk le 04/06/2005 14:41:27

Bon, c'est déjà mieux, ça fonctionne bien sous Firefox, mais je me permet quand même de faire encore quelques petites remarques : tout d'abord, dans la fonction move, tu mentionne l'utilisation de with, mais tu ne l'utilise pas, ensuite, je ne suis pas sur que les commentaires placés au milieu du code en simplifie la lecture pour les néophytes (clin d'œil à LocalStone :)), et enfin, ce n'est pas la peine de mettre window.event à chaque fois, event suffit.

Bon, c'est un peu près tout pour la fonction move, atttaquons nous maintenant à la foncion change : la variable i n'a ici aucune utilité et le risque c'est de modifier sa valeur dans un autre script, voici une meilleur solution dans laquelle je remplace l'attribut visibility par display qui me parait un peu mieux, je te laisse regarder sur le net la différence.

function change()
{
  with (document.getElementById("curseur").style)
    display = display == "none" ? "" : "none";
}

Commentaire de peter1789 le 05/06/2005 13:28:08

Merci encore pour l'idée et ma découverte de la propriété css display ;) Je te dois toutes les modifications :) !
@ bientôt

Commentaire de dj_stank le 02/09/2005 04:52:02

Bonsoir,

Je trouve ce petit script vraiment tres interessant, cependant sauriez vous comment masqué l'image au chargement de la page au lieu qu'elle ne s'affiche par default?

Merci d'avance pour vos reponses

@+

Commentaire de ifebo le 01/10/2005 08:36:34

Messieurs, c'est un vrai régal de vous lire, même si je ne comprends pas tout. Merci et bonne continuation.

Commentaire de peter1789 le 08/10/2005 14:42:06

              salut DJ_STANK,
Pour masquer l'image au chargement de la page, remplace la ligne :

<div id="curseur" style="position:absolute;">

par :

<div id="curseur" style="position:absolute;display:none;">

Commentaire de dj_stank le 16/02/2007 23:46:08

Salut peter,
Désolé pour le retard de ma réponse :), j'avais perdu le pass de mon compte !
Juste pour te remercier ! Ca marche niquel ! Bravo et merci à toi !

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

Comparez les prix


HTC Hero

Entre 550€ et 550€

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 : 5,304 sec (3)

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