• Img qui suit le curseur

    Une image qui suit votre curseur. Un classique en Javascript !!!
    Attention, tout de même, aux éventuelles interférences avec d'autres scripts.
    Pour voir,  rafraichir la page (F5). Excepté  I.E
    Il vous faudra copier/coller le code ci-dessous, dans un module simple,
    et mettre l'image de votre choix (en rouge dans le script) :

     

     

    <script type="text/javascript">// <![CDATA[
    /* Image qui suit  la souris */
    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/nwOR0-ohdQi_hRkMsaLRwjSm3gg/divers-bd-074.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/nwOR0-ohdQi_hRkMsaLRwjSm3gg/divers-bd-074.gif';
    else
    newpos='http://ekladata.com/nwOR0-ohdQi_hRkMsaLRwjSm3gg/divers-bd-074.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 style="width:50px;" src="http://ekladata.com/nwOR0-ohdQi_hRkMsaLRwjSm3gg/divers-bd-074.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
    document.write('</a>');
    document.write('</div>');
    }
    // ]]></script>

    Source:

     

     

    Cliquez ici pour faire disparaître
    « Deezer illimitéDéfilement titre onglet navigateur »

  • Commentaires

    34
    Samedi 23 Janvier 2016 à 21:55
    Bonsoir, je voulais savoir comment on peut faire en sorte que l'image ne suive le curseur que sur un article (comme vous l'avez fait sur cet article)… Merci de me répondre, bonne soirée ! :)
    33
    Lundi 5 Octobre 2015 à 00:15
    Bonsoir PapyrockTest,

    Merci beaucoup pour le code, tip top !!!
    Je vous souhaite une bonne soirée
    Chris
    32
    Dimanche 27 Septembre 2015 à 19:57
    Bonjour et merci!!!!! ça marche parfaitement sur mon tout nouveau blog, j'ai vu qu'on pouvait aussi changer la taille de l'image! je suis ravie et je joue avec mon image depuis 15 minutes. Passez une excellente soirée!
    Pink
    31
    Lundi 24 Novembre 2014 à 19:01

    re coucou, j'ai fait exactement les mêmes manipulations que "gentille rebelle", sur sa page d accueil, pb je n'ai pas la main pour enregistrer.

     

    30
    Lundi 24 Novembre 2014 à 16:19

    Ton blog est protégé.... dans quel module le script ?

    29
    Lundi 24 Novembre 2014 à 15:28
    je m explique:
    Pour mettre un curseur avec trainée etoile, ou pluie par exemple, je copies les codes javascript du site :

    http://www.mf2fm.com/rv/dhtmltinkerbell.php
    dans un billet HTML, tu l enregistres, et tu as un curseur avec trainée étoile ou pluie ou autre animation sur le blog.
    Elklablog a modifié depuis peu, on n a plus la main pour faire des modifications ni pour enregistrer,
    Regardes mon blog avec le lien , merci
    http://sudiste1359.eklablog.com/
    28
    Lundi 24 Novembre 2014 à 15:08

    @sudiste

    Euh..un peu vague !!!!
    Un exemple peut-être ? article, page ....

    27
    sudiste1359 Profil de sudiste1359
    Lundi 24 Novembre 2014 à 14:57
    coucou, j'ai parcouru votre blog et conseils.
    Depuis peu, avec certaines modifications de ELKLABLOG je suppose, je n arrive plus à modifier/enregistrer des codes javascripts en éditant mon accueil HTML , c était sans problème avant, Est ce normal???
    Des conseils à me donner??? merci d avance

    http://sudiste1359.eklablog.com/
    26
    Samedi 1er Février 2014 à 19:07

    @la gentille rebelle

    ok...j'ai laissé un com sur "http://lagentillerebelle1.eklablog.com/"
    En fait avec ce script, tu peux mettre 2 images. Une pour déplacement gauche et l'autre pour déplacement droite.
    Par exemple pour ton blog avec le curseur "2 oiseaux", il y aurait un oiseau volant à gauche pour déplacement gauche,
    et un oiseau volant à droite pour déplacement droite.
    Exemple ci-dessous avec des yeux qui tournent à droite ou à gauche (F5 pour rafraichir ) voir les url .gif en jaune:

    <!-- DEBUT DU SCRIPT -->
    <script type="text/javascript">
    /*
    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://www.editeurjavascript.com/img/img_exemples/gauche.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://www.editeurjavascript.com/img/img_exemples/droite.gif';
    else
    newpos='http://www.editeurjavascript.com/img/img_exemples/gauche.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="/image-derriere-souris-a58504337#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
    document.write('<img src="http://www.editeurjavascript.com/img/img_exemples/droite.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
    document.write('</a>');
    document.write('</div>');
    }
    </script>
    <!-- FIN DU SCRIPT -->

    25
    Samedi 1er Février 2014 à 15:33

    Merci Mike, le curseur fonctionne chez moi !!!lol

    24
    Meraviglia Profil de Meraviglia
    Samedi 8 Juin 2013 à 16:22

    coucou Mike je vais essayer de nouveau  ,merci beaucoup Mike de ton aide,

    bon week end 

    23
    Vendredi 7 Juin 2013 à 17:43

    Il me semble t'avoir proposé de placer le script 'img-curseur' dans un module déjà existant, comme ton module ' Formations ', par exemple. Ainsi plus de souci pour cacher le module...
    Pour le code 'modifier le footer', effectivement dans un module y a problème.
    En attendant pour ajouter du texte (ou image), place ce code dans module existant:

    <div style="position:absolute;bottom:5px;left:40%;">Mon-texte-ici</div>

    22
    Meraviglia Profil de Meraviglia
    Vendredi 7 Juin 2013 à 17:08

    coucou Mike ,non le curseur ne marche qu avec le module apparent qui est au basdans le menu de  droite et le footer aussi ca ne marche pas dans un module comme je te l ai écris ca ne marche qu un peu et ca revient comme avant,merci encore

    21
    Vendredi 7 Juin 2013 à 16:34

    Résolu ton pb 'd'img-qui-suit-curseur' ??? Car je vois que tu as rajouté un code pour cacher l'image....

    20
    Meraviglia Profil de Meraviglia
    Jeudi 6 Juin 2013 à 14:54

    coucou Mike ,me revoici ,excuse moi de te solliciter a nouveau j ai mis le footer dans le module formation mais rien n y fait ca reste un peu tel que je le voudrai puis ca revient comme avant et pour l image qui suit le curseur quand je la met dans un module on la voit plus et tout aussi bien si je fais un css avec le numero du module pour qu il devienne transparent   ,pourrai tu m aider s il te plait a avoir le curseur sans le module,merci Mike,bonne journée

    19
    Meraviglia Profil de Meraviglia
    Lundi 3 Juin 2013 à 16:38

    merci encore Mike ,j ai choisi que le curseur pour éviter le décalage de page en ajoutant les flèches,mais je garde tes codes ,je pourrai m en servir prochainement

    merci beaucoup pour tout tes conseils et tes codes

    bonne journée

    18
    Lundi 3 Juin 2013 à 10:10

    Ce décalage provient de 'image-qui-suit-le-curseur' qui est située à droite du curseur.
    On peut placer les flèches 'haut-bas' à gauche en remplaçant dans le code CSS:

    right: -10px;  par  left: -10px;

    Et pour ne pas chevaucher le menu de gauche (facultatif), on réduit la largeur de la page:

    Apparence > Modifier le thème > Format blog > Largeur page > 90%
    ou en css:

    #background {width: 90%;}

    17
    Meraviglia Profil de Meraviglia
    Dimanche 2 Juin 2013 à 23:07

    Merci Mike,j ai juste un souci avec la flèche du bas lorsque je clique la page se décale sur la gauche,ensuite je me demande si je dois pas réviser la largeur du blog pour pouvoir caser les flèches ,donc avant de créer les miennesj aimerai connaitre ton avis ,merci encore de ton aide ,bonne soirée

    16
    Dimanche 2 Juin 2013 à 18:50

    Pour l'image qui suit le curseur, j'ai visité ton blog > ok > ras !!!
    Pour les flèches retour Haut/Bas, voici les codes :
    Code html:

    <!-------- Flèches Haut-Bas --------------->

    <div class="hautbas"><a title="Haut" href="#top"><img class="imghaut" src="http://ekladata.com/t7WlBCqQCb7BPYg-g_5Us1zGckI/fleche-bleu-en-hausse-de-icone-6442-96.png" alt="" /><br /></a> <a title="Bas" href="#footer"><img class="imgbas" src="http://data0.eklablog.com/papyrocktest/perso/fleche-bleu-en-baisse-de-icone-7812-96.png" alt="" /></a></div>

    Code CSS:

    .hautbas {
        positionfixed;
        right-10px;
        top340px;
        displayblock;
        z-index99;
        transition1s;
        
        
    }
    .hautbas img {
    width:60px;
    }
    .imghaut {
        opacity0.3;
        filter:alpha(opacity=50);/* For IE8 and earlier */
        box-shadow:0px 0px 0px 0px;
        
    }
        
    .imgbas {
        opacity0.3;
        filter:alpha(opacity=50)/* For IE8 and earlier */
        box-shadow:0px 0px 0px 0px;
    }    

    .imghaut:hover {
        opacity1;
        filter:alpha(opacity=100)/* For IE8 and earlier */
        -webkit-transition:opacity 1s;
        -moz-transition1s;
        transition1s;
    }
        
    .imgbas:hover {
        opacity1;
        filter:alpha(opacity=100)/* For IE8 and earlier */
        -webkit-transition:opacity 1s;
        -moz-transition1s;
        transition1s;
    }    

    15
    Meraviglia Profil de Meraviglia
    Dimanche 2 Juin 2013 à 17:28

    coucou mike ,ce que je ne comprenais pas c est pourquoi le curseur n allait pas en pleine page ,en étudiant ton code je vois souvent Top et left ,est ce qu il serait possible de l avoir sur tout le blog ?merci Mike de ton aide,et aussi je n arrive pas a accéder a ton lien flèche du haut et du bas pour voir ton code ,j ai une fenetre qui s ouvre en me disant qu il y a une erreur,merci encore

    14
    Samedi 1er Juin 2013 à 16:46

    Bah ....y a  qu' à pourtant ..!!!
    Le javascript doit être activé sur ton blog.
    Copier l'URL du curseur (adresse de stockage d'une image), ex avec le code:
    http://data0.eklablog.com/gege95/perso/divers_bd_074.gif 
    ceci est l'url de mon image curseur.
    Cette url-image, faut l'insérer à la place des url en rouge dans le code.
    Dans un module simple, en mode édition article (html)...
    Rafraichir la page (F5) et....c'est tout !!!

    13
    Meraviglia Profil de Meraviglia
    Samedi 1er Juin 2013 à 15:36

    coucou Mike ,je viens regarder tes conseils surtout pour le curseur,j y arrive pasa bientot,

    12
    ♥ Princesse Zelda ♥ Profil de ♥ Princesse Zelda ♥
    Jeudi 21 Mars 2013 à 23:54

    je ne comprend pas :/

    11
    Jeudi 21 Mars 2013 à 23:42

    Si c'est juste pour écouter en boucle le même morceau, voici un exemple :

    <object id="dewplayer" width="20" height="20" name="dewplayer" data="http://ekladata.com/v8tejSqezr-T9_7M2T0e4nRQ_Ng/dewplayer-mini.swf" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="wmode" value="transparent" /><param name="flashvars" value="mp3=http://ekladata.com/papyrocktest.eklablog.com/perso/audio/yonverter%20-vie1wa88moa-.mp3&amp;autostart=1&amp;autoreplay=1" /><param name="src" value="http://ekladata.com/v8tejSqezr-T9_7M2T0e4nRQ_Ng/dewplayer-mini.swf" /></object>

    (la longueur "width" est à l'origine = à 200px >  width="200")

    10
    ♥ Princesse Zelda ♥ Profil de ♥ Princesse Zelda ♥
    Jeudi 21 Mars 2013 à 23:06

    Sa y est javascript est activer ^^

     

    9
    ♥ Princesse Zelda ♥ Profil de ♥ Princesse Zelda ♥
    Jeudi 21 Mars 2013 à 21:39

    Merci beaucoup !! ^^

    juste une dernière question après je vous laisse tranqu'il .... ^^"

    Quand je laisse ma sourie sur l'un de vos visiteur (sans cliquer) le nom du visiteur a changer et le fond est transparent et arrondi j'adore ^^

    pourriez vous m'expliquer comment vous avez fait ?

    merci ^^

    8
    Jeudi 21 Mars 2013 à 21:32

    .window_content {

    border-radius: 20px;

    }

    .window_bottom {

    height: 0px;

    }

    7
    Jeudi 21 Mars 2013 à 19:58

    les 2 coins supérieurs sont des images et non des bords....

    .window_handle_content {
    border-radius: 20px 20px 0px 0px;
    }

    .window_handle_left {
    display: none;
    }

    .window_handle_right {
    display: none;
    }

    6
    Jeudi 21 Mars 2013 à 18:15

    Un exemple pour la fenêtre info visiteurs ??? 

    5
    ♥ Princesse Zelda ♥ Profil de ♥ Princesse Zelda ♥
    Jeudi 21 Mars 2013 à 17:52

    Merci beaucoup pour le code css pour les arrodisement des commentaire ^^

     le code a fonctionner ^^

    Savez vous le code CSS pour arrondir la fenêtre des visiteur s'il vous plait (pour arrondir les coin en haut a droite et a gauche) ? ^^"

    desoler pour toute les question et de vous embèter ^^"

    4
    Jeudi 21 Mars 2013 à 17:23

    /*--------------- Design commentaires -----------*/
    .comment_normal,.comment_admin {
    width99%;
    border2px solid #AAA;
    border-radius25px;

    margin-bottom10px;
        margin-top10px;
    }
    .comment_normal img,.comment_admin img{
      border-radius15px;  
    }

     

    3
    ♥ Princesse Zelda ♥ Profil de ♥ Princesse Zelda ♥
    Jeudi 21 Mars 2013 à 17:03

    J'ai déja fait une demande mais je n'ai eu aucune réponce je pense que je vais refaire une demande merci pour le lien ^^

    maintenant il faut que j'instale de la musique sur mon blogs ^^

    mais je ne comprend pas très bien comment fonctionne deezer et je n'arrive pas du tout a arrondir les fenetre d'information de mes visiteur, arrondir les fenetre des commentair .....

    Comment avez vous fait s'il vous plait ?

    2
    Jeudi 21 Mars 2013 à 16:55

    Salut!

    Il faut faire une demande d'activation de javascript, au support ici.
    (javascript est un langage informatique spécial internet)

    1
    ♥ Princesse Zelda ♥ Profil de ♥ Princesse Zelda ♥
    Jeudi 21 Mars 2013 à 16:18

    je n'y arrive pas :(

    Je ne sais pas se que c'est Javascript  ? c'est gratuit ?

     



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)