logo El diario de Pepe Molina (Caricatos)

yo

Normalmente las transiciones se realizan entre los llamados elementos de bloque (sobre todo las capas: "div"), pero las imágenes son los llamados elementos "en línea", igual que cualquier elemento de enriquecimiento de texto, o enlaces (elementos "a")

Ú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

Sólo la fantasía permanece siempre joven; lo que no ha ocurrido jamás no envejece nunca

Johann C. Friedrich von Schiller, poeta y dramaturgo alemán (1759-1805).

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

Rollover fundido

emoticón de Caricatos Publicado el día 28 de octubre de 2011
id=49; categorías: Vicisitudes de un Webmaster, Programación

Normalmente las transiciones se realizan entre los llamados elementos de bloque (sobre todo las capas: "div"), pero las imágenes son los llamados elementos "en línea", igual que cualquier elemento de enriquecimiento de texto, o enlaces (elementos "a"), entonces se nos antoja complicado el fundido entre dos imágenes que mantengan sus características de estilo.

Ya hemos visto el efecto rollover con imágenes (o capas), y la transición "fundido" con capas, ¿y si lo mezclamos todo?

Una imagen tapando otra

Para poner una imagen encima de otra (o sea ocultando la primera) basta con poner la primera con el estilo "position: absolute" y la segunda con "position: relative" como en el enlace que ponemos a continuación: flor Zoom flor , dirigido a esta misma página (que se cancela si se encuentra en ella).

Con esta inicialización ya podemos usar el efecto antes referido con unas modificaciones mínimas: 

var _lapsus_ = 500;
var _escala_ = parseInt(_lapsus_ / 25);

function aclarando()	{
	_id_ = this.id;
	for (i = _lapsus_; i >= 0; i -= _escala_)
		setTimeout("tag(_id_).style.opacity = " + (i / _lapsus_), _lapsus_ - ((i / _lapsus_) * _lapsus_));
}

function oscureciendo()	{
	_id_ = this.id;
	for (i = 0; i <= _lapsus_; i += _escala_)
		setTimeout("tag(_id_).style.opacity = " + (i / _lapsus_), ((i / _lapsus_) * _lapsus_));
}

Lo que no termina de gustarnos es que las imágenes que no están "flotadas", desajustan el entrelineado de los párrafos, así que por razones estéticas preferiremos hacerlo como en el siguiente bloque, ajustado a la anchura de las imágenes.

paisaje paisaje

Pero para poner enlaces en elementos flotados, basta con hacer flotar una capa, y dentro el enlace junto a las imágenes que tendrán el efecto tal como se ve en esta imagen adjunta del "ojo que todo lo ve".

Seguimos haciendo el efecto y a la vez tenemos las etiquetas de bloque y en línea perfectamente, evitando errores de validación, ni haciendo trucos para conseguirlo; como cambiar el estilo display de los enlaces o las imágenes.

Solo nos queda poner la variable "_lapsus_" con el tiempo de ejecución de la transición.

Zona de comentarios

Hemos encontrado 1 comentarios.

#Mensaje enviado por Andrés
Comentario escrito el día 28 de octubre de 2011, a la hora 19:49:29
url: http://www.disegnocentell.com.ar
email: mobius@disegnocentell.com.ar

Hola, Pepe! Muy bueno el efecto. Lo que habría que corregir es lo que sucede cuando se producen onmouseovers y onmouseouts muy rápidos sobre las imágenes: se producen efectos raros debido a que quedan encolados los timmers anteriores y se superponen con los nuevos.

Un abrazo!

Andrés

Evaluación

Valoración de esta página: (apunte.49) 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 14704 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
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio