image over sur css avec button et texte

Bonjour

j'ai recupere sur un site un css et html pour faire des coins rond http://alistapart.com/articles/customcorners/ , cela fonctionne .
Ensuite j'ai integre cela dans un tag button, afin que mon bouton est des coins ronds, et soit auto agrandissable en fonction du texte.
Je n'ai pas mis une image, car je dois traduire le texte du bouton qui est à cote de l'image.
J'ai pris un tag "button" et non href a cause du fait que je dois pouvoir disabeler le bouton ou le cacher
Mon probleme actuel est que je ne peux pas faire de rollover sur mon image.
J'ai bien essaye le hover, mais sans succes
Voici mon source actuel sans le hover

Merci d'avance
Philippe

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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!--  contentType="text/html; charset=UTF-16" -->
 
 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 
  <meta http-equiv=Accept-Language CONTENT="fr" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
border: 0;
height: 100%;
max-height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #cbdea8;
}
 
 
 
/* Style du bloc avec angles arrondis*/
div.bloc {
    background: url('custom_corners_topleft.gif') top left no-repeat;
    display: table;
}
 
div.blocp {
    background: url('custom_corners_topright.gif') top right no-repeat;
    padding: 10px 13px .2em 15px;
    padding-bottom: 0px;
        padding-top: 5px;
    margin: 0;
}
 
div.bloccorps {
    background: url('custom_corners_rightborder.gif') top right repeat-y;
    margin: 0;
    margin-top: -25px;
    padding: 15px 15px 0 15px;
}
div.blocpied {
    background: url('custom_corners_bottomleft.gif') bottom left no-repeat;
}
 
div.blocpied p {
    background: url('custom_corners_bottomright.gif') bottom right no-repeat;
    padding: 5px 15px 13px 15px;
    display: block;
    margin: -0px 0 0 0;
    text-align: center;
}
 
 
a.bouton,
button.bouton {
    display:-moz-inline-box;
    display:inline-block;
    margin:0;
    padding:0;
    font:16px/1.5 Trebuchet MS, Arial, Helvetica, sans-serif;    /* Police du bouton */
    white-space:nowrap;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    border:0;
    background:none;
}
 
</style>
 
 
</head>
<body>
 
<button class="bouton" id="precsuive4" accesskey="I" >
<div class="bloc">
  <div class="blocp">
 
<table><tr><td><img src="maison.png" width="24" height="24" border="0" onmouseover="this.src='graph1.png'" onmouseout="this.src='maison.png'" /></td><td><u>I</u>nfodev</td></tr></table>
  </div>
  <div class="bloccorps">
  </div>
  <div class="blocpied">
  <p></p>
  </div>
</div>
</button>
</BODY>
</HTML>