Puede crear un efecto fotográfico en su tema de Tumblr que muestre una imagen claramente cuando el mouse pasa sobre la imagen, pero luego cuando el mouse no se mueve sobre el imagen, la imagen aparece borrosa. Primero, prepare las imágenes que usará para el efecto. Luego inserta dos fragmentos de código en tu tema de Tumblr. Tenga en cuenta que el código no se admite en las publicaciones de Tumblr, solo en los temas de blog.
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. Use 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 el & lt; head & gt; y & lt; /head & gt; 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:
& lt; script language \u003d "javascript" & gt ; función MouseRollover (MyImage) {MyImage.src \u003d "Picture1.jpg"; } función MouseOut (MyImage) {MyImage.src \u003d "Picture2.jpg"; } & lt; /script & gt;
Cambie la referencia "Picture1.jpg" a la URL de la imagen original clara. Cambie la referencia "Picture2.jpg" a 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 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:
& lt; div align \u003d "center" & gt; & lt;! - La imagen se muestra aquí .-- & gt; & lt; img src \u003d "Picture2.jpg" border \u003d "0px" width \u003d "500px" height \u003d "500px" onMouseOver \u003d "MouseRollover (this)" onMouseOut \u003d "MouseOut (this)" /& gt; & lt; /div & gt;
Reemplace "Picture2.jpg" con la URL de la foto borrosa, que se mostrará de forma predeterminada. Cambie las variables "ancho" y "alto" al tamaño deseado de su imagen renderizada.
Código de instalación
Para instalar el código en su tema Tumblr, abra su Panel de control de Tumblr, luego haga clic en la pestaña "Personalizar" en el panel de control 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 a la etiqueta "& lt; /head & gt;" en su código de tema, luego presione "Ctrl-V" para pegar el código.
Copie el código HTML, luego regrese al editor de temas de Tumblr . Encuentre la ubicación en el código donde desea que se procese el efecto de la foto. 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.
[Cómo hacer que una imagen se desenfoque cuando el cursor no está en Tumblr] URL: http://www.ordenador.online/computadora/Software/253505.html