Changer l'image au survol (javascript) ?

Fermé
angy - 1 avril 2010 à 19:54
 angy - 5 avril 2010 à 11:26
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) !!!

A voir également:

4 réponses

Réponse 1 / 4
Utilisateur anonyme
Modifié par Chris 94 le 27/02/2011 à 15:09
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
Réponse 2 / 4
angy
1 avril 2010 à 19:58
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
Réponse 3 / 4
creadiff Messages postés 445 Date d'inscription samedi 3 avril 2010 Statut Membre Dernière intervention 3 novembre 2011 57
3 avril 2010 à 10:49 
     ...
     <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
Réponse 4 / 4
angy
5 avril 2010 à 11:26
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