logoExtra: script.rollovear

Descripción: Efecto rollover sin necesidad de precargar imágenes.


A continuación mostramos los apuntes asociados a este extra:

Javascript: rollover
Vamos a explicar como implementar un rollover no intrusivo y mejorado con respecto al clásico rollover de siempre, donde con el evento mouseover se cambia la imagen original por la de sustitución, y con el evento mouseout se restituye esa imagen original.
Este diario: Extras
Llamaremos extras a los elementos de los apuntes que no son ni el texto ni las imágenes relacionadas o incrustadas.
// Descripción para sindicación
/*
    [rss]Efecto rollover sin necesidad de precargar imágenes.[/rss]
*/
function eventuar(elemento, evento, f)    {
    if (document.addEventListener)    elemento.addEventListener(evento, f, true);
    else    if (document.attachEvent)    elemento.attachEvent("on" + evento, f);
        else    elemento["on" + evento] = f;
}

function sustitucion_ant()    {
    this.style.display = "none";
    this.previousSibling.style.display = "inline";
}

function sustitucion_sig()    {
    this.style.display = "none";
    this.nextSibling.style.display = "inline";
}

function rollovear(imagen, sustituta)    {
    copia = imagen.cloneNode(true);
    copia.src = sustituta;
    copia.style.display = "none";
    do    {
        id_aleatorio = "rollover_" + Math.floor(Math.random() * 1000);
    }    while (document.getElementById(id_aleatorio) != undefined);
    copia.id = id_aleatorio;
    id = imagen.id;
    imagen.parentNode.insertBefore(copia, imagen);
    eventuar(imagen, "mouseover", sustitucion_ant);
    eventuar(copia, "mouseout", sustitucion_sig);
}

function sustitucion_capa_ant()    {
    this.style.display = "none";
    this.previousSibling.style.display = "block";
}

function sustitucion_capa_sig()    {
    this.style.display = "none";
    this.nextSibling.style.display = "block";
}

function rollovear_fondo_capa(capa, sustituta)    {
    copia = capa.cloneNode(true);
    copia.style.backgroundImage = "url("+ sustituta + ")";
    copia.style.display = "none";
    do    {
        id_aleatorio = "rollover_" + Math.floor(Math.random() * 1000);
    }    while (document.getElementById(id_aleatorio) != undefined);
    copia.id = id_aleatorio;
    copia.id = id_aleatorio;
    capa.parentNode.insertBefore(copia, capa);
    eventuar(capa, "mouseover", sustitucion_capa_ant);
    eventuar(copia, "mouseout", sustitucion_capa_sig);
}

Este código ha sido leído en 43 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.rollovear) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018 | Otros enlaces: buscador