onmouseover imagen y texto

[Mixigodo]

Buenas:
Quiero colocar en el pié de página de una web la opción de seleccionar entre varios idiomas. Para ello, quiero hacer lo siguiente: cuando el ratón no esté encima del idioma en cuestión, saldrá una bandera del idioma y el nombre de esa lengua, pero cuando se pose el ratón por encima del idioma o de la bandera, que se resaltaran y la imagen cambie, para que el usuario sepa que se trata de un enlace. Ejemplifico:

Sin pasar el ratón por encima:

Español

Con el ratón encima: (del texto o de la imagen)

Español

Y que todo ello funcione como un enlace. Es decir, quiero que funcione como un único objeto, para que al pone el ratón encima (del texto o de la imagen solamente) cambie la imagen y resalte el texto como enlace que es.

Sé resaltar la imagen solamente, de hecho es lo que tengo. Os dejo el código por si me podéis echar una mano (todavía no he añadido en enlace):

Código HTML:

<img src="bandera.gif" onmouseover="this.src = 'bandera1.gif'" onmouseout="this.src = 'bandera.gif'"  width="23" height="13" /> Español | <img src="bandera2.gif" onmouseover="this.src = 'bandera3.gif'" onmouseout="this.src = 'bandera2.gif'"  width="23" height="13" /> Inglés

No sé si me he explicado del todo bien. La verdad es que lo he liado bastante, pero creo que no debe ser muy complicado.
¡¡Muchas gracias!!

PD: He buscado en google y en el foro, pero no he encontrado respuesta. Pido perdón si he publicado el tema en donde no era.

[bitbow]

Hola!!

Puedes agrupar los elementos dentro de <a href="link"><imagen><enlace></a>

No se si te refereias a esto.

Suerte.

[Mixigodo]

Antes de nada, muchas gracias por tu respuesta.

No, no es exactamente eso lo que busco. Hasta ese punto he llegado, así consigo que funcionen como un único enlace. Sin embargo, lo que quiero es que al pasar el ratón sobre el texto no sólo se resalte el texto, sino que cambie también la imagen.

A ver si alguien sabe cómo hacerlo :)

Gracias de nuevo, un saludo!

[kraneok]

Lo suyo sería que usases innetHTML.

Supongo que esto funcionaría.
Para empezar darle una id al img:

Código:

<img id="idimg" src="" name="" otrasetiquetasyventos="">

.js

Código:

function xxxx(){ <- Se activa con onmousover
var imgId = document.getElementById("idimg");
var texto = imgId.innerHTML;
imgId.innerHTML = "<u>" + texto + "</u>";
}

Creo que esto debería funcionar.

[Mixigodo]

Hola de nuevo.

Antes de nada, muchas gracas kraneok. He estado mirando eso que dices del innet HTML, y he mirado algo por google de cómo funciona, pero la verdad es que no acabo de entenderlo del todo bien (soy muy novato y autodidacta).

Al final he optado por dejar simplemente las imágenes de las banderas y eliminar el texto. De esta forma me llega con utilizar la función "onmouseover" y "onmouseout". Estéticamente también me sirve, por lo que me decanto por lo sencillo.

¡Muchas gracias por las respuestas!

[ArturoGallegos]

quizás no es lo que buscas pero a mi parecer el efecto que buscas se puede lograr fácilmente con CSS

te dejo link a un ejemplo rápido -> clic aquí

[Mixigodo]

Iniciado por Ag666

quizás no es lo que buscas pero a mi parecer el efecto que buscas se puede lograr fácilmente con CSS

te dejo link a un ejemplo rápido [URL="http://bit.ly/x7mlPy"]-> clic aquí[/URL]

Muchíiiiiiiiiisimas gracias!! Exactamente es eso lo que estaba buscando!!

Gracias a todos, y disculpad las molestias!