hover sobre texto?

[emprear]

Que te parece mejor si te lo explico en detalle y vos lo adaptas, asi de paso aprendés un poco más

La situacion es esta:
vos tenes dos divs uno al lado del otro (imaginémoslos como dos cuadros. derecho e izquierdo)
El de la izquierda tiene una imagen que corresponde a cada elemento de un menu que está a la derecha(en forma de ul)
Ahora, al pasar el mouse en cada elemento de ese menú, la imagen debe cambiar por otra asociada a ese elemento.
Convengamos tambien en que al cargar la página ese espacio con la imagen puede cargar una imagen por defecto, que puede ser la del primer item del menu, otra imagen o simplemente una imagen en blanco, eso es a tu gusto.
Ahora, lo que en tu código es

Código HTML:

<div class="leftSidebar"><img src="images/bruixa.gif" alt="" width="312" height="598" /><br /><br />
        </div>
        <div class="rightSidebar">
        <h1><u>ÉSSERS LEGENDADRIS</u></h1><br />
         <ul>
            <li><a href="#"><strike>Bruixes</strike></a></li><br />
            <li><a href="#"><strike>Bandolers</strike></a></li><br />
            <li><a href="#"><strike>Pirates</strike></a></li><br />
            <li><a href="#"><strike>Oficis màgics</strike></a></li><br />
        </ul>
                </div>
 

Esos son los dos divs ó cuadros, y. por lo visto, pese a mi nulo catalán, la imagen por defecto corresponde al menu 1 (bruixa = bruixes)

en mi código, en lugar de eso, tenemos

Código HTML:

<div class="contiene_foto">
<img src="fotopordefecto.jpg" alt="" id="foto" width="200" height="200" />
</div>
<div class="contiene_menu">
<ul>
<li><a href="#" onmouseover="document.getElementById('foto').src='dos.jpg';"  onmouseout="document.getElementById('foto').src='fotopordefecto.jpg';">item menu</a></li>
</ul>
</div>
 

que no son ás ni menos que dos cuadros, uno a derecha con la foto y otro a la izquierda con el menú, posicionados con el css, aunque eso no viene al caso para el efecto.

La substitución de la imagen se consigue con

Código HTML:

onmouseover="document.getElementById('foto').src='dos.jpg';"
 

que traducido al castellano significa que:

Al pasar el mouse sobre ese elemento <a> se va a reemplazar el atributo src del elemento que tenga por id el valor 'foto'
de la misma forma, y esto ya no lo traduzco, al hacer onmouseout, va a volver a reemplazar la imagen por la original (fotopordefecto.jpg)

Espero lo entiendas, y hay muy buenos manuales en librosweb.es

SAludos