ubiquitour.com

Cómo crear información sobre herramientas para imágenes con CSS y JavaScript

Cómo crear información sobre herramientas para imágenes con CSS y JavaScript

Crear una descripción de una página Web requiere el uso de múltiples tecnologías. Los desarrolladores web utilizan hojas de estilo en cascada para establecer las características visuales de la información sobre herramientas. Los elementos "div" HTML sirven como los contenedores de Descripción real, y JavaScript gestiona todo el proceso. Descripciones de imagen pueden ayudar a los visitantes del sitio mostrando información útil cuando pase sus cursores sobre imágenes. Una vez que se establece un marco básico de código, puede agregar información sobre herramientas personalizada a cualquier imagen ajustar algunos valores de propiedad.

Instrucciones

1 Lanzamiento "Notepad" o en otro editor de HTML. Abra un documento HTML.

2 Colocar el siguiente código HTML en cualquier lugar en la sección de "cuerpo" del documento:

< img id = "Image1" / >

< div id = "Descripción" class = "Descripción" >

< / div >

Este código agrega una imagen a la Página Web. Valor de id de la imagen es "Image1" en este ejemplo. La etiqueta "div" crea un bloque div vacío. El código a utilizar este div como la descripción. Valor de id del div es "Descripción." El div también hace referencia a una clase CSS llamada "tooltip".

3 Agregue el código siguiente a la sección de "head" del documento:

< estilo tipo = "text/css" >

.ToolTip {fondo-color: amarillo color: rojo altura: 100px; width: 200px; visibilidad: oculto; posición: absoluto;}

< / estilo >

Este código CSS crea la clase CSS "tooltip". Esta clase define propiedades de estilo de la div. Las dos primeras propiedades establecen los colores de fondo y primer plano de la descripción. Los colores son "amarillo" y "rojo" en este ejemplo. Sustituir esos colores si lo desea. La altura y la anchura de la descripción son 100 píxeles y 200 píxeles. Cambiar estos valores así como si desea la descripción para tener diferentes dimensiones. La propiedad visibility establece la visibilidad de la div oculto. Esto hace que el div invisible cuando se carga la Página Web. Valor de la propiedad position es "absoluto". Esto permite que el código mover la información sobre herramientas a cualquier ubicación en la pantalla. No cambie los valores de la propiedad posición o visibilidad.

4 Añadir el código JavaScript siguiente después del código CSS se describe en la sección anterior:

< script language = "javascript" type = "texto/javascript" >

var toolTipID = "Descripción";

imageID var = "Image1";

imageToolTip var = "Insertar descripción aquí";

Window.onload=addMouseEvents;

función addMouseEvents() {}

imageObject var = document.getElementById(imageID);

imageObject.onmouseover = función () {}

manageToolTip (imageToolTip imageObject, "Mostrar");

}

imageObject.onmouseout = función () {}

imageObject var = document.getElementById(imageID);

manageToolTip (imageObject, "Ocultar", imageToolTip);

}

}

Observe que la variable toolTipID contiene el id de la div. La variable imageID tiene ID de la imagen, y la variable imageToolTip contiene el texto que desea aparecer en la descripción. Cambiar el texto de "Descripción Inserte aquí" el texto que desee que aparezcan en la descripción. El código restante configura los controladores de eventos que causan el div que aparecen y desaparecen cuando el cursor del ratón se mueve encima y lejos de la imagen.

5 Agregue las funciones de JavaScript siguientes después del código que se muestra en el paso anterior:

función manageToolTip (imageObject, acción, toolTipMessage) {}

var toolTipObject = document.getElementById(toolTipID);

Si (acción == "Ocultar")

toolTipObject.style.visibility = "hidden";

Else {}

var imageObjectTop = findTop(imageObject);

toolTipObject.style.visibility = "visible";

toolTipObject.innerHTML = toolTipMessage;

toolTipObject.style.left = findLeft(imageObject);

toolTipObject.style.top = findTop(imageObject);

}

}

función findLeft(imageObject) {}

parentElement var = imageObject.offsetParent;

var imageCurrentPosition = imageObject.offsetLeft;

mientras que (parentElement.nodeName! = "Cuerpo") {}

imageCurrentPosition += parentElement.offsetLeft;

parentElement = parentElement.offsetParent;

}

volver imageCurrentPosition;

}

función findTop(imageObject) {}

parentElement var = imageObject.offsetParent;

var imageCurrentPosition = imageObject.offsetTop;

mientras que (parentElement.nodeName! = "Cuerpo") {}

imageCurrentPosition += parentElement.offsetTop;

parentElement = parentElement.offsetParent;

}

volver imageCurrentPosition;

}

< /script >

Este código se ejecuta cuando el cursor del ratón se mueve sobre la imagen y de la imagen. Calcula las coordenadas X e Y de la imagen y mueve el div de tooltip a esa ubicación. Esto asegura que la información sobre herramientas aparece sobre la imagen en vez de en una localización al azar.

6 Guarde el documento HTML y abra en su navegador. Mueva su ratón sobre la imagen. La descripción aparecerá y mostrará el texto que se establece en el código JavaScript. Mueva el ratón a la imagen para hacer que la descripción desaparezca.

Consejos y advertencias

  • Tenga en cuenta que el div de la descripción y la imagen definida en la sección "body" contienen propiedades de id. Esos dos elementos deben contener propiedades de identificación de la información sobre herramientas trabajar. Las funciones JavaScript manipulan estos objetos hace referencia a los valores de id. En este ejemplo, id de la div Descripción es "Descripción", y id de la imagen es "Image1". Usted puede hacer estos valores lo que gustes. Si cambia estos valores, hacer los cambios correspondientes en el código JavaScript. Por ejemplo, si cambia el id de la imagen del "Image1" en "Río", busque "Image1" en el código JavaScript y cambiarlo a "Río".