Image suivant la souris et escamotable par un double click

Soyez le premier à donner votre avis sur cette source.

Vue 10 621 fois - Téléchargée 606 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

Commenter la réponse de coucou747
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)