asp:Menu different images for every menu static item when hover on it

it2022-05-05 59

原问题：

hello all,

I'm trying to make an asp.net menu control,

but the problem is that ..when hovering on an item i want a different image for every item ..

i guess <StaticHoverStyle> just gives me the chance to put 1 image.

is there away i can do that ?

thx all.

解答如下：

As we know, the menu will render likes this HTML code, < div > < a href = " #Menu1_SkipLink " >< img alt = " Skip Navigation Links " src = " /JQuery/WebResource.axd?d=aw2yVq1OE0PQ6AvYNSzeiQ2&t=633748109086475139 " width = " 0 " height = " 0 " style = " border-width:0px; " /></ a >< table id = " Menu1 " class = " Menu1_2 " cellpadding = " 0 " cellspacing = " 0 " border = " 0 " > < tr onmouseover = " Menu_HoverStatic(this) " onmouseout = " Menu_Unhover(this) " onkeyup = " Menu_Key(this) " id = " Menu1n0 " > < td >< table class = " Menu1_4 " cellpadding = " 0 " cellspacing = " 0 " border = " 0 " width = " 100% " > < tr > < td style = " white-space:nowrap;width:100%; " >< a class = " Menu1_1 Menu1_3 " href = " ../StaticMenuItemCollection_cs.aspx " > Book 0 </ a ></ td > </ tr > </ table ></ td > </ tr >< tr onmouseover = " Menu_HoverStatic(this) " onmouseout = " Menu_Unhover(this) " onkeyup = " Menu_Key(this) " id = " Menu1n1 " > < td >< table class = " Menu1_4 " cellpadding = " 0 " cellspacing = " 0 " border = " 0 " width = " 100% " > < tr > < td style = " white-space:nowrap;width:100%; " >< a class = " Menu1_1 Menu1_3 " href = " ../StaticMenuItemCollection_cs.aspx " > Book 1 </ a ></ td >< td style = " width:0; " >< img src = " /JQuery/WebResource.axd?d=nR6V41rgHdvdjmXg9AP3H3RDTxD1kG0ZO9QtLSq1BSk1&t=633748109086475139 " alt = " Expand Book 1 " style = " border-style:none;vertical-align:middle; " /></ td > </ tr > </ table ></ td > </ tr > </ table >< div id = " Menu1n1Items " class = " Menu1_0 Menu1_7 " > < table border = " 0 " cellpadding = " 0 " cellspacing = " 0 " > < tr onmouseover = " Menu_HoverDynamic(this) " onmouseout = " Menu_Unhover(this) " onkeyup = " Menu_Key(this) " id = " Menu1n2 " > < td >< table class = " Menu1_6 " cellpadding = " 0 " cellspacing = " 0 " border = " 0 " width = " 100% " > < tr > < td style = " white-space:nowrap;width:100%; " >< a class = " Menu1_1 Menu1_5 " href = " ../StaticMenuItemCollection_cs.aspx " > Chapter 0 </ a ></ td > </ tr > </ table ></ td > </ tr >< tr onmouseover = " Menu_HoverDynamic(this) " onmouseout = " Menu_Unhover(this) " onkeyup = " Menu_Key(this) " id = " Menu1n3 " > < td >< table class = " Menu1_6 " cellpadding = " 0 " cellspacing = " 0 " border = " 0 " width = " 100% " > < tr > < td style = " white-space:nowrap;width:100%; " >< a class = " Menu1_1 Menu1_5 " href = " ../StaticMenuItemCollection_cs.aspx " > Chapter 1 </ a ></ td >< td style = " width:0; " >< img src = " /JQuery/WebResource.axd?d=nR6V41rgHdvdjmXg9AP3H3RDTxD1kG0ZO9QtLSq1BSk1&t=633748109086475139 " alt = " Expand Chapter 1 " style = " border-style:none;vertical-align:middle; " /></ td > </ tr > </ table ></ td > </ tr > </ table >< div class = " Menu1_6 Menu1_0 " id = " Menu1n1ItemsUp " onmouseover = " PopOut_Up(this) " onmouseout = " PopOut_Stop(this) " style = " text-align:center; " > < img src = " /JQuery/WebResource.axd?d=Qr8ga8DO2gyrjPORjI5K4r5W2fL1-YscclZyK8RmJAY1&t=633748109086475139 " alt = " Scroll up " /> </ div >< div class = " Menu1_6 Menu1_0 " id = " Menu1n1ItemsDn " onmouseover = " PopOut_Down(this) " onmouseout = " PopOut_Stop(this) " style = " text-align:center; " > < img src = " /JQuery/WebResource.axd?d=TNV5zT69zPMYUpqejWhNMFaTHXawsgMwZJPkqiuGsDs1&t=633748109086475139 " alt = " Scroll down " /> </ div > </ div >< div id = " Menu1n3Items " class = " Menu1_0 Menu1_7 " > < table border = " 0 " cellpadding = " 0 " cellspacing = " 0 " > < tr onmouseover = " Menu_HoverDynamic(this) " onmouseout = " Menu_Unhover(this) " onkeyup = " Menu_Key(this) " id = " Menu1n4 " > < td >< table class = " Menu1_6 " cellpadding = " 0 " cellspacing = " 0 " border = " 0 " width = " 100% " > < tr > < td style = " white-space:nowrap;width:100%; " >< a class = " Menu1_1 Menu1_5 " href = " ../StaticMenuItemCollection_cs.aspx " > Page 1 </ a ></ td > </ tr > </ table ></ td > </ tr > </ table >< div class = " Menu1_6 Menu1_0 " id = " Menu1n3ItemsUp " onmouseover = " PopOut_Up(this) " onmouseout = " PopOut_Stop(this) " style = " text-align:center; " > < img src = " /JQuery/WebResource.axd?d=Qr8ga8DO2gyrjPORjI5K4r5W2fL1-YscclZyK8RmJAY1&t=633748109086475139 " alt = " Scroll up " /> </ div >< div class = " Menu1_6 Menu1_0 " id = " Menu1n3ItemsDn " onmouseover = " PopOut_Down(this) " onmouseout = " PopOut_Stop(this) " style = " text-align:center; " > < img src = " /JQuery/WebResource.axd?d=TNV5zT69zPMYUpqejWhNMFaTHXawsgMwZJPkqiuGsDs1&t=633748109086475139 " alt = " Scroll down " /> </ div > </ div >< a id = " Menu1_SkipLink " ></ a > </ div > As we have seen, the menu will auto generate like these IDs as follwoing, ID = Menu1n0 ID = Menu1n1 ID = Menu1n1Items ID = Menu1n2ItemsSo we can use the following CSS for these IDs, and you just need to use " background-image " to instead of " background-color " , #Menu1n1 { background - color: Aqua; } #Menu1n2 { background - color: Lime; } #Menu1n3 { background - color: Purple; } #Menu1n4 { background - color: ButtonShadow; } #Menu1n1Items { background - color: Gray; } #Menu1n2Items { background - color: Green; } #Menu1n3Items { background - color: Red; } #Menu1n4Items { background - color: Blue; }and here is a demo code for your reference, <% @ Page Language = " C# " %> <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > < script runat = " server " > </ script > < html xmlns = " http://www.w3.org/1999/xhtml " > < head runat = " server " > < title ></ title > < style type = " text/css " > #Menu1n0 { background - color: Gray; } #Menu1n1 { background - color: Aqua; } #Menu1n2 { background - color: Lime; } #Menu1n3 { background - color: Purple; } #Menu1n4 { background - color: ButtonShadow; } #Menu1n1Items { background - color: Gray; } #Menu1n2Items { background - color: Green; } #Menu1n3Items { background - color: Red; } #Menu1n4Items { background - color: Blue; } </ style > </ head > < body > < form id = " form1 " runat = " server " > < div > < asp:Menu ID = " Menu1 " runat = " server " BackColor = " #FFFBD6 " DynamicHorizontalOffset = " 2 " Font - Names = " Verdana " ForeColor = " #990000 " StaticSubMenuIndent = " 10px " > < Items > < asp:MenuItem NavigateUrl = " ~/StaticMenuItemCollection_cs.aspx " Text = " Book 0 " Value = " Book 0 " /> < asp:MenuItem NavigateUrl = " ~/StaticMenuItemCollection_cs.aspx " Text = " Book 1 " Value = " Book 1 " > < asp:MenuItem NavigateUrl = " ~/StaticMenuItemCollection_cs.aspx " Text = " Chapter 0 " Value = " Chapter 0 " /> < asp:MenuItem NavigateUrl = " ~/StaticMenuItemCollection_cs.aspx " Text = " Chapter 1 " Value = " Chapter 1 " > < asp:MenuItem NavigateUrl = " ~/StaticMenuItemCollection_cs.aspx " Text = " Page 1 " Value = " Page 1 " /> </ asp:MenuItem > </ asp:MenuItem > </ Items > < StaticSelectedStyle BackColor = " #FFCC66 " /> < StaticMenuItemStyle HorizontalPadding = " 5px " VerticalPadding = " 2px " /> < DynamicMenuStyle BackColor = " #FFFBD6 " /> < DynamicSelectedStyle BackColor = " #FFCC66 " /> < DynamicMenuItemStyle HorizontalPadding = " 5px " VerticalPadding = " 2px " /> < DynamicHoverStyle BackColor = " #990000 " Font - Bold = " False " ForeColor = " White " /> < StaticHoverStyle BackColor = " #990000 " Font - Bold = " False " ForeColor = " White " /> </ asp:Menu > </ div > </ form > </ body > </ html > 原帖地址： http://forums.asp.net/t/1417421.aspx

转载于:https://www.cnblogs.com/OceanChen/archive/2009/05/06/1450674.html

相关资源：数据结构—成绩单生成器

专利

最新回复(0)