Efecto rollover
Se trata de un sencillisimo efecto rollover: cambio producido al pasar el ratón por un elemento, en este caso controlado por javascript en lugar de CSS
En el ejemplo se muestra su uso para cambiar el color de fondo pero podría usarse para cualquier otro cambio.
Solución
<script>
function cambProp(obj, prop, valor){
let span
(span=document.getElementById(obj))
span.style[prop]= valor;
}
</script>
<body>
<a href="pagina.htm"
onmouseover="cambProp('enlace', 'backgroundColor', 'yellow')"
onmouseout="cambProp('enlace', 'backgroundColor', 'transparent')">
<span id='enlace' >
rollover
</span>
</a>
Explicación
Un script super simple que muestra como cambiar el aspecto de un elemento con un simple evento del ratón (mouseover, mouseout). Evidentemente se puede hacer con CSS, pero este ejemplo es para practicar con el uso de Javascript en las páginas web
Es una función ligada a dos eventos del ratón en relación al bloque span con id = enlace
onmouseover: ratón pasando por encima, pone el color de fondo en amarillo
onmouseout: ratón saliendo del bloque, pone su fondo en transparente
La función simplemente encuentra el bloque por su if y le cambia la propiedad que se le de en el argumento por el valor que también se indica en el argumento
En lugar del id se podría usar el objeto event.target para saber a que bloque se refiere el evento.
Como lo uso
Es tan fácil como crear un bloque que queremos que tenga el efecto rollover.
Asignarles los eventos mouseover y mouseout a la función cambProp() con los valores que se quierean usar, en este caso es el color de fondo (backgrounColor) y el valor amarillo o transparente según el ratón entre o salga del bloque.
Repito que estos cambios se puede hace con el selector :hover mediante estilos CSS. Aquí tienes la forma de hacerlo en Javascript para que explores las posibilidades de este script que podrías usar para cambiar una imagen o un contenido....