Tecnología

Cómo crear un rollover de imagen usando programación HTML

Escrito por nichelle coleman | Traducido por ehow contributor

HyperText Markup Language (HTML, por sus siglas en inglés) es un lenguaje de programación que se utiliza para crear páginas web. Los sitios y páginas web están escritos en código HTML. Ya sea que estés configurando una página web personal o una página web de negocios, aprender código HTML puede ser muy beneficioso. Saber utilizar éste código puede ayudarte a manipular la configuración de tu página. Puedes crear un enlace de imagen que cambie a otra cuando los visitantes muevan el mouse sobre ésta. Los rollovers de imágenes pueden ser creados usando JavaScript. También puedes crearlos para elementos de los menús. Cuando los visitantes se desplacen con el mouse sobre los elementos del menú, éste aparecerá resaltado. Crear rollovers de imagen es una buena opción para darle a tus páginas una apariencia más profesional. Esta guía te enseñará cómo crearlos en tu página. Poseen un método muy simple para personalizar tu sitio web.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Inicia el procesador de textos o editor de texto que vas a utilizar para crear tu página web. Busca la página que vas a editar en tu PC. Agrega en ella la imagen que deseas tener e inclúyela dentro de la etiqueta <CENTER>. Después escribe el nombre de la imagen con el siguiente código: NAME="rollover".

  2. 2

    Escribe <A HREF=“?”> antes de la etiqueta <CENTER>. Reemplaza el signo de interrogación con la dirección de la página web en la que deseas que aparezca el rollover cuando un usuario haga clic en la imagen. Escribe </A> después de la imagen.

  3. 3

    Comprueba que el texto se vea de la siguiente manera:<A HREF=“pages.html”><CENTER><IMG SRC=“photo.jpg” NAME=“rollover”></CENTER></A>

  4. 4

    Escribe ONMOUSEOVER=''''rollover.src="?"'' dentro de la etiqueta <A>. Vuelve a reemplazar el signo de interrogación por la ubicación de la imagen que deseas que aparezca cuando un usuario mueva el mouse sobre la imagen original.

  5. 5

    Escribe OnMouseOut=''''rollover.src = "?"''. Vuelve a sustituir el signo de interrogación por la ubicación de la imagen que agregaste en el Paso 1.

  6. 6

    Comprueba que el texto sea similar a lo siguiente: <A HREF=“pages.html” ONMOUSEOVER=‘rollover.src=“photo.jpg” ’ ONMOUSEOUT=‘rollover.src=“photo.jpg” ’><CENTER><IMG SRC=“photo.jpg” NAME=“rollover”></CENTER></A>

  7. 7

    Abre un nuevo navegador web para verificar que tu página web muestre la imagen que estás utilizando en tu rollover. Pon a prueba tu sitio y verifica que los visitantes puedan mover el mouse sobre la imagen y ésta cambie a la que has especificado.

Consejos y advertencias

  • Debes probar tu página web en varios navegadores para ver cómo se muestra en cada uno.

No dejes de leer...

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media