El RollOver
es un efecto mediante el cual se muestra una imagen cuando el ratón se encuentra lejos, y otra imagen cuando el ratón se pasa sobre la imagen.
No existe un control de servidor en ASP.NET para crear un efecto RollOver
. Para hacerlo tendríamos que añadir un control de tipo LinkButton
y luego añadir algo de JavaScript
mediante código de servidor. Suena muy complicado si tenemos, por ejemplo, una barra de navegación con varias opciones de menú.
Buscando en Google encontré este artículo de Scott Mitchell. Basándose en el concepto de herencia, se crea un nuevo control llamado RollOver
que hace justamente lo que queremos.
No voy a entrar en los detalles de programación, porque los puedes leer en la liga antes mencionada, pero sí te voy a explicar cómo hacerlo funcionar en 1 minuto.
- Si trabajas con ASP.NET 1.1 o con ASP.NET 2 descarga este archivo.
- Si trabajas con ASP.NET 1.0 descarga este archivo.
En la carpeta raíz de tu aplicación, crea un fólder llamado bin
(si es que no lo tienes ya), y coloca ahí el archivo .dll
que descargaste.
Listo, esta es toda la configuración que tienes que hacer, ahora, para utilizarlo tienes que registrarlo en cada una de las páginas en las que lo vayas a usar. Para hacerlo, pega esta línea al principio del código de tu página:
- <%@ Register TagPrefix="skm" Namespace="RolloverButton" Assembly="RolloverButton" %>
Y para usarlo, pega este código en el lugar donde quieras que aparezca el RollOver
:
- <skm:RollOver
- runat="server"
- id="RollOver1"
- ImageUrl="Images/Icono_Home.gif"
- RollOverImageUrl="Images/Icono_HomeOn.gif"
- PostBackUrl="Default.aspx"
- Height="100px"
- ToolTip="Ir a Inicio"
- Width="100px" />
ImageUrl
: Es la imagen que aparecerá cuando el ratón esté lejos.RollOverImageUrl
: Es la imagen que aparecerá cuando el ratón pase sobre el control.PostBackUrl
: Es la liga a la cual se llevará al hacer clic sobre la imagen.
Como otro ejemplo, te pongo el código de una página que se crea a partir de un MasterPage
:
- <%@ Page Language="VB" MasterPageFile="~/Ppal.master"
- AutoEventWireup="false" CodeFile="Tira.aspx.vb"
- Inherits="Tira" title="Untitled Page" %>
- <%@ Register TagPrefix="skm" Namespace="RolloverButton" Assembly="RolloverButton" %>
- <asp:Content ID="Content1" ContentPlaceHolderID="Cuerpo" Runat="Server">
- <skm:RollOver
- runat="server"
- id="RollOver1"
- ImageUrl="Images/Icono_Home.gif"
- RollOverImageUrl="Images/Icono_HomeOn.gif"
- PostBackUrl="Default.aspx"
- Height="100px"
- ToolTip="Ir a Inicio"
- Width="100px" />
- <br />
- </asp:Content>
Nota: Este control no soporta el uso de la tilde (~) para designar al directorio raíz.
hola estoy usando el asp net 2.0 y solo me muestra la prinmer imagen la ImageUrl
ya declare todo comoo lo explicatse