Holas
El script que propones es un simple rollover, por eso se te queda a medias. Te pone una imagen inicial y en el evento onmouseover te lo cambia por otra imagen y en el evento onmouseout te vuelve a poner la que había.
Cita: ¿Me lo podrías modificar para que funcionara?
Como poder podría y el resultado sería que quedaría como el script que hice, así que mejor te explico cómo funciona.
Lo hice pensando en 3 imágenes o bullets. Si se quieren usar sólo dos es cuestión de llamar a la misma imagen en dos eventos.
Como queremos que la acción afecte además de a la imagen al texto de al lado, damos un identificador a cada uno de los textos a los que querremos cambiar el aspecto. Para ellos usamos los css que nos permite agrupar bajo un solo nombre tantos cambios en el aspecto como necesitemos. Así creamos 3 grupos (clases)de "aspectos" para cada momento del texto-enlace:
<style type="text/css">
<!--
.enlace1 { font-family: Tahoma, Verdana, Arial; font-weight: bold; color: #336699}
.enlace2 { font-family: Tahoma, Verdana, Arial; font-weight: bold; color: #6699CC }
.enlace3 { font-family: Tahoma, Verdana, Arial; font-weight: bold; color: #CC9900}
-->
</style>
.enlace1 será el aspecto que tendrá el texto en estado de "reposo"
.enlace2 guarda el aspecto que tendrá el texto en el momento en el que pasemos el ratón por encima de la imagen correspondiente.
.enlace3 el aspecto que tendrá el texto en el momento en que hayamos seleccionado esa opción y que quedará permanente mientras no pinchemos en otra opción.
El que estén sub-rayados o no o tenga un aspecto u otro yá es cuestión de aplicarlo a nuestro gusto, no tiene mayor problema.
Así inicialmente los textos llevan aplicados unos formatos agrupados dentro de la clase .enlace1
<a href="#"
class="enlace1" id="e1" onMouseDown="cambia2(1,1)">
Enlace1</a>
Luego ante eventos cambiamos la clase aplicada a ese texto y logramos esos cambios de aspecto que, según los colores que hayamos aplicado pretenden dar ese efecto como de iluminación (relativo)
Si no quieres que se vean sub-rayados basta con que agregues a cada clase el dato:
.enlace1 { font-family: Tahoma, Verdana, Arial; font-weight: bold; color: #336699
; text-decoration:none}
Las imágenes:
Queremos que al pasar el ratoncillo por encima de la imagen ésta cambie por otra. Claro que además queremos que ocurra un cambio de aspecto en el texto contíguo, así que agrupamos en una función las instrucciones:
function cambia(cual,enl)
{
document.getElementById(cual.id).src='bolitaroja.g if'
document.getElementById(enl).className='enlace2'
}
Al llamar a la función desde la imagen pasamos el dato de a qué dos elementos queremos aplicar cambios. cual guarda a qué imagen se aplica, enl a qué enlace.
getElementById ¿qué significa? pues yá lo dice el nombre. Obtener o encontrar a un elemento mediante su id (identificador).
<img
id="ima1" src="bolitaamarilla.gif" width="10" height="10" border="0"
onMouseOver="cambia(this,'e1')" onMouseOut="restaura(this,'e1')" onMouseDown="cambia2(1,1)">
cambia(this,'e1') ahí le hemos pasado el dato de que la función se aplique a si misma y al elemento de id 'e1' (el enlace de al lado)
Pero sucede que la función será llamada tanto cuando esté en estado "reposo" como cuando esté en estado "seleccionado" y quiero que trate a los enlaces en forma diferente dependiendo del estado en el que se encuentren.
Si está en reposo, quiero que cambie el aspecto del texto. Pero si está "seleccionado" quiero que deje el texto como está (pa que se vea que está seleccionado) así que añado unos condicionales.
¿cómo puedo saber si está en un estado u otro? verificando qué clase tiene aplicada el texto en ese momento.
if(document.getElementById(enl).className=='enlace 3')
Si el enlace que pasamos como argumento está en la clase enlace3 está en momento "seleccionado" así que no quiero que cambie el texto, pero sí la imagen:
{document.getElementById(cual.id).src='bolitaroja. gif'}
Si no está en en ese estado, le pido que además de la imagen me cambie el aspecto al texto
else{
document.getElementById(cual.id).src='bolitaroja.g if'
document.getElementById(enl).className='enlace2'
}
Así la función queda como
function cambia(cual,enl)
{
if(document.getElementById(enl).className=='enlace 3')
{document.getElementById(cual.id).src='bolitaroja. gif'}
else{
document.getElementById(cual.id).src='bolitaroja.g if'
document.getElementById(enl).className='enlace2'
}
}
OK, vamos a por la siguiente función. La que restaura la imagen y la clase del texto al sacar el ratoncillo de encima.
function restaura(cual,enl)
{
cual.src='bolitaamarilla.gif'
document.getElementById(enl).className='enlace1'
}
Pasamos los mismos argumentos: id de imagen e id del texto al que queremos cambiar la clase.
PERO.
Cuando hagamos click se aplicará una instrucción similiar pero tras hacer el click y cambiar la imagen ¿qué hacemos? sacar el ratón de encima, con lo que se llama de nuevo a la función restaurar y se nos queda de nuevo la imagen inicial y el texto con la clase 1.
Así que tendremos que verificar de nuevo en qué momento o estado se encuentra la imagen y texto. Otra vez verificamos mediante la clase que tenga el texto aplicada.
¿Que la clase que tiene es la 1 (estado reposo)? onmouseout cambia a una imagen y a una clase (al estado reposo). ¿que la clase es la 3 (estado seleccionado)? onmouseout cambia sólo la imagen pero a otra (estado seleccionado) y el texto queda en la clase 3
function restaura(cual,enl)
{
if(document.getElementById(enl).className=='enlace 3')
{cual.src='bolitaazul.gif'}
else{
cual.src='bolitaamarilla.gif'
document.getElementById(enl).className='enlace1'
}
Al hacer click.
Hacer que la imagen que llama a la función cambie junto con el texto correspondiente es más de lo mismo. El tema está en qué pasará cuando haga click en el siguiente enlace o imagen? que quedarán dos en el estado "seleccionado". Como la idea es que sólo se vea uno seleccionado, necesitamos "resetear" cualquier imagen y texto que pudiera estar en ese momento en estado seleccionado. Así que creamos un bucle que uno a uno repase las imágenes y los textos que repasará tantos elementos como enlaces/imagenes tenemos. Como no sé si en la misma página habrán otros enlaces que no deban verse afectados por el script en lugar de pedirle que repase todos los enlaces (igual quieres actuar en 8 pero resulta que tienes 10) lo que hacemos es guardar el número de enlaces en una variable y lo ponemos a mano: var enlacillos=8
Por supuesto, cada imagen y texto llevará su identificador que será la misma palabra mas un número.
function cambia2(cual,enl)
{
for(m=1;m<=enlacillos;m++)
{
document.getElementById('e' + m).className="enlace1"
document.getElementById('ima' + m).src="bolitaamarilla.gif"
}
Así en la primera vuelta buscará el elemento cuyo id sea 'e' + m (que resulta en 'e1') y le aplica la clase 1 (estado reposo) y además buscará todos los elementos cuyo id sea 'ima' + m ('ima1') y le pondrá la imagen del estado reposo.
Cuando los ha reseteado todos, le aplica el estado seleccionado al elemento que llamó a la función y al texto correspondiente.
document.getElementById('ima' + cual).src='bolitaazul.gif'
document.getElementById('e' + enl).className='enlace3'
}
De forma que la función queda como:
function cambia2(cual,enl)
{
for(m=1;m<=enlacillos;m++)
{
document.getElementById('e' + m).className="enlace1"
document.getElementById('ima' + m).src="bolitaamarilla.gif"
}
document.getElementById('ima' + cual).src='bolitaazul.gif'
document.getElementById('e' + enl).className='enlace3'
}
Finalmente nos queda hacer las llamadas a estas 3 funciones desde cada elemento:
<a href="#"><img id="ima1" src="bolitaamarilla.gif" width="10" height="10" border="0" onMouseOver="cambia(this,'e1')" onMouseOut="restaura(this,'e1')" onMouseDown="cambia2(1,1)"></a><a href="#" class="enlace1" id="e1"
onMouseDown="cambia2(1,1)">
Si te fijas el texto no llama a las funciones al pasar el ratón por encima (se encarga la imagen de alterar el aspecto del texto) pero si se hace click en el enlace en lugar de en la imagen, es también necesario que el aspecto de ambos cambien para indicar que están en estado seleccionado.
onMouseDown="cambia(1,1)" los argumentos que pasamos a la función son la única parte de los identificadores que cambia.
Si lo que quieres es usar sólo dos imágenes, no tienes más que cambiar los nombres de la tercera imagen al de la segunda.
Uf, he tratado de explicarlo lo mejor que he podido. Si algo no te queda claro tú pregunta
Ala, yá me dirás algo.
Un saludo