Image suivant la souris et escamotable par un double click

Soyez le premier à donner votre avis sur cette source.

Vue 10 683 fois - Téléchargée 610 fois

Télécharger le projet
Commenter

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 / Exemple : 


<!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)...
@+
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
 29 -
window.document. n'existe pas, on met soit l'un soit l'autre
Signaler
Gorrk
Messages postés
97
Date d'inscription
mercredi 16 avril 2003
Statut
Membre
Dernière intervention
26 avril 2007
 -
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
Signaler
Gorrk
Messages postés
97
Date d'inscription
mercredi 16 avril 2003
Statut
Membre
Dernière intervention
26 avril 2007
 -
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.
Signaler
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
 29 -
ils le font implicitement, mais document n'a pas window pour parent...
Signaler
Gorrk
Messages postés
97
Date d'inscription
mercredi 16 avril 2003
Statut
Membre
Dernière intervention
26 avril 2007
 -
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.
Afficher les 18 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_peter1789)