Como veis la estática está arriba, mientras que los fotogramas están abajo, la forma más fácil para no liarnos es coger el gif original darle el doble de alto más 3 píxeles de más, de jar la animada abajo y coger un fotograma (debe ser el primero o el último) estático, y ponerlo arriba, el de arriba hay que repetirlo en cada fotograma si no veremos una imágen parpadeante. Por último hay que buscar (normalmente en "Archivo") y "Exportar" en formato Gif. Nos quedaría cómo resultado final una imágendoble, una arriba inanimada y otra abajo animada, que finalmente se superponen o cambian al pasar el cursor del ratón.
Ahora en la parte técnica a la que aplicaremos el Html y Css a nuestro blog, en el que usaremos un efecto llamado Rollover. Cómo Css, (funciona tanto en Wordpress cómo en Blogger) sería esto, creando un div con el alto y ancho de la imágen inicial, o sea sin ser el doble de alto en píxeles.
Así que ANTES de:
]]></b:skin>
esto:
#mosca { width: 54px; height: 61px; position:fixed; bottom:0px; right:0px; }
Y el código Html con el enlace de la imagen mas las proporciones del alto y ancho (width y height) va Antes o Después de </head> según la plantilla.
<a href='#' title='¡Arriba!'><div id='mosca' onmouseout='this.style.backgroundPosition="right top";' onmouseover='this.style.backgroundPosition="right bottom";' style='width: 54px; height: 61px; background: transparent url(http://tu_imagen.gif) no-repeat right top;'></div></a>
Con esto lograríamos mostrar en el blog, una imágen estática, que al pasar el puntero del ratón por encima se vuelve animada, eso es todo,espero no haberme extendido mucho y que a alguien le sea útil.
Este enlace, en la zona píxeles de Pixinspace, está Loomax la imagen que había antes, aunque ya la cambié :D
No hay comentarios:
Publicar un comentario