Tecnología

Inicio

Cómo hacer una imagen aparecen difuminados a menos que se asoma con un ratón

July 25

Cómo hacer una imagen aparecen difuminados a menos que se asoma con un ratón


CSS - abreviatura de Cascading Style Sheets - tiene una propiedad de opacidad que son compatibles con todos los navegadores modernos. Al alterar la transparencia de un objeto que puede hacer que sea opaco, transparente o translúcido. Es posible que haya visto las imágenes Web que cambian cuando se pasa sobre ellos. Su aparición suele cambiar de apariencia normal a algo completamente diferente. Mediante la colocación de una capa translúcida encima de una imagen puede crear el efecto contrario y hacer una imagen descolorida parecen normales cuando los usuarios se ciernen sobre ella.

Instrucciones

1 Pegar el código que se muestra a continuación en la sección del cuerpo de un documento HTML:

<Div>

<Div id = "superposición" class = "superposición" onmouseover = "manageOverlay ( 'unfade')" />
</ Div>

<Div onmouseout = "manageOverlay ( 'fade')">
<Img src id = "myImage1" = "AÑADIR NOMBRE O IMAGEN AQUÍ URL" />
</ Div

Este código crea un bloque div principal que contiene dos bloques div niño. El primer bloque infantil - cuyo ID es "superposición" - hace referencia a una clase CSS llamada "superposición". El evento onmouseover provoca una función JavaScript denominada "manageOverlay" para ejecutar cuando los usuarios se ciernen sobre la superposición. La próxima div contiene su imagen y su valor id es "myImage1." Sustituir "AÑADIR NOMBRE IMAGEN O URL aquí" con el nombre de una imagen en el disco duro o la URL de una imagen en Internet.

2 Agregue el código siguiente en la sección de estilo del documento:

.cubrir
{
bloqueo de pantalla; position: absolute;
background-color: Blanco;
Opacidad: 0,38; filtro: alfa (opacidad = 38);
}
</ Style>

Este código define los atributos de la superposición. Establece el color de fondo de la superposición de "blanco" y su opacidad al 38 por ciento. Debe establecer este valor en los dos lugares que se muestran. El primer valor - 0,38 - es un número decimal. Representa el 38 por ciento. El segundo número - 38 - no tiene un punto decimal. También representa el 38 por ciento.

3 Pegar el código se muestra a continuación en la sección de escritura del documento:

var overlayID = "superposición";
var ImageID = "myImage1";

ImageHeight var;
ImageWidth var;

Los dos primeros estados almacenan los valores de ID de la superposición div y la imagen de las variables denominadas "overlayID" y "ImageID." Los dos últimos estados son variables que la función se muestra en el siguiente paso utiliza.

4 Agregue la siguiente función JavaScript debajo del código que se muestra en el paso tres:

window.onload = function () {

Imagen var = document.getElementById (ImageID);
var = ImageHeight image.clientHeight;
var = ImageWidth image.clientWidth;
var div = document.getElementById (overlayID);
div.style.height = ImageHeight;
div.style.width = ImageWidth;
}

Este código se ejecuta cuando un navegador carga la página Web. El código se asegura de que la altura y la anchura de la superposición coincide con la altura y la anchura de la imagen.

5 Añadir este último bloque de JavaScript debajo del código que se muestra en el paso cuatro:

manageOverlay función (acción) {

var div = document.getElementById (overlayID);
si (== acción "unfade")

div.style.display = &quot;none&quot;;

más

div.style.display = &quot;block&quot;

}

Esta es la función que se ejecuta cuando se pasa sobre la imagen y mueve el cursor del ratón fuera de la imagen. El código se esconde y muestra la superposición div dependiendo de la posición del cursor del ratón.

6 Guarde el documento y cargarlo en un navegador. Su imagen aparecerá descolorida. Mover el cursor del ratón sobre la imagen para que quede claro. Mover el cursor fuera de la imagen para que parezca desvanecido de nuevo.

Consejos y advertencias

  • Experimentar con los ajustes de opacidad para encontrar el aspecto descolorido que funciona mejor para usted. Los ajustes de opacidad en este ejemplo son 38 por ciento. Crean un efecto de atenuación moderada. Aumentar estos valores para que la imagen parezca más desvaneció. Disminuir los valores para producir una imagen más clara inicial.
  • color de fondo del div superposición consiste en "blanco" en este ejemplo. Cambiar ese color tan bien si desea ver cómo afecta a la imagen se desvaneció.