knorrigt.com

Home > Internet > ¿Cómo hacer de paso del ratón en una página Web

¿Cómo hacer de paso del ratón en una página Web

Advertisement

Una pasar el ratón es un efecto que se produce cuando un usuario mueve el cursor del ratón sobre una imagen y la imagen cambia como resultado. Mouseovers se alcanzan habitualmente utilizando un lenguaje de script del lado del cliente como JavaScript y se utilizan para crear botones y menús desplegables.

Instrucciones

Insertar la imagen que actuará la imagen por defecto para realizar el efecto del ratón en el documento HTML. Para ello, agregue la siguiente línea de código en el cuerpo del documento HTML:

<img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' />

Asegúrese de darle a la imagen un atributo de nombre, ya que esta será la forma en JavaScript hará referencia a esta imagen en particular. Cambiar la fuente "myMouseOutImage.jpg" al nombre de la imagen que desea utilizar como estado "arriba" del ratón encima.

Insertar una etiqueta de script apertura y cierre en la sección "<head>" de la página web. La sección de cabecera de un documento HTML es siempre al principio del documento. Aquí es donde se escribirá el código JavaScript para el ratón encima para que el navegador entiende qué hacer con el código. La sección de la cabeza debe ser similar a la siguiente:

&lt;head>

&lt;title> My First MouseOver &lt;/title>

&lt;script language='javascript'>

* Your functions will go here*

&lt;/script>

&lt;/head>

Crear la función de controlador para el evento "onMouseOver" insertando el siguiente JavaScript en la sección de secuencia de comandos que insertó en la sección de cabecera de la página web:

function mouseOn(){

document.images["myimage"].src = "myMouseOverImage.jpg";

}

Esta función cambia la imagen a la imagen por encima del ratón que se especifique. Si el ratón encima es un botón, esta imagen podría ser una versión deprimida del botón para simular el ratón empujándola hacia abajo en la página. Cambiar la fuente "myMouseOverImage.jpg" al nombre de la imagen que desea usar como la imagen por encima del ratón para el estado "abajo".

Crear la función de controlador para el evento "onMouseOut" insertando el siguiente JavaScript en la sección de secuencia de comandos que insertó en la sección de cabecera de la página web:

function mouseOff(){

document.images["myimage"].src = "myMouseOutImage.jpg";

}

Esta función restaura la imagen por encima del ratón a la imagen posición original "arriba". Recuerde que para cambiar la fuente "myMouseOutImage.jpg" al nombre de la imagen que utilizó para el estado "arriba".

Asignar las funciones a sus respectivos eventos utilizando el elemento de enlace para encapsular el elemento de imagen por encima del ratón:

&lt;a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()"> &lt;img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' /> &lt;/a>

Observe que la imagen se ha convertido ahora en un vínculo mediante la adición de una etiqueta de ancla alrededor de ella. El atributo "href" del enlace no hace nada ya que el vínculo no cambia la página, pero el enlace es esencial para crear un evento que activará el "mouseOver" y funciones de eventos "mouseOut".

Compruebe que su documento HTML tiene una apariencia similar a la siguiente:

<Html>

<Head>

&lt;title> My First MouseOver &lt;/title>

&lt;script language='javascript'>

function mouseOn(){

document.images["myimage"].src = "myMouseOverImage.jpg";

}

function mouseOff(){

document.images["myimage"].src = "myMouseOutImage.jpg";

}

&lt;/script>

</ Head>

<Body>

&lt;a href="javascript:void(0)" onMouseOver="mouseOn()" onMouseOut="mouseOff()">&lt;img src='myMouseOutImage.jpg' height='40' width='100' name='myimage' />&lt;/a>

</ Body>

</ Html

Consejos y advertencias

JavaScript mayúsculas y minúsculas, por lo que "mouseOn" no es lo mismo que "MouseOn."

