Puede crear un efecto de foto en su tema de Tumblr que muestra una imagen claramente cuando el mouse se desplaza sobre la imagen, pero luego, cuando el mouse no se desplaza sobre la imagen, la imagen aparece borrosa. Primero, prepare las imágenes que usará para el efecto. Luego inserte dos fragmentos de código en su tema de Tumblr. Tenga en cuenta que el código no es compatible con publicaciones de Tumblr, solo en temas de blogs.
Preparar imágenes
Para realizar la tarea de imagen borrosa, necesitará dos imágenes casi idénticas: una copia de la imagen clara original y una segunda copia de la misma imagen, solo borrosa. Utilice el efecto Desenfocar en GIMP o Photoshop para crear la apariencia borrosa de la segunda foto. Asegúrese de que las imágenes tengan exactamente las mismas dimensiones.
Código JavaScript
Se inserta un fragmento de código JavaScript entre
y etiquetas de tu blog de Tumblr. El código JavaScript incluye los eventos MouseRollover y MouseOut. El evento MouseRollover indica a la imagen clara que se muestre cuando el mouse se desplaza sobre la imagen. El evento MouseOut define qué imagen mostrar cuando el mouse no se desplaza sobre la imagen.El fragmento de código JavaScript que se utilizará para este efecto es:
Cambie la referencia "Picture1.jpg" por la URL de la imagen original clara. Cambie la referencia "Picture2.jpg" por la URL de la imagen borrosa.
código HTML
El código HTML que acompaña al fragmento de JavaScript define el tamaño, la ubicación y el diseño de la imagen. Inserte el código HTML en el tema de Tumblr donde desea que aparezca la visualización de la foto. El código HTML que acompaña al fragmento de JavaScript anterior es:
Reemplaza "Picture2.jpg" con la URL de la foto borrosa, que se mostrará de forma predeterminada. Cambie las variables de "ancho" y "alto" al tamaño deseado de su imagen renderizada.
Instalar código
Para instalar el código en su tema de Tumblr, abra su panel de Tumblr, luego haga clic en la pestaña "Personalizar" en el panel para que el blog lo modifique. Haga clic en la opción "Editar HTML" para abrir el editor de temas. Seleccione el fragmento de código Javascript para resaltar el código, luego presione "Ctrl-C" para copiar el código. Haga clic en el espacio frente al "”En el código de su tema, luego presione“ Ctrl-V ”para pegar el código.
Copie el código HTML y luego regrese al editor de temas de Tumblr. Busque la ubicación en el código donde desea que se represente el efecto fotográfico. Haga clic en la ubicación, luego presione "Ctrl-V" para pegar el fragmento de HTML. Haga clic en "Actualizar vista previa" para probar el efecto en la ventana Vista previa. Haga clic en "Guardar" para guardar los cambios.
