Image suivant la souris et escamotable par un double click

Soyez le premier à donner votre avis sur cette source.

Vue 10 787 fois - Téléchargée 621 fois

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)...
@+

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
lundi 8 mars 2004
Statut
Membre
Dernière intervention
16 février 2007

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 !
Messages postés
35
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 mai 2006

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




par :
Messages postés
181
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
28 décembre 2006

Messieurs, c'est un vrai régal de vous lire, même si je ne comprends pas tout. Merci et bonne continuation.
Messages postés
2
Date d'inscription
lundi 8 mars 2004
Statut
Membre
Dernière intervention
16 février 2007

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

@+
Messages postés
35
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 mai 2006

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

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.