modification image background

Version imprimable

12/04/2008, 20h17
rif15

modification image background
Bonjour,
Je suis actuellement confronter a un probléme :s
Effectivement, j'ai une image qui est en background dans un tableau, est j'aimerais que lorsque la souris passe sur l'image (image vide) présente dans le td, mon background se modifie.

Plus précisement:
J'ai un tableau:
Code:

1 2 3 4 5 6 7 <table> <tr> <td background="image.gif"> //image de fond qui doit changer <img src=vide.gif> //image transparente qui servira de bouton </td> </tr> </table>
une image:
new.gif qui doit remplacer image.gif lors du passage de la souris sur vide.gif (qui prend toute la cellule td)
Voila donc si certain on des idées je prend tout merci a vous

essaie d'attribuer une classe à ton TD (img1 par exemple) et d'en changer le nom lors du passage de la souris ...

Code:

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
<html>
<head>
<style>
.img1{
background-image: url(image.gif);
width: 200px;
height: 200px;
}
.img2{
background-image: url(vide.gif);
width: 200px;
height: 200px;
}
</style>
</head>
 
<body>
<table>
<tr>
<td class="img1" onmouseOver="this.className='img2';">
eeeeeee
</td>
</tr>
</table>
</body>
</html>

16/04/2008, 01h22
rif15

Merci de ta reponse :) , sa marche correctement, mais lorsque la souris passe sur la zone en rollover, le symbole de ie clignote/saute dans l'onglet, quelq'un sait de quoi sa vient et comment l'eviter?
20/04/2008, 23h22
rif15
Personne n'a d'idée?? car l'effet rollover marche correctement, mais le favicon présent dans l'onglet de ie "scintille" :s c'est un peu génant pour donner un aspect pro

Quelqu'un a une idée, on ma déja proposé un probléme de chargement des images (et j'ai crut ma solution enfin trouvé) mais sa ne semble pas etre sa, j'ai tester en affichant les images en haut du site (pour quel soit déja chargé), et le pb est toujours la :s, sa se reproduit a chaque passage et pas seulement au premiers:s
je mets le code :
Code:

1 2 3 4 5 6 7 <table> <tr> <td class="news" onmouseOut="this.className='news';" onmouseOver="this.className='news1';" colspan=2 width="118" height="34"> </td> </tr> </table>
css:
Code:

1 2 3 4 5 6 7 8 9 10 11 .news{ background-image: url(design/2/news1.png); width: 118px; height: 34px; } .news1{ background-image: url(design/2/news2.png); width: 118px; height: 34px; }
je suis preneur de toutes solution :)