logo El diario de Pepe Molina (Caricatos)

yo

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.


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

¿Qué tiene que ver la noche con dormir?

John Milton, poeta británico (1608-1674).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Javascript: rollover

emoticón de Caricatos Publicado el día 11 de enero de 2011
id=7; categorías: Vicisitudes de un Webmaster, Programación

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.

Una mejora que se ha hecho siempre en este efecto es la precarga de la imagen de sustitución, aunque no siempre se muestra bien el efecto con esa mejora, así que plantearemos otra alternativa.

Esta nueva solución consiste en que ambas imágenes coexistan en la página, sólo que la imagen de sustitución la ocultamos en principio, mostrándola con el evento mouseover de la imagen original, a la vez que ocultamos ésta; haciendo lo inverso con el mouseout de la sustituta.

Vamos a usar las dos imágenes que usamos en el apunte dedicado a los extras: Este diario: Extras.

Flor Zoom flor

rollover rollover Ya habíamos explicado este efecto en el artículo Rollover: otra forma de conseguir este efecto, pero usando código intrusivo (no se trata de una obsesión). Para que no sea igual al efecto del apunte antes mencionado, vamos a hacerlo con las mismas imágenes pero con distintos tamaños y órden. El efecto en estos casos se realiza con imágenes del mismo tamaño, aunque con muy poco esfuerzo podemos aplicarlo con imágenes de distitos tamaños.

El código

La forma de implementarlo es bastante sencilla, simplemente es incluir la nueva imagen antes de la que queremos "rollovear", pero oculta y le programamos el evento mouseout para ocultarse a si mismo, y mostrar la imagen que le sucede (nextSibling). A la vez modificamos el evento mouseover a la imagen original para que realice la acción inversa.

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)	{
	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;
	}
	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);
}

Revisando el código, encontramos que el efecto se realiza con elementos en línea (display: inline), pero vamos a indicar como podría hacerse con elementos de bloque (capa o div).

Aplicar el efecto a un bloque

En principio indicaremos como sería el efecto de la forma clásica e intrusiva:

<script type="text/javascript" >
	var fondo_original = "url(diario.imagen.php?id=6)";
	var fondo_sustituto = "url(diario.imagen.php?id=4)";
</script >
<div
	style="background: white url(diario.imagen.php?id=6) no-repeat center bottom"
	onmouseover="this.style.backgroundImage = url(diario.imagen.php?id=4)"
	onmouseout="this.style.backgroundImage = url(diario.imagen.php?id=6)"
>
</div>

Si bien con este código el efecto funciona perfectamente (comprobado si), nuestra intención es que sea no-intrusivo, así que le asignaremos el evento y lo clonaremos desde el elemento extra "rollovear...", pero a sabiendas de que no se trata de una imagen, y el estilo que ocultamos/mostramos es de un elemento de bloque.

Contenido fantasma

Como comentario final, pare evitar redundancias en el código hemos quitado del interior de la función "rollovear", la ídem "eventuar", ya que la nueva función aplicada a capas también la necesitaba. Para otra ocasión detallaremos como hacer el efecto pero con formas irregulares; concretamente, con áreas de imágenes. Puede verse el resultado final en este enlace: Capturar áreas en imágenes.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.7) valor

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

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

Historial de navegación

Esta página ha sido visitada en 10151 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=2&max=480
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio