Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso.
Las cookies de este sitio web se usan para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Además, compartimos información sobre el uso que haga del sitio web con nuestros partners de redes sociales, publicidad y análisis web, quienes pueden combinarla con otra información que les haya proporcionado o que hayan recopilado a partir del uso que haya hecho de sus servicios. Puede cambiar la configuración u obtener más información aquí

Aceptar

Iluminar Botón

Google

Menús y navegación

Iluminar Botón

La persona que pidió un script que hiciera lo que hace este script, en su día lo llamó así "Iluminar botón".
Si bien no me parece que iluminemos ningún botón, le dejé el nombre tal cual porque no se me ha ocurrido otro mejor.

La idea principal era crear un efecto de cambio de imágenes (mouseover y mouseout) sobre unas bolitas tipo viñetas junto a enlaces de texto y que además afectara al aspecto de esos enlaces de texto.
Además de en los estados over y out debía poder cambiarse a una tercera imagen y un tercer aspecto en los enlaces de texto al hacer click y que ese tercer estado quedara permanente hasta que no se pinchara en otro enlace.

Si bien el script salió hace tiempo, al ir a incluírlo en este listado me dí cuenta de que su instalación era sumamente compleja y laboriosa de manera que lo rehice desde cero y ha quedado muy majo y facil de instalar.

Configuración

Pegar el script en <head> (para variar)

Cada imagen inicial (en el ejemplo, bolitaamarilla.gif) debe llevar por id una B (mayúscula) más un número

ID="B1"

Cada enlace de texto debe llevar por id una E (mayúscula) más el mismo número que la imagen a la que deba estar asociado.

ID="E1"

!Importante
Verifica que ninguna imagen que no pertenezca al menú tenga un id que comience por una B (mayúscula)

A cada enlace hay que asignarle la clase CSS inicial.

<a href="pepe.html" class = "estadoUno">

Llamar al script en body en el evento onload

<body onload="inicio()">

Indicar los nombres de archivo o rutas a las imágenes que se quieran usar para cada estado:

var imagen1 = new Image()
imagen1.src = "bolitaamarilla.gif" //cambiar por el nombre de imagen que se quiera para el primer estado
var imagen2 = new Image()
imagen2.src = "bolitaroja.gif" //cambiar por el nombre de imagen que se quiera para el segundo estado
var imagen3 = new Image()
imagen3.src = "bolitaazul.gif" //cambiar por el nombre de imagen que se quiera para el tercer estado

ver el código fuente del ejemplo


Buscador de animales en adopción
Creative Commons License
Javascript códigos by tunait is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 2.5 España License.
Permissions beyond the scope of this license may be available at http://tunait.com/javascript/index.php?s=condiciones.

Todos los códigos incluídos los de la página han sido paridos y tecleados por tunait.com. Política de cookies subir