1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Image suivant la souris et escamotable par un double click

Image suivant la souris et escamotable par un double click

Soyez le premier à donner votre avis sur cette source.

Vue 11 082 fois - Téléchargée 635 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
dj_stank
Messages postés
2
Date d'inscription
lundi 8 mars 2004
Statut
Membre
Dernière intervention
16 février 2007
16 févr. 2007 à 23:46
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 !
cs_peter1789
Messages postés
35
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 mai 2006
8 oct. 2005 à 14:42
salut DJ_STANK,
Pour masquer l'image au chargement de la page, remplace la ligne :




par :
ifebo
Messages postés
181
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
28 décembre 2006
1 oct. 2005 à 08:36
Messieurs, c'est un vrai régal de vous lire, même si je ne comprends pas tout. Merci et bonne continuation.
dj_stank
Messages postés
2
Date d'inscription
lundi 8 mars 2004
Statut
Membre
Dernière intervention
16 février 2007
2 sept. 2005 à 04:52
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

@+
cs_peter1789
Messages postés
35
Date d'inscription
mercredi 19 janvier 2005
Statut
Membre
Dernière intervention
22 mai 2006
5 juin 2005 à 13:28
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
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)