HTML – Muestra Información sobre la herramienta sobre un botón, imagen, etc. Enlace

Aquí vamos a aprender cómo información sobre herramientas de visualización cada vez que mover el ratón en un objeto (es decir, información sobre herramientas de visualización en el caso del ratón sobre cualquier objeto en una página web)?

En este ejemplo estamos mostrando tres objetos Botón, Imagen y Link. Habrá tres diferentes sobre herramientas a los mostrará cuando se pasa el ratón sobre un objeto específico.

Si movemos el ratón en el botón “Esto es un botón de ejemplo”. Mostrará como ayuda.

Si nos movemos del ratón sobre la imagen “Logotipo de IncludeHelp” mostrará como ayuda.

Y si nos movemos ratón en Enlace (etiqueta de anclaje) “IncludeHelp enlace al sitio web” se mostrará como ayuda.

HTML Fragmento de código – Pantalla Información sobre herramientas al pasar el ratón sobre el botón, imagen o enlace

Button Tooltip

<input type="button" value="Example" title="This is an example button."/>

imagen Tooltip

<img src="../Images/ihelp1.png" title="IncludeHelp's Logo"/>

Enlace (Ancla) Información sobre la herramienta

<a href="http://www.includehelp.com" title="IncludeHelp website link.">
IncludeHelp</a>

Código HTML

<!--HTML - Display Tooltip over a Button, Image, Link etc.-->
<html>
<head>
<title>HTML - Display Tooltip over a Button, Image, Link etc.</title>
<!--Example CSS-->
<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>HTML - Display Tooltip over a Button, Image, Link etc.</h1>
<h2>Move mouse on given object to display tooltip.</h2>
<input type="button" value="Example" title="This is an example button."/>
<br/>
<img src="../Images/ihelp1.png" title="IncludeHelp's Logo"/>
<br/>
<a href="http://www.includehelp.com" title="IncludeHelp website link.">IncludeHelp</a>
</body>
</html>

Resultado

HTML - Display Tooltip over a Button, Image, Link etc. - 4

clic for DEMO y rarr;


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *