Los que hayáis visitado mi “blog”, que como siempre digo, vuestro “blog”, habréis notado una leve evolución en los archivos animados, pasando éstos a inanimados, para después, algunos de ellos pasarlos a “inanimados del todo”. Dentro de breves palabras entenderéis este juego de ídem.
En mi anterior entrada comenté que una buena solución para alojar nuestras imágenes es utilizar el propio alojamiento de “Blogger”, Picasa. Los motivos los encontraréis en ella. Debido a ello, y como este alojamiento “aún no se lleva bien” con los archivos animados, decidí cambiar éstos por otros, mostrando en la medida de lo posible respectivos eventos “rollover”. Mira tú por dónde que en el hipervínculo precedente se encuentra la solución.
Como buen autodidacta que soy –al fin y al cabo, obtuve mi segunda carrera a través de una de las más prestigiosas universidades a distancia, la U.N.E.D.—, decidí ponerme a investigar la mejor manera de conseguir tal efecto con un claro y sencillo “script”. Fácil. “OnMouseOver”, “OnMouseOut”, una “img” por aquí, una “src” por allí, etiquetamos con “a”, una precarga con otro sencillo “script”, y listo. Terminado. Pues no. Ahora vas a ver como queda tu “blog” en “IE” y… ¿qué pasa"? Pues, sencillamente, que no pasa nada. Nada de nada. Tu trabajado y bonito “rollover” invisible para todos aquellos que sean fieles a Bill Gates.
Como podréis leer en otra entrada, veréis que he decidido hacer que este “blog” sea lo más transparente posible, por lo menos para los dos navegadores más difundidos, “Mozilla Firefox” e “IE”. Ignoro cómo se verá en los demás navegadores; entre otras cosas, porque creo que es suficiente para mi trabajo el uso de los citados. No obstante, admitiré sugerencias en todos los sentidos.
Bien, entre los libros que tengo abiertos, uno de ellos, en concreto, sobre diseño “web” con “CSS” –precisamente así reza su título, siendo su autor Ralph G. Schulz—, aconseja, casi en todas sus páginas, ser claro a la hora de escribir nuestro código, fiel a la norma, y siempre pensando en que no todos navegan con los mismos remos y timón. Me parecen unas excelentes directrices (la retórica, es mía).
En ese mismo volumen se observa que esta clase de eventos generalmente no son bien interpretados por “IE”, bien por el lenguaje Java, bien por la “URL” que asignemos a nuestra imagen (ha de ser relativa, si seguimos en el empeño). Pero si conseguimos el objetivo a través de “HTML” y “CSS”, lograremos el éxito. Y es verdad.
Volved al enlace “rollover”; fijaros en lo que dice la enciclopedia “Wikipedia” al respecto. Ahí tenemos la solución. Existe otro interesante “blog” donde se nos aclara aún más el procedimiento, Uninstallme; si con ello no fuera suficiente, tomad nota (puesto que imagino que querréis poner vuestro “rollover” como un “widget”, por ejemplo, en la “sidebar”, el tutorial irá en ese camino):
- Creamos primero nuestras imágenes en formato, por ejemplo, “.png”
- Con las dos imágenes (ambas iguales tanto en su ancho como en su alto) vamos a crear otra, que conservará el ancho, pero que observará una altura que será la suma de las dos, es decir, doble; así tendréis una nueva imagen formada por las otras dos, una “encima de la otra”, siendo la superior nuestra imagen “mouseout”, y la inferior, nuestra “mouseover”.
- Los pasos 1 y 2 son fáciles de conseguir con un programa de edición que trabaje con capas (modificando el lienzo).
- Subimos nuestra imagen “doble” a nuestro servidor habitual, y copiamos su “URL”.
- Diseñamos la parte “CSS”, formada por un selector de clase, “span.nombrequequeramos”, y por “span.nombrequequeramos a:hover”; es importante no omitir el selector de etiqueta “a” (que podría hacerse), puesto que si lo hiciésemos “IE” no interpretaría correctamente nuestro código. El porqué de “span”: estamos apuntando al contenido del bloque.
- Los atributos ancho y alto corresponden al ancho y alto de cada imagen de las que componen nuestra imagen final; por tanto, el valor de “width” será el ancho de una de las imágenes (ambas tienen el mismo); el valor de “height” será la altura de una de las imágenes previas (ambas también con el mismo valor), no la de la imagen final (la suma de ambas).
- En “hover” veréis que el “top” es el alto pero en negativo; así se consigue superponer la imagen “de abajo” con la “de arriba” –que en realidad ya no son dos, sino una—, logrando el evento. En realidad no es una “superposición”, sino que desplazamos hacia arriba nuestra imagen “1+1”.
- Mantened los valores de “display” y “position”; son artimañas pensadas para que IE nos responda como queremos.
- Y el código “CSS” así formado será:
- span.nombrequequeramos {
- width:XXpx;
- height:YYpx;
- overflow:hidden; /*al menos “IE8” lo lee; el valor “hidden” puede dar problemas con alguna versión anterior de “IE” */
- display:block;
- position:relative;
- }
- span.nombrequequeramos a:hover {
- top:-YYpx;
- position:relative;
- }
-
- Ahora el código “HTML”:
- <span class=’nombrequequeramos’>
- <a href=’url de nuestro enlace’>
- <img src=’nuestraimagen’ alt=’’ title=’’ border=’’>
- </img></a></span>
-
Os aconsejo poner “title” en la etiqueta “img”, para que “IE” muestre correctamente nuestras leyendas (sino el resultado sería que “IE” presentaría el valor de “alt”). El código “HTML” lo pondremos en “widgets HTML/Java”; el código “CSS” donde queramos, siempre antes de “]]></b:skin>”.
Con este sistema, no hace falta precargar imágenes, puesto que sólo subimos una. Y además, seguimos la norma de edición y diseño de códigos. Ahorramos espacio y tiempo de carga. Un método fácil, económico y elegante. Por cierto, agradeced a “Wikipedia” y al creador de “Uninstallme” la elaboración de este código; yo no he hecho más que entenderlo, modificarlo un poquito, y ver si funciona. Y funciona. Probadlo, y ya me contaréis.
