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.

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:

< View plain text >
html5

  1. <%@ Register TagPrefix="skm" Namespace="RolloverButton" Assembly="RolloverButton" %>

Y para usarlo, pega este código en el lugar donde quieras que aparezca el RollOver:

< View plain text >
html5

  1. <skm:RollOver
  2.        runat="server"
  3.        id="RollOver1"
  4.        ImageUrl="Images/Icono_Home.gif"
  5.        RollOverImageUrl="Images/Icono_HomeOn.gif"
  6.        PostBackUrl="Default.aspx"
  7.        Height="100px"
  8.        ToolTip="Ir a Inicio"
  9.        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:

< View plain text >
html5

  1. <%@ Page Language="VB" MasterPageFile="~/Ppal.master"
  2.        AutoEventWireup="false" CodeFile="Tira.aspx.vb"
  3.        Inherits="Tira" title="Untitled Page" %>
  4.        
  5. <%@ Register TagPrefix="skm" Namespace="RolloverButton" Assembly="RolloverButton" %>
  6.  
  7. <asp:Content ID="Content1" ContentPlaceHolderID="Cuerpo" Runat="Server">
  8.  
  9.     <skm:RollOver
  10.            runat="server"
  11.            id="RollOver1"
  12.            ImageUrl="Images/Icono_Home.gif"
  13.            RollOverImageUrl="Images/Icono_HomeOn.gif"
  14.            PostBackUrl="Default.aspx"
  15.            Height="100px"
  16.            ToolTip="Ir a Inicio"
  17.            Width="100px" />
  18.     <br />
  19.  
  20. </asp:Content>

Nota: Este control no soporta el uso de la tilde (~) para designar al directorio raíz.

Un comentario sobre “Control de servidor RollOver para ASP.NET”

Deja una respuesta

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


2 × ocho =