Changer l'image au survol (javascript) ?

Fermé
Signaler
-
 angy -
Bonjour,

Je sais que les réponses à ma question surfacent littéralement google mais j'ai besoin d'une réponse précise car j'ai essayé vainement différents codes et étant débutant en javascript je n'arrive finalement pas à régler mon problème qui est le suivant :

Je souhaite crée une page administrateur basique avec, au survol d'un des boutons, le background du bloc contenant les boutons se changeant. En gros dès qu'on survol l'un des 8 boutons le background du bloc change, puis, en sortant de la zone de survol du bouton, redevient background de départ.

Ma question est donc quel est le code javascript et html à intégrer pour avoir cet effet de changement de background au survol d'un bouton ?
Les différentes images de background (en fonction des boutons survolés) sont dans des class css (1 classe avec 1 background différent pour chaque survol de bouton).

J'ai bien essayé des fonctions onmousehover ou je ne sais plus trop quoi, mais je n'arrive pas à les faire fonctionner :-(

Un grand merci à mon/mes futur(s) sauveur(s) !!!

4 réponses

Download CSS-tab , le java est bien trop demandeur de ressource pour faire ca
on fais en css c plus simple et plus light...
http://www.infos-du-net.com/telecharger/Tab-Designer-CSS,0307-3852-8190.html

il te fabrique le menu les image le code tous ...

free download here=> http://www.infos-du-net.com/telecharger/Tab-Designer-CSS,0301-3852.html
__
Publicité supprimée par la Modération
1
Ah oui, j'ai oublié de préciser : je crois avoir vu dans un forum qu'il serait bon de passer par un changement de contenu de mon div (en l'appelant en jscript via son id) puis de modifier son contenu, dont la classe qui y est présente. Si ça peut donner des idées de solution à certains d'entre vous ...
0
Messages postés
445
Date d'inscription
samedi 3 avril 2010
Statut
Membre
Dernière intervention
3 novembre 2011
58
     ...
     <script type="text/javascript">
          var bloc = document.getElementById('bloc_a_modifier');
          var boutons = bloc.getElementsByTagName('button');
          function init() {
               for (var i in boutons) {
                    var over = function() {
                         bloc.backgroundPicture = 'url(image_modifiee_' + i + '.png';
                    }
                    var out = function() {
                         bloc.backgroundPicture = 'url(image_de_base.png';                
                    }
                    boutons[i].onmouseover = over;
                    boutons[i].onmouseout = out;
               }
          }
     </script>
</head>

<body onload="init();">
     <div id="bloc_a_modifier>
          <button>Bouton1<button>
          <button>Bouton2<button>
          <button>Bouton3<button> 
          <button>Bouton4<button>
          ...
     </div>
     ...



Voilà ce qu'il faut mettre sur ta page pour obtenir l'effet escompté !
Au survol du premier bouton, l'image du fond deviendra 'image_modifiee_0', '..._1' pour le deuxième bouton, etc.

Attention ! Ce script permet de modifier le fond quand les BOUTONS sont survolés; si tu veux faire la même chose avec des liens par exemple, il faudra alors substituer
          var boutons = bloc.getElementsByTagName('button');


par

          var boutons = bloc.getElementsByTagName('a');



bloc.getElementsByTagName('nombalise') sert à répertorier toutes les balises dont on a indiqué le nom et qui se trouvent dans le bloc.
0
Merci creadiff :-) . Je vais essayer ça. Et si cela ne marche pas je vais me tourner vers une solution flash clé en main que je viens juste de trouver. Donc je marque le sujet résolu.
0