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.
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)...
@+
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
- Image suivant la souris et escamotable par un double click
- Image regardant et suivant la souris - Codes sources - Javascript (Trucs Amusants)
- Affiche une image suivant un angle - Codes sources - Visual Basic / VB.NET (Trucs & Astuces)
- Deplacement d'une image avec la souris - Codes sources - Visual Basic / VB.NET (Control)
- Eclatement d image sous la souris - Codes sources - Flash (Effets d'images)
- Eclatement d'une image sous la souris - Codes sources - Flash (ActionScripts)
Commentaires
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 !
Pour masquer l'image au chargement de la page, remplace la ligne :
par :
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
@+
@ bientôt
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.