Image et texte au passage de la souris sur photo.

Bonjour,

je désire modifier un code qui pour le moment permet d'ouvrir une petite fenêtre au passage de la souris sur un lien. Ce que j'aimerais, c'est savoir ce qu'il faut que je modifie pour que cela s'effectue non pas au dessus d'un lien mais au dessus d'une image.

Je vous colle le lien en vous remerciant par avance pour l'aide que vous pourrez m'apporter.



<STYLE type="text/css">
<!--
body{
margin:0px;
padding:0px;

}

h1 {
font-family:arial, verdana, sans-serif;
font-size:16px;
font-weight:bold;
color:#C0A745;
}

a.bulle {
position:relative;
color:#C0A745;
text-decoration:none;
font-family:arial, verdana, sans-serif;

font-size:11px;
}

a.bulle:hover {
background: none;
z-index: 50;
}

a.bulle span {
display: none;
}

a.bulle:hover span {
display: block;
position: absolute;
top: -10px;
left: 40px;
font-family:arial, verdana, sans-serif;
text-align:justify;
font-size:12px;
font-weight:normal;
width:400px;
background: white;
padding: 5px;
border: 1px solid #C0A745;
border-left: 50px solid #C0A745;
}

-->
</STYLE>





<br><br><br><br><br>

 <a href="#" class="bulle">passage souris <--- pour le moment, la petite fenêtre s'ouvre lorsque je passe la souris sur cette phrase "passage souris"

<span>
<img src="allagelena.jpg" align="right" style="margin-left:15px;">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit laoreet mollis, dolor. Suspendisse porta. amet, consectetuer adipiscing elit. Etiam consequat.
Nulla mattis faucibus nisi. Morbi pede nunc, laoreet non, rhoncus quis,
laoreet mollis, dolor. Suspendisse porta.
</span>

</a>




<text-align:center;>