Image control menu med rollover ?
HejJeg har en menu, som består af 6 billeder. Menuen er lavet som en user control og de 6 billeder er sat ind vha. Image controlen i asp.net 2.0. Jeg vil gerne lave en rollover effekt, dvs hvert menupunkt skifter til et andet billede når musen føres hen over + at min gamle code stadig skal virke :)
Min ascx fil ser sådan her ud:
----------------------------------------------------------------
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="Menu" %>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<div id="topblue"></div>
<div id="blackline"></div>
<div id="home">
<a href="default.aspx" onmouseenter=""><asp:Image ID="imgHome" runat="server" ImageUrl="images/home.gif" MouseEnter="OnMouseEnterHandler" MouseLeave="OnMouseLeaveHandler" /></a></div>
<div id="profil">
<a href="profil.aspx"><asp:Image ID="imgProfil" runat="server" ImageUrl="images/profil.gif" /></a></div>
<div id="loesninger">
<a href="loesninger.aspx"><asp:Image ID="imgLoesninger" runat="server" ImageUrl="images/loesninger.gif" /></a></div>
<div id="referencer">
<a href="referencer.aspx"><asp:Image ID="imgReferencer" runat="server" ImageUrl="images/referencer.gif" /></a></div>
<div id="kontakt">
<a href="kontakt.aspx"><asp:Image ID="imgKontakt" runat="server" ImageUrl="images/kontakt.gif" /></a></div>
<div id="links">
<a href="links.aspx"><asp:Image ID="imgLinks" runat="server" ImageUrl="images/links.gif" /></a></div>
----------------------------------------------------------------
Og det jeg bruger i min codebehind ser sådan her ud:
----------------------------------------------------------------
public partial class Menu : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
int start = Request.Path.LastIndexOf("/") + 1;
string filename = Request.Path.Substring(start, (Request.Path.Length - start )).ToLower();
// switch with string type
switch (filename)
{
case "default.aspx":
imgHome.ImageUrl = "images/homeo.gif";
break;
case "profil.aspx":
imgHome.ImageUrl = "images/profilo.gif";
break;
case "loesninger.aspx":
imgHome.ImageUrl = "images/loesningero.gif";
break;
case "referencer.aspx":
imgHome.ImageUrl = "images/referencero.gif";
break;
case "kontakt.aspx":
imgHome.ImageUrl = "images/kontakto.gif";
break;
case "links.aspx":
imgHome.ImageUrl = "images/linkso.gif";
break;
default:
imgHome.ImageUrl = "images/homeo.gif";
break;
}
}
}
----------------------------------------------------------------
Det hele virker også fint, når man klikker på et menu punkt, skifter billedet og holder det indtil man trykker på et nyt. Nu vil jeg så have en rollover effekt, men hvordan laver man så lige det ?
