hover sobre texto?

[lincenegro]

Buenas emprear!

Pues tienes toda la razon, estuve toda la tarde intentando hacer esto por mi mismo, pero sin mucho exito y el ultimo recurso fue escribir al foro, pero estaba algo espeso y me equivoque. Pido disculpas por el malentendido.

El tema es el siguiente:

Tengo una imagen al cual quiero que al ponerle el raton encima salga un texto a la derecha, como si fuera una capa oculta que al poner el raton donde yo quiero deje de estar oculta.

Dejo un enlace a una imagen, no consigo que salga:

http://imageshack.us/photo/my-images/819/capturadepantalla201112aa.png/

Como puedes ver sale la imagen de girona, pues quiero que al poner el raton encima de la imagen a la derecha salga un texto. Al igual que en el dibujo de barcelona y aun le faltan dos mas, que por no poner una foto muy grande no sale.

El html actual es el siguiente:

Código HTML:

<!-- start content -->
    <div id="content">
        <div class="post">
            <a href="#" onmouseover="document.getElementById('girona').src='images/img02.gif';"  onmouseout="document.getElementById('girona').src='../menu%20pobles/images/barcelona.gif';"></a>
        </div>
    </div>
    <!-- end content -->
  <div id="inici-index">
        <div id="inici"><a href="http://www.forosdelweb.com/f4/index.html"><h3>INICI</h3></a></div><div id="inici2"><a href="index.html"><h3>INDEX</h3></a></div>
    </div>
    <!-- start sidebar -->
    <!--[START-QM0]--><ul id="qm0" class="qmmc">
    <h1>GIRONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/girona.gif" alt="" id="girona" />
    <h1>BARCELONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/barcelona.gif" alt="" id="barcelona" />
    <h1>TARRAGONA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/tarragona.gif" alt="" id="tarragona"  />
    <h1>LLEIDA</h1>
    <img src="http://www.forosdelweb.com/f4/menu%20pobles/images/lleida.gif" alt="" id="lleida" />
  <!-- end sidebar -->
 

Gracias!!!!