Comment faire un curseur avec une image qui s'affiche sur double-clic ?

 

par meltech1 |

     
Comment faire un curseur avec une image qui s'affiche sur double-clic ?

Si vous voulez faire une animation sympa pour votre curseur en javascript alors cet article est fait pour vous. En effet votre curseur sera suivi par une image de votre choix qui s'affiche et disparaît sur un simple clic n'importe où sur votre site Internet. Pour ce faire il va vous falloir une image de votre choix et une programmation qui est décrite dans les étapes suivantes.

Quelles sont les fournitures nécessaires ?

  • Internet Explorer
  • Logiciel bloc notes
  • Une image au choix

Étapes de réalisation

1.

Commencez par ouvrir votre site Internet avec "bloc notes" pour obtenir son code source. Ainsi vous pourrez programmer ce qui suit. Cherchez-y la balise <head>.

2.

Dans la balise <head> veuillez insérer ce qui suit :
<script language="javascript">
<!--
var i=true;
function move(e) {
if (navigator.appName!="Microsoft Internet Explorer") {
window.document.getElementById("curseur").style.left=e.pageX;
window.document.getElementById("curseur").style.top=e.pageY;
}
else {
window.document.getElementById("curseur").style.left=window.event.x;
window.document.getElementById("curseur").style.top=window.event.y;
}
}
function change() {
if (i==true) {
window.document.getElementById("curseur").style.visibility="hidden";
i=false;
}
else {
window.document.getElementById("curseur").style.visibility="visible";
i=true;
}
}
document.onmousemove=move;
document.ondblclick=change;
//-->
</script>.

3.

Dans la balise <body> veuillez insérer ce qui suit :
<div id="curseur" style="position:absolute;">
<img src="image.gif" /><!--mettez ici le nom de votre image-->
</div>.

4.

Pour terminer enregistrez votre programme avec "bloc notes" et ouvrez-le avec IE. Vous obtenez votre page Internet avec le curseur qui est suivi par l'image que vous avez choisie. Dès que vous avez cliqué deux fois sur votre page Internet l'image disparaît. Vous cliquez de nouveau deux fois et l'image réapparaît. Magique non ? C'est javascript.

Astuces et mises en garde

Astuce(s) :

Changez votre image dans la balise <body>.

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on