• curseur Elyci

    Cette blogueuse veut changer l'image qui suit curseur, qu'elle a installée dans un module et je profite de ce sujet pour rappeler les façons de faire.

    On peut installer le code dans le CSS du blog ou installer un code avec javascript dans un module; c'est cette dernière méthode qu'elle a choisie.

    Voyons déjà la façon de faire dans le CSS du blog: onglet apparence/modifier le thème; dans la colonne de gauche, descendre jusqu"à ajouter du CSS et écrire, après la dernière ligne:

    body {cursor:url(adresse de l'image), auto; } puis enregistrer.

    Ce qui donne, par exemple:  body {cursor:url(http://curseursgogo.free.fr/curnature/fleur8.gif), auto; }

    Simple à mettre en place, simple à modifier ensuite, change le curseur mais qui n'a pas l'animation de retournement en fonction du mouvement du curseur ... ce qui implique d'utiliser la seconde méthode qui ajoute une image à côté du curseur.

    Ajouter un module dans le menu 1 et récupérer son identifiant: voir ici

    Elyci a un module ainsi rempli:

    <div id="module_menu_contenu150435248" class="module_menu_contenu">
    <div class="module_menu_contenu_block">
    <p><img src="http://4.bp.blogspot.com/-v25Yxc_FAcg/VBnBvD92n4I/AAAAAAAAIMQ/8gLOin0l6Bk/s1600/gif%2Bpetite%2Bf%C3%A9e%2B1.png" width="284" height="284" alt=""/>&nbsp;</p>
    <!-- DEBUT DU SCRIPT -->
    <p>
    <script>// <![CDATA[
    /*
    Image qui suit et regarde la souris
    http://www.editeurjavascript.com/scripts/scripts_images_1_66.php

    SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
    http://www.editeurjavascript.com
    */
    var x = 0;
    var y = 0;

    if (document.getElementById)
    {
    if(navigator.appName.substring(0,3) == "Net")
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = Pos_Souris;
    window.onload = Bouge_Image;
    }

    function Pos_Souris(e)
    {
    x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
    y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
    }

    posX = 0;
    posY = 0;
    anim = true;
    oldpos = "http://img4.hostingpics.net/pics/482237893217gifpetitefe1avatar.png ";

    function Bouge_Image()
    {
    if (document.getElementById && anim)
    {
    posX = posX+(((x-posX)+20)/15);
    posY = posY+(((y-posY)+20)/15);
    if(posX<x)
    newpos=' http://img4.hostingpics.net/pics/482237893217gifpetitefe1avatar.png ';
    else
    newpos='http://img4.hostingpics.net/pics/407233893217gifpetitefe1avatarkkkk.png ';
    if(newpos!=oldpos)
    {
    document.tete.src=newpos;
    oldpos=newpos;
    }
    document.getElementById("teteronde").style.top = posY+"px";
    document.getElementById("teteronde").style.left = posX+"px";
    tempo = setTimeout("Bouge_Image()", 15)
    }
    }

    if(document.getElementById)
    {
    document.write('<div id="teteronde" style="position: absolute">');
    document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
    document.write('<img src="http://img4.hostingpics.net/pics/407233893217gifpetitefe1avatarkkkk.png " style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
    document.write('</a>');
    document.write('</div>');
    }
    // ]]></script>
    </p>
    <!-- FIN DU SCRIPT -->
    <p>&nbsp;</p>
    </div>
    </div>

     

     Vous trouvez l'identifiant du module , l'adresse de l'image principale , celle de l'image curseur 1 et son symétrique 2.

    Essayons de modifier ce code avec deux autres images; je ne peux laisser le résultat de mon essai, dans un module crée pour cet essai car je ne souhaite pas installer un tel système .. mais il me faut bien essayer si le code fonctionne !

    ses images dans l'ordre:

    <div id="module_menu_contenu150474806" class="module_menu_contenu">
    <div class="module_menu_contenu_block">
    <!-- DEBUT DU SCRIPT -->
    <p>
    <script>// <![CDATA[
    /*
    Image qui suit et regarde la souris
    http://www.editeurjavascript.com/scripts/scripts_images_1_66.php

    SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
    http://www.editeurjavascript.com
    */
    var x = 0;
    var y = 0;

    if (document.getElementById)
    {
    if(navigator.appName.substring(0,3) == "Net")
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = Pos_Souris;
    window.onload = Bouge_Image;
    }

    function Pos_Souris(e)
    {
    x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
    y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
    }

    posX = 0;
    posY = 0;
    anim = true;
    oldpos = "http://ekladata.com/cQq9_HlQNsZh22YGcWTQ0JOElbg.gif ";

    function Bouge_Image()
    {
    if (document.getElementById && anim)
    {
    posX = posX+(((x-posX)+20)/15);
    posY = posY+(((y-posY)+20)/15);
    if(posX<x)
    newpos=' http://ekladata.com/cQq9_HlQNsZh22YGcWTQ0JOElbg.gif ';
    else
    newpos='http://ekladata.com/kZV0LDgeLb3Fj_s_grtxT7hQ4uQ.gif ';
    if(newpos!=oldpos)
    {
    document.tete.src=newpos;
    oldpos=newpos;
    }
    document.getElementById("teteronde").style.top = posY+"px";
    document.getElementById("teteronde").style.left = posX+"px";
    tempo = setTimeout("Bouge_Image()", 15)
    }
    }

    if(document.getElementById)
    {
    document.write('<div id="teteronde" style="position: absolute">');
    document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
    document.write('<img src="http://ekladata.com/kZV0LDgeLb3Fj_s_grtxT7hQ4uQ.gif " style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
    document.write('</a>');
    document.write('</div>');
    }
    // ]]></script>
    </p>
    <!-- FIN DU SCRIPT -->
    </div>
    </div>

    L'identifiant de mon module, l'adresse d'un curseur et l'adresse du second curseur symétrique: ainsi, 2 adresses au lieu de 3.