Cómo hacer un girar la rueda en una página Web
Se puede hacer una "girar" como parte de un juego divertido que se crea en una página Web. Los concursantes pueden turnarse para hacer girar la rueda y ser premiado o perder su turno o ir a la quiebra, dependiendo de donde cae la rueda. La creac
Use pintura, los efectos y herramientas de capas de pintura como un programa Paint.NET, GIMP o Photoshop para hacer un fondo negro existente o nuevo aparece brillante. La clave para crear el efecto brillante es el uso de pintura digital para simular
Un mapa de sitio funciona como una tabla de contenido (ver "Cómo agregar una tabla de contenido a una página Web"). Utilice un mapa del sitio, si usted tiene un sitio grande con muchas páginas diferentes y enlaces de destino (ver "Cómo agre
Las páginas Web son documentos de Internet escritos en código HTML. Estos documentos se suelen leer en línea o con el software de edición de la página web, pero lo que si desea ver y editar páginas web para una compilación de libros y los necesita en
Cómo aumentar el tamaño del texto en una página web que desea imprimir
Antes de imprimir una página web, usted tiene la opción de ajustar el tamaño de fuente menor o mayor dependiendo de su preferencia. navegadores web vienen con configuraciones de configuración de página incorporadas que le permiten cambiar el tamaño d
Cómo hacer dinero mediante la creación de una página web
La clave para hacer dinero de un sitio web es para dirigir el tráfico al sitio mientras tiene anuncios para que la gente haga clic en una vez que llegan. Descubre cómo hacer dinero después de la creación de un sitio web con consejos de un diseñador w
El sistema de gestión de contenidos Joomla viene con una amplia gama de plantillas que se pueden utilizar para añadir efectos a su sitio web, incluidos los mensajes de marquesina que se desplazan a través de la página. Mediante el aprovechamiento de
Cómo hacer un archivo de Excel en una página web interactiva
Muchas empresas y profesionales de la casa se benefician de compartir sus documentos en Internet por sus colegas para examinar y modificar. Varios sitios web diferentes permiten a los usuarios subir directamente sus hojas de cálculo Excel y compartir
Un libro animado es un libro electrónico basado en flash que permite a sus visitantes del sitio web para convertir las páginas en la pantalla, similar al levantamiento de las páginas de un libro impreso real. Es una forma conveniente de mostrar los c
Cómo hacer un buzón de sugerencias en una página HTML
Para implementar un buzón de sugerencias en su página web HTML, tendrá acceso al directorio cgi-bin de su sitio web y la capacidad de cambiar los permisos de archivos en el servidor web. Un buzón de sugerencias es creado usando un formulario web de c
Cómo crear un objeto volador través de una página Web
Agregar efectos especiales a un sitio web, al igual que la repentina aparición de un OVNI comprimir a través de una página Web, puede ser un regalo llamativo para los visitantes. Felizmente, el logro de este efecto especial a menudo no es tan difícil
Cómo configurar un formulario de InfoPath en una página web de Sharepoint
Microsoft SharePoint es una herramienta empresarial que permite a las organizaciones de organizar y colaborar en proyectos utilizando una plataforma basada en la web fácilmente. Aparte de documento y el intercambio de información, sino que también pe
Cómo extraer los archivos PDF múltiples de una página Web
Muchos sitios web de información a menudo tienen formas y otros documentos PDF en su sitio para los visitantes a descargar. En algunos casos, puede haber varios enlaces PDF de descarga de la página. Al igual que con todos los documentos, la organizac
Cómo crear un cristal efecto amplificador en una página web
Dando a los visitantes a su página Web la oportunidad de echar un vistazo más de cerca a una imagen requiere un poco de manipulación de imágenes detrás de las escenas. Mediante la adición de un poco de CSS, JavaScript y jQuery a la mezcla puede crear
Tener su propia página web se trata de poner su personalidad que hay para una comunidad en línea para ver. Con Yahoo! PageBuilder, usted tiene la capacidad de alterar el color de fondo de su página Web. Siga estos pasos para cambiar el color de fondo
Cómo extraer direcciones de correo electrónico de una página web
Puede extraer o cosecha, direcciones de correo electrónico desde una página web de dos maneras. Puede realizar una extracción manual, o puede utilizar software de extracción de correo electrónico. Dependiendo de qué tan amplio es su búsqueda (es deci
Cómo insertar un documento de Word en una página web
Se puede insertar un documento de Microsoft Word en una página web como un enlace o IFRAME. Al vincular al documento, su contenido se ocultan hasta que alguien hace clic en el enlace. Al insertar un documento de Word como un IFRAME, sus contenidos es
páginas web que proporcionan una variedad de beneficios y funcionalidad sirven para atraer a más visitantes. El valor de la rigidez y la devolución de una página depende de la cantidad de beneficio o utilidad de la página. Los propietarios de sitios
Usted tendrá una página Web completado y está listo para subirlo a su servidor de Internet, pero también tiene un libro de Excel que le gustaría incluir en su página. Sin embargo, no está seguro de cómo hacerlo. Al utilizar el archivo de opciones de