Répondre à la discussion
Affichage des résultats 1 à 2 sur 2

rollovers un peu différent



  1. #1
    Lucie10

    rollovers un peu différent


    ------

    bonjour, je voudrais créer une sorte de rollovers ou lorsque l'on passe sur l'image la couleur de fond du div change en passant par du code css et des class. Voici mon code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta
     content="text/html; charset=ISO-8859-1"
     http-equiv="content-type"><title>test2</title>
    <style type="text/css">
    *.cb {background-color:#222222;}
    *.chalon {background-color:#999999;}
    </style></head><body>test2<br><div
     style="width: 825px;" class="cb" name="tab"><a
     href="test" onmouseover="tab2.tab.className=chalon;"><img
     style="border: 0px solid ; width: 631px; height: 637px;" alt=""
     src="carte-de-france.png"></a><br></div></body></html>
    J'arrive pas à voir ce qui marche pas.

    -----

  2. #2
    polo974

    Re : rollovers un peu différent

    en utilisant les id au lieu des name et getElementById, c'est plus simple...
    1er div "comme tu veux ou presque"
    2eme div pour remettre le 1er en classe de départ
    3eme div ...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>test2</title>
    <style type="text/css">
    *.cb {background-color:#ffff00;}
    *.chalon {background-color:#00ff00;}
    </style>
    
    <script type="text/javascript">
     function ChangeClass(id,nouvelleClasse) {
       document.getElementById(id).className = nouvelleClasse;
     }
    </script>
    </head>
    <body>
    en utilisant les "id" à la place des "name"<br><br>
    
    <div style="width:200px; text-align:center;" class="cb" id="tab" >
     debut du div id=tab <br>
    <a href="test" OnMouseOver="ChangeClass('tab','chalon');">
    a<img style="border: 0px solid ; " alt="image pas là" src="icon3.gif">/a
    </a>
    <br>fin du div id=tab</div>
    <br>Il faut survoler le lien contenant l'image (et a et /a)<br><br>
    
    <div style="width:200px;" class="cb" OnMouseOver="ChangeClass('tab','cb');">
    zone pour revenir a la classe cb pour le test ci dessus...</div>
    
    <br>On peut aussi utiliser OnMouseOut pour revenir au style "de repos"<br>(mais c'est peut etre pas le but...)<br><br>
    
    
    <div style="width:200px; text-align:center;" class="cb" id="tab2" >
     debut du div id=tab2 <br>
    <a href="test" 
    OnMouseOver="ChangeClass('tab2','chalon');" 
    OnMouseOut="ChangeClass('tab2','cb');">
    a<img  style="border: 0px solid ; " alt="image pas là" src="icon3.gif">/a
    </a>
    <br>fin du div id=tab2</div>
    </body></html>

Discussions similaires

  1. rions un peu
    Par seizetheday dans le forum Technologies
    Réponses: 9
    Dernier message: 25/02/2008, 17h02
  2. un peu d'aide
    Par Lolette41 dans le forum Électronique
    Réponses: 3
    Dernier message: 05/09/2007, 20h14
  3. un peu d'electro
    Par alexlecobra dans le forum Physique
    Réponses: 3
    Dernier message: 20/05/2007, 12h45
  4. Un peu de logique...
    Par Archange21 dans le forum Mathématiques du supérieur
    Réponses: 1
    Dernier message: 13/02/2007, 12h07
  5. Quelqu'un peu m'expliquer un peu les métiers de l'infographie
    Par gaiaone dans le forum Orientation après le BAC
    Réponses: 0
    Dernier message: 12/02/2007, 16h15
Découvrez nos comparatifs produits sur l'informatique et les technologies.