Discussion :

[ml1234]

bonjour,
j'ai un box réalisé avec une table (en attendant de faire mieux avec div et classe) et je souhaiterais qu'au survol, le fond blanc devienne bleu comme sur site herbots.be

ci-dessous mon css et mon code et ensuite le morceau de code de herbots.be qui fonctionne mais je comprends rien (parent, this classname, return document,...).
Quelqu'un peut-il me dire comment changer mon code autour de mon img ? ce sont des menus tout faits de dreamweaver qui font cela, un peu comme l'insertion d'une image survolée ???

merci d'avance
Marc

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
.onecolarray_box {
	border: 1px solid #b0bec7;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #FFFF00;
	padding: 0px;
	margin-top: 20px;
	margin-right: 5px;
	margin-bottom: 20px;
	margin-left: 5px;
}
 
.onecolarray_entete {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #336699;
	background-color: #B5CDE6;
	text-align: right;
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #b0bec7;
}
 
.onecolarray_img {
	background-color: #FFFFFF;
	padding: 10px;
	margin: 0px;
}
 
 
.m-verMouseOut {
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: thin none;
	text-decoration: none;
	color: #000000;
	cursor: hand;
}
 
.m-verMouseOver {
	background-color: CCDDEE;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: thin none;
	text-decoration: none;
	color: #000000;
	cursor: hand;
}
 
 
 
 
<table class="onecolarray_box" width="460" border="0" cellspacing="0" cellpadding="4">
        <tr> <td> <div class="onecolarray_entete">22/05/2009</div></td> </tr>
        <tr> <td> <div class="onecolarray_img"><img src="../images/monimage.jpg" /></div></td> </tr>
</table>

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<tr> 
	<td colspan="2" class="m-verMouseOut" onClick="MM_goToURL('parent','/about_the_herbots/news/content.asp?id=241');return document.MM_returnValue" onMouseOver="this.className='m-verMouseOver'; style.cursor='hand'" onMouseOut="this.className='m-verMouseOut'" valign="top" align="left"> 
	<div align="left"> 
 
	 <img src="Herbots%20-%20Pigeons%20Duiven%20Taube_fichiers/raf_medisch_2009_bn.jpg" alt="raf_medisch_2009_bn.jpg" align="left"> 
 
	</div>
	<div align="right"></div></td>
</tr>

[12monkeys]

Bonjour

Là ton second exemple c'est fait grâce à javascript...

Code :

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

onMouseOver="this.className='m-verMouseOver'; style.cursor='hand'" onMouseOut="this.className='m-verMouseOut'"

qui doit changer la classe appliquée en fonction de ce que la souris se trouve sur l'élément ou pas...

Tu peut soit le faire avec javascript, soit en pur css : utilises alors la pseudo class :hover qui pemet d'appliquer un style au survol d'un élément.

Attention : :hover ne fonctionne que sur un lien (<a href...> avec IE 6

[ml1234]

ah, c'est pour cela que je ne comprenais rien ! je ne suis pas encore arrivé au stade javascript.

j'ai créé un lien ahref sur l'image et ajouté un a et a:hover avec deux définitions de background-color mais ça marche pas car à mon avis le "a" ne sait pas qu'il est dans un div dont il doit changer le bkg-color.

merci
Marc