Discussion :

[Babatoa]

Bonjour à vous tous,

Je suis actuellement en train de développer un site perso assez simple. Je suis novice en développement et j'apprends pas à pas. Je suis actuellement bloqué sur un élément que j'aimerai développer sur mon site.

C'est un bouton fixe sur la home qui me permettrait d'afficher deux nouveaux éléments à l'ensemble de mes pages: un background image (il n'y a au départ qu'un bacckground-color) ainsi qu'une image qui follow le curseur de la souris. Quand le bouton est désactivé, ces deux éléments doivent être invisible.

Après mettre renseigné sur le web je pense que je dois utiliser cette fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function bascule(){
          var etat = document.getElementById('div1').style.display;
          var bouton = document.getElementById('afficheCache');
 
          if (etat =='none'){
          document.getElementById('div1).style.display='block';
          bouton.value = 'Cacher la balise div';
      }
      else{
      document.getElementById('div1').style.display='none';
      bouton.value = 'Afficher la balise div';
      }
}

J'espère être suffisamment clair, merci de votre attention

[ryan]

Yop!

Il manque le guillemet fermant après div1 dans la ligne 6. Cela dit, ta fonction "bascule" devrait fonctionner, pour autant que l'HTML suive.
Pour ce qui est de faire suivre le curseur par une image, tu y tiens vraiment? Perso, ça m'énerverait assez vite.

[Babatoa]

Bonsoir en merci de votre rapidité de réponse, en effet j'ai fait un petit oubli au niveau de l'écriture merci.

Par contre, je vais essayer d'être plus clair car mon niveau étant assez bas, j'ai besoin d'une aide plus précise si possible. En effet je sais que c'est plus que déconseillé d'insérer un mousemove mais c'est dans le cadre d'un mode "activable" un peu spécial, je vais essayer de mieux l'expliquer

Mon souhait est d'insérer dans mon header un bouton fixe activable. J'ai rapidement fait une maquette pour que vous arriviez à le visualiser. C'est le bouton en haut à droite, qui sera représenté par une image.



Lorsque le bouton est activé, un background-image se rajoute au body de mon site (ici se sont les dinosaures jaunes, mode repeat) ainsi qu'une image qui follow mon curseur (le dinosaure noir) comme vous pouvez le voir sur cette maquette rapidement réalisée.



Pour se qui est du code je suis, je dois l'avouer, un peu à la ramasse. Pour le moment j'ai posé ceci, avec la fonction if/else javascript :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="my_button">
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    $('#my_button').click(function(){
    $(this).toggleClass("button_active");
    if ( $(this).is('.button_active'){
        $('body').bind('mousemove', function(){ });
        $('body').addClass("custom_background");
    } else {
        $('body').unbind('mousemove');
        $('body').removeClass("custom_background");
    }
});

Je pense être sur le bon chemin mais pour le moment cela ne donne absolument rien.
Je ne sais pas comment rendre le bouton activable et je ne sais vraiment se que je dois mettre en css pour pouvoir poser un background-image, ainsi qu'activer mon mousemove.

Je suis désolé de vous demander autant d'information mais cela m'aiderait grandement.

[ryan]

Yop!

Sans préjuger du fonctionnement possible du code, il me semble qu'il manque une parenthèse fermante à la ligne 10 du code que tu as posté dans ton message, et aussi une accolade et une parenthèse fermantes pour la déclaration de la fonction du click. Ceci devrait corriger au moins ces problèmes-là:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    $('#my_button').click(function(){
        $(this).toggleClass("button_active");
        if ( $(this).is('.button_active') ){
            $('body').bind('mousemove', function(){ });
            $('body').addClass("custom_background");
        } else {
            $('body').unbind('mousemove');
            $('body').removeClass("custom_background");
        }
    });
});

[Babatoa]

YES !!
Merci maintenant cela fonctionne, après avoir rajouté le code css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body.custom_background {
   background-image:url(<a href="http://zupimages.net/up/14/46/pd70.png);" target="_blank">http://zupimages.net/up/14/46/pd70.png);</a>
}

j'ai bien un nouveau background qui se rajoute en cliquant sur mon bouton.

Maintenant il ne me reste plus que le fait d'avoir une image qui follow mon curseur (je sais que ça vous paraît étrange mais faut pas chercher à comprendre )

J'ai essayé de compléter dans la div id="my_button" le code html et javascript en dessous :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="my_button">
    <img src="http://zupimages.net/up/14/46/rv2q.png" class="follow" id="mousemove">
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#mousemove").mousemove(function(e){
  $('.follow').css({'top': e.clientY - 25, 'left': e.clientX - 190});
});

mais cela ne fonctionne pas.

[ryan]

Yop!

Il faut impérativement que l'image qui doit suivre le curseur soit en "position: absolute"
Edit: et ne pas oublier de tenir compte du scroll possible de la page, et du fait qu'il faille exprimer le left et le top en px, si je ne me trompe pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
theleft = e.clientX + window.pageXOffset - 25;
thetop = e.clientY + window.pageYOffset -190;
 
 $('.follow').css({'top':thetop + 'px', 'left':theleft + 'px'});

Edit again: et placer l'événement mousemove sur le document ou sur le conteneur si le follow doit être limité à une partie de la page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).mousemove.....