Accueil > > > IMAGE SUIVANT LA SOURIS ET ESCAMOTABLE PAR UN DOUBLE CLICK
IMAGE SUIVANT LA SOURIS ET ESCAMOTABLE PAR UN DOUBLE CLICK
Information sur la source
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)... @+
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
Sources de la même categorie
Commentaires et avis
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ème&nb
Surligner un lien au passage de la souris sur une image??? [ par Monico9385 ]
Bonjour, je vous é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 à toutes et à tous! Je construit un site avec beaucoup de dhtml et de java et j'ai un petit soucis parceque je n'arrive pas 
Déplacer un DIV avec une image à l'intérieur [ par flexx ]
BonjourJe souhaite déplacer un div avec la souris en cliquant à l'intérieur (glisser-déplacer)Le problème, c'est que quand le
Problème: Rollover sur une zone précise de l'image [ par Sp00ky ]
Bonjour à toutes et à tous, Voilà j'aimerais faire un rollover partiel sur une image... c'est à dire en utilisant les zones (area
|
Derniers Blogs
UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
Comparez les prix

HTC Hero
Entre 550€ et 550€
|