rollovers un peu différent

invite66fa5dc5 · 05/03/2008, 18h14

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.

**polo974** · 06/03/2008, 08h52

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>

rollovers un peu différent

rollovers un peu différent

Re : rollovers un peu différent

Discussions similaires

rions un peu

un peu d'aide

un peu d'electro

Un peu de logique...

Quelqu'un peu m'expliquer un peu les métiers de l'infographie