Creación de una información sobre herramientas en una página web requiere el uso de múltiples tecnologías. Los desarrolladores web utiliza hojas de estilo en cascada para establecer las propiedades visuales de información sobre herramientas. HTML elementos "div" sirven como contenedores reales tooltip y JavaScript gestiona todo el proceso. Información sobre herramientas de imagen pueden ayudar a los visitantes del sitio que muestra información útil cuando se ciernen sobre sus cursores imágenes. Una vez que configure un marco básico de código, puede añadir un texto de ayuda personalizada a cualquier imagen ajustando unos valores de propiedad.

Instrucciones

1

Lanzamiento "Bloc de notas" u otro editor HTML. Abra un documento HTML.

2

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

<Img id = "Image1" />

<Div id = clase "información sobre herramientas" = "descripción">

</ Div>

Este código agrega una imagen a la página Web. Identificación del valor de la imagen es "Image1" en este ejemplo. La etiqueta "div" crea un bloque div vacía. El código utilizará esta div como la información sobre herramientas. Valor id del div es "información sobre herramientas." El div también hace referencia a una clase CSS llamado "tooltip".

3

Agregue el código siguiente a la sección "cabeza" del documento:

<Style type = "text / css">

.tooltip {background-color: amarillo; color: red; altura: 100px; width: 200px; visibility: hidden; position: absolute;}

</ Style>

Este código CSS crea la clase CSS "tooltip". Esta clase define las propiedades de estilo del div. Las dos primeras propiedades establecen los antecedentes y colores de primer plano de la información sobre herramientas. Esos colores son "amarilla" y "rojo" en este ejemplo. Vuelva a colocar esos colores si lo desea. La altura y la anchura de la información sobre herramientas son 100 píxeles y 200 píxeles. Cambiar estos valores, así que si quieres la información sobre herramientas para tener diferentes dimensiones. La propiedad de visibilidad establece la visibilidad de la div que oculta. Esto hace que el div invisible cuando se carga la página Web. El valor de la propiedad position es "absoluta". Esto permite que el código para mover la información sobre herramientas a cualquier lugar de la pantalla. No cambie los valores de las propiedades de visibilidad o de posición.

4

Agregue el siguiente código de JavaScript después del código CSS se describe en la sección anterior:

<Script language = tipo "javascript" = "text / javascript">

var tooltipId = "información sobre herramientas";

ImageID var = "Image1";

imageToolTip var = "Insertar Tooltip aquí";

window.onload = addMouseEvents;

addMouseEvents function () {

var imageobject = document.getElementById (ImageID);

imageObject.onmouseover = function () {

manageToolTip (imageobject "SHOW", imageToolTip);

}

imageObject.onmouseout = function () {

var imageobject = document.getElementById (ImageID);

manageToolTip (imageobject "OCULTAR", imageToolTip);

}

}

Tenga en cuenta que la variable tooltipId contiene el id de la div. La variable ImageID sostiene tu ID de imagen, y la variable imageToolTip contiene el texto que desea que aparezca en la descripción. Cambie el texto del "Insertar Tooltip aquí" con el texto que desea que aparezca en la descripción. El código restante configura los controladores de eventos que causan el div a aparecer y desaparecer cuando el cursor del ratón se mueve sobre y fuera de la imagen.

5

Agregue las siguientes funciones de JavaScript 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 = "oculto";

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) {

var parentElement = imageObject.offsetParent;

var imageCurrentPosition = imageObject.offsetLeft;

while (parentElement.nodeName! = "cuerpo") {

imageCurrentPosition + = parentElement.offsetLeft;

parentElement = parentElement.offsetParent;

}

volver imageCurrentPosition;

}

función findTop (imageobject) {

var parentElement = imageObject.offsetParent;

var imageCurrentPosition = imageObject.offsetTop;

while (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 lejos de la imagen. Se calcula la coordenadas X e Y de la imagen y mueve el div descripción para esa ubicación. Esto asegura que la información de herramientas aparece sobre la imagen, en lugar de en una ubicación aleatoria.

6

Guarde el documento HTML, y abrirlo en su navegador. Mueva su ratón sobre la imagen. La descripción aparecerá y mostrará el texto se establece en el código JavaScript. Mueva su ratón fuera de la imagen para que la información sobre herramientas desaparecer.

Consejos y advertencias

• Tenga en cuenta que el div descripción y la imagen se define en la sección "cuerpo" contienen propiedades id. Esos dos elementos deben contener propiedades Identificación de la información sobre herramientas para trabajar. Las funciones de JavaScript manipular estos objetos haciendo referencia a los valores de identificación. En este ejemplo, el id del div descripción es "información sobre herramientas", y la identificación de la imagen es "Image1." Usted puede hacer que estos valores lo que quieras. Si cambia estos valores, realice los cambios correspondientes en el código JavaScript. Por ejemplo, si cambia Identificación de la imagen del "Image1" para "Río" localizar "Image1" en el código JavaScript y cambiarlo a "Río".