rollovers un peu différent

**Lulu_n10** · 05/03/2008, 20h16

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 :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!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.

j'ai aussi essayé sa:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!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">
table#cb {background-color:#555555;}
table#chalon {background-color:#A80000;}
</style></head><body>test2<br><table id="cb"><tbody><tr><td
 style="width: 825px;"><a href="test"><img
 class="chalon"
 style="border: 0px solid ; width: 631px; height: 637px;" alt=""
 src="carte-de-france.png" onmouseover="this.className='chalon';"></a><br></td></tr></tbody></table></body></html>

mais sa modifie le td alors que je souhaiterais modifier le table.

**riaStudio** · 05/03/2008, 22h32

Voici une solution simple ne nécessitant aucun javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#carte-de-france {
    display: block;
    width: 631px; height: 637px;
    background-image: url(carte-de-france.png);
    background-repeat: no-repeat;
	background-color: #222222;
}
#carte-de-france:hover {
	background-color: #999999;
}
</style>
</head>
 
<body>
 
<a href="#" id="carte-de-france"></a>
 
</body>
</html>

La transparence des png est assez mal supportée, si tu le peux préfères une image au format gif.

rollovers un peu différent

CSS

Vue hybride

Discussions similaires

Partager

Partager