ESPAÑOL: ¡Bienvenido! Es la página inicial de OSIRIS LMS. Regístrese hoy mismo y obtenga acceso a todos nuestros CURSOS GRATUITOS. Clic aquí para registrarse ya. Hemos desarrollado una amplia gamma de cursos “online” (Programación, Multimedia, 3D, Habilidades suaves, etc.), disponibles 24X7. Para más detalle consulte la lista de Cursos Disponibles. Si tiene problemas con el acceso a la plataforma, vea el Tour Virtual de Osiris LMS. También puede consultar la sección de FAQ’s o enviar Solicitud de Soporte Técnico.

ForoForo de discusión
¿Cómo hacer efecto rollover?
Buscador:
Foro > JavaScript > ¿Cómo hacer efecto rollover?

Enviado por: Texto del mensaje
Support Osiris LMS 
Nivel : Jefe de Administradores
Mensajes : 114
> Perfil
Escrito el : Lunes 31-05-2010 A las : 19:53 ( > un mes )
Asunto : ¿Cómo hacer efecto rollover?
Problema

En las páginas web los enlaces o hipervínculos se resaltan por la forma del cursor y porque aparecen en algún color y subrayados. Para lograr que sean más llamativos se suele emplear el efecto conocido como rollover, por el cual al pasar el ratón por un enlace éste cambia de color o cambia el tipo de letra o alguna otra característica. Es un efecto muy sencillo de lograr y que da a nuestra página un aspecto más animado.

Solución

El efecto rollover hace uso de los eventos onmouseover y onmouseout sobre un enlace, el primero se produce cuando el cursor del ratón pasa por encima del enlace y el segundo cuando lo abandona. Podemos vincular cada evento a una función que cambie el atributo que nos interese del enlace: el color, el tipo de letra, la imagen, etc.

Caso práctico

En este sencillo ejemplo vamos a cambiar el color del texto contenido en el enlace, para lo cual usamos la función:

function cambiarAtr(obj, color)

{

obj.style.color = color;

}

Y en la página colocaremos el enlace de la siguiente forma:

<a href="direccion.htm" onmouseover="cambiarAtr(this,'red' )" onmouseout="cambiarAtr(this,'blue' )">
Texto del enlace</a>


Como ves la función lleva dos argumentos el primero (this) identifica al hipervínculo mientras que el segundo indica el valor que le damos al color del texto.
Soporte de Osiris LMS
Amplía tus conocimientos en línea