Hover image for asp.net menu control

Hi Experts

Using ASP.NE T 4, I am trying to display a background image when  I mouse-over a menu item in a menu control, the statichoverstyle property of the menu control does not have an option to select a background image so I think css has to be used but after searching I cannot find any useful examples

Hope somebody can help

<Items>
 <asp:MenuItem  NavigateUrl="~/Homepage.aspx"  ImageUrl="~/images/botton1.png" ></asp:MenuItem>
 <asp:MenuItem  NavigateUrl="~/AboutUs.aspx" Text=""></asp:MenuItem>
 <asp:MenuItem NavigateUrl="~/ContactUs.aspx" Text=""></asp:MenuItem>
 </Items

Open in new window

dizzycatAsked:
Who is Participating?
 
LZ1Commented:
Here is the rendered code with new CSS items for the hover and li.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	
	<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head><title> 
	
	</title> 
	<style type="text/css"> 
	.style15 
	{ 
	width: 450px; 
	height: 358px; 
	} 
	</style> 
	
	<style type="text/css"> 
	
	.NewsTab .ajax__tab_header 
	{ 
	color: White; 
	font-size: 13px; 
	font-weight: bold; 
	background-color: #33CCFF; 
	margin-left: 0px; 
	margin-right: 1px; 
	
	
	} 
	.NewsTab .ajax__tab_outer 
	{ 
	background-color: White; 
	} 
	.NewsTab .ajax__tab_inner 
	{ 
	padding: 6px; 
	margin-right: 1px; 
	margin-left: 0px; 
	/* margin-top: 1px; 
	margin-bottom: 1px; */ 
	background-color: #f74da7; /* PINK */ 
	} 
	.NewsTab .ajax__tab_hover .ajax__tab_outer 
	{ 
	Background-image: url('Images/HomeL.gif'); 
	/*background-color: White; 
	/* margin-right: 1px; */ 
	} 
	.NewsTab .ajax__tab_hover .ajax__tab_inner 
	{ 
	Background-image: url('Images/HomeL.gif'); 
	/* background-color: #33CCFF; /* Background Blue */ 
	} 
	.NewsTab .ajax__tab_active .ajax__tab_outer 
	{ 
	/* background-color: transparent; */ 
	margin-right: 1px; 
	} 
	.NewsTab .ajax__tab_active .ajax__tab_inner 
	{ 
	background-color: #33CCFF; 
	} 
	.NewsTab .ajax__tab_body 
	{ 
	font-family: verdana,tahoma,helvetica; 
	font-size: 10pt; 
	background-color: #33CCFF; 
	border-top-width: 0; 
	/* border: solid 1px #d7d7d7; 
	border-top-color: #ffffff; */ 
	} 
	.menu2 .a:hover 
	{ 
	Background-image: url('Images/HomeL.gif'); 
	} 
	
	.NewsTab 
	{} 
	.NewsTab 
	{} 
	
	.NewsTab 
	{} 
	
	.style9 
	{ 
	height: 1px; 
	} 
	#form1 
	{ 
	height: 1024px; 
	margin-bottom: 2px; 
	} 
	.style10 
	{ 
	color: #FFFF99; 
	} 
	</style> 
	<style type="text/css"> 
	/* <![CDATA[ */ 
	#ContentPlaceHolderMenu_Menu1 { background-color:#F7F6F3;height:18px; } 
	#ContentPlaceHolderMenu_Menu1 img.icon { border-style:none;vertical-align:middle; } 
	#ContentPlaceHolderMenu_Menu1 img.separator { border-style:none;display:block; } 
	#ContentPlaceHolderMenu_Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; } 
	#ContentPlaceHolderMenu_Menu1 ul { list-style:none;margin:0;padding:0;width:auto; } 
	#ContentPlaceHolderMenu_Menu1 ul.static { border-style:None; } 

	#ContentPlaceHolderMenu_Menu1 ul li{float:left;margin:5px; padding:5px 15px;}/*Your menu was breaking so I fixed this part */
	#ContentPlaceHolderMenu_Menu1 ul li:hover{background:url(http://cdn3.iconfinder.com/data/icons/musthave/16/Picture.png) no-repeat center left;}
	/* Here is where you would specify the background image on hover*/

	#ContentPlaceHolderMenu_Menu1 ul.dynamic { background-color:#F7F6F3;padding:0px 10px 0px 10px;z-index:1;margin-left:2px; } 
	#ContentPlaceHolderMenu_Menu1 a { color:#7C6F57;font-family:Verdana;font-size:0.8em;text-decoration:none;white-space:nowrap;display:block; } 
	#ContentPlaceHolderMenu_Menu1 a.static { background-color:#FF33CC;width:100px;padding:2px 5px 2px 5px;color:White;font-size:Large;text-decoration:none; } 
	#ContentPlaceHolderMenu_Menu1 a.popout { background-image:url("/INCLUDESUS2aa/WebResource.axd?d=nAHro_ytTT2og6SiHPFytxSzpBkheokxCEONujIa8rJvz2PhNcptzXmjl49F5v8u4D5XueHMSWVqVukki1dbcDQMmKt4mqhZjWcY_ON7yaI1&t=634356985091653996");background-repeat:no-repeat;background-position:right center;padding-right:14px; } 
	#ContentPlaceHolderMenu_Menu1 a.dynamic { width:50px;padding:2px 5px 2px 5px;text-decoration:none; } 
	#ContentPlaceHolderMenu_Menu1 a.static.selected { background-color:#33CCFF;text-decoration:none; } 
	#ContentPlaceHolderMenu_Menu1 a.dynamic.selected { background-color:#5D7B9D;text-decoration:none; } 
	#ContentPlaceHolderMenu_Menu1 a.static.highlighted { color:White;background-color:#33CCFF;font-size:Large;height:22px;width:100px; } 
	#ContentPlaceHolderMenu_Menu1 a.dynamic.highlighted { color:White;background-color:#B5314C; } 
	/* ]]> */ 
	</style></head> 
	<body style="height: 1020px; margin-bottom: 1px; margin-top: 0px; background-color: Gray"> 
	<form method="post" action="index.aspx" id="form1"> 
	<div class="aspNetHidden"> 
	<input type="hidden" name="ToolkitScriptManager1_HiddenField" id="ToolkitScriptManager1_HiddenField" value="" /> 
	<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 
	<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 
	<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMTAwNjI1NDZkGAEFImN0bDAwJENvbnRlbnRQbGFjZUhvbGRlck1lbnUkTWVudTEPD2QFBEhvbWVkwFdVuxIXaOx2LNb9hvi9eZC9A+E6rfva6ku9+99+IUE=" /> 
	</div> 
	
	<script type="text/javascript"> 
	//<![CDATA[ 
	var theForm = document.forms['form1']; 
	if (!theForm) { 
	theForm = document.form1; 
	} 
	function __doPostBack(eventTarget, eventArgument) { 
	if (!theForm.onsubmit || (theForm.onsubmit() != false)) { 
	theForm.__EVENTTARGET.value = eventTarget; 
	theForm.__EVENTARGUMENT.value = eventArgument; 
	theForm.submit(); 
	} 
	} 
	//]]> 
	</script> 
	
	
	<script src="/INCLUDESUS2aa/WebResource.axd?d=TEYha1NMa5qa9a2CLamrlR1K9pjyjT5hM2C45bM4uB2UvA5Y8P40Hx9yp4KqMiDdX71GjdRNLbisRJXmL7I_uilDNzD545vZY-DVY0a7RVE1&amp;t=634356985091653996" type="text/javascript"></script> 

	
	
	<script src="/INCLUDESUS2aa/ScriptResource.axd?d=chjB4epQjrxVkKxSqXG_OlQVSocpqweh_09yrTIJBU5RRIFgz0bOJBsKitcPeWAgFdRNLlB7POK9PrcLQnhyRBXyiHGn6XDTH9x4itLNckOIXQXVV9qzT4MP207XMKnPV5ddLm-seWXZe3eCchlJWw2&amp;t=6df0ad7a" type="text/javascript"></script> 

	<script src="/INCLUDESUS2aa/ScriptResource.axd?d=yaA9rn4ChlbDoc5OlSHC5oniIxlsAWSbPd7DQmsSsB26uxmtztPaMGdAbXxBZr0bAzXynKI4OcCvPjllBetRDPFIdrSR2Ou7AfbJvySwqzQGSutE3FFyBO_ktU9DJ88xYb7igiEGl_JU82LsS9lmrA2&amp;t=252a36c5" type="text/javascript"></script> 
	<script type="text/javascript"> 
	//<![CDATA[ 
	if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.'); 
	//]]> 
	</script> 
	
	<script src="/INCLUDESUS2aa/ScriptResource.axd?d=L-oXULtUtU75CvQ_q8WGlKiz7-iCar1ovKDAB2lPGuNcgg7NVt5pDX_aFwm0MkDy48NKRaJSc32UAVUjxQ3wnLzgVnxwaUfXIuDgsgwySCSeOk3gvKr7TXpKAQnOzH8e3UH-tBhK8ge2RsPavdGsdQ2&amp;t=252a36c5" type="text/javascript"></script> 

	<script src="/INCLUDESUS2aa/index.aspx?_TSM_HiddenField_=ToolkitScriptManager1_HiddenField&amp;_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d4.1.50927.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3ac56b20f0-b89f-420b-94a3-356adf3cc133%3ade1feab2%3af9cec9bc%3aab09e3fe%3af2c8e708%3a87104b7c" type="text/javascript"></script> 
	<script type="text/javascript"> 
	//<![CDATA[ 
	Sys.WebForms.PageRequestManager._initialize('ctl00$ToolkitScriptManager1', 'form1', [], [], [], 90, 'ctl00'); 
	//]]> 
	</script> 
	
	
	<div class="page" 
	
	
	
	
	
	style="border-left: 1px solid #000000; border-right: 1px solid #000000; height: 1019px; border-top: 8px solid #FF33CC; border-bottom: 1px solid #FF33CC; background-color: #00BEF2; margin-right: 10%; margin-left: 10%; padding-top: 0px; padding-right: 0px; padding-left: 0px; "> 
	
	
	
	
	
	<div class="header" 
	
	
	
	style="width: 100%; height: 147px; background-image: url('/INCLUDESUS2aa/Images/175.jpg');"> 
	
	<div class="title" 
	
	style="float: left; margin-top: 0px; height: 118px; color: #35496A; margin-left: -1px; width: 88%;" 
	align="left"> 
	
	<h1 style="font-family: 'Palatino Linotype'; width: 301px; height: 102px; margin-left: 0px;"> 
	&nbsp;<span class="style10">&nbsp; INCLUDESUS2</span> 
	</h1> 
	
	</div> 
	
	
	
	
	
	
	
	
	
	
	
	<div class="headerright" 
	
	
	
	style="float: left; width: 108px; height: 102px; margin-top: 12px; vertical-align: middle;" 
	align="center"> 
	
	<img id="Image1" src="" style="height:97px;width:110px;" /> 
	
	</div> 
	
	</div> 
	<div class="menu" 
	
	
	style="width: 100%; height: 26px; background-color: #FF33CC; margin-top: 0px;"> 
	
	
	
	<a href="#ContentPlaceHolderMenu_Menu1_SkipLink"><img alt="Skip Navigation Links" src="/INCLUDESUS2aa/WebResource.axd?d=eq7Q6QqAZXDIVtgFHWelSq0MWGdhZf5pm462jgn5sBzpQrdLkNredMfWdUN1nVJmqqKxvBFqK4aWMLYg-gg21WguSsV9-QV18Eet1RbG_4E1&amp;t=634356985091653996" width="0" height="0" style="border-width:0px;" /></a><div id="ContentPlaceHolderMenu_Menu1" style="text-align: center; background-color: #FF3399;"> 
	<ul class="level1"> 
	<li><a class="level1 selected" href="index.aspx">Home</a></li><li><a class="level1" href="Events.aspx">Events</a></li><li><a class="level1" href="Map.aspx">Map</a></li><li><a class="level1" href="Games.aspx">Games</a></li><li><a class="level1" href="Blog.aspx">Blog</a></li><li><a class="level1" href="SlideShow.aspx">Slide-Show</a></li><li><a class="level1" href="Links.aspx">Links</a></li> 

	</ul> 
	</div><a id="ContentPlaceHolderMenu_Menu1_SkipLink"></a> 
	
	
	
	
	</div> 
	<div class="menubelow" 
	style="width: 100%; height: 40px; background-color: #33CCFF; margin-top: 0px; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #FFFF99; font-family: Verdana; color: #FF0000; font-size: 14px;" 
	align="center"> 
	<br /> 
	
	You are here: 
	<span id="SiteMapPath1" style="font-family:Verdana;font-size:0.8em;"><a href="#SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/INCLUDESUS2aa/WebResource.axd?d=eq7Q6QqAZXDIVtgFHWelSq0MWGdhZf5pm462jgn5sBzpQrdLkNredMfWdUN1nVJmqqKxvBFqK4aWMLYg-gg21WguSsV9-QV18Eet1RbG_4E1&amp;t=634356985091653996" style="border-width:0px;" /></a><span><a style="color:#5D7B9D;font-weight:bold;"></a></span><span style="color:#5D7B9D;font-weight:bold;"> : </span><span style="color:#333333;font-weight:bold;">Homepage</span><a id="SiteMapPath1_SkipLink"></a></span> 
	<br /> 
	</div> 
	
	
	
	<div class="RevImages" 
	
	
	
	
	
	
	
	
	
	
	
	style="width: 69%; height: 280px; float: left; background-color: #33a5b3; margin-top: 25px; background-image: url('Images/DSC01507.jpg');"> 
	</div> 
	<div class="WhoWeAre" 
	
	
	
	
	
	
	
	
	style="width: 31%; height: 280px; background-color: #FF99FF; margin-top: 25px; float: left;" 
	align="center"> 
	
	
	<br /> 
	&nbsp;&nbsp;&nbsp; 
	<img id="RevImages_Image2" src="Images/ResFlowers.jpg" style="height:161px;width:266px;" /> 
	
	<br /> 
	<br /> 
	<br /> 
	<br /> 
	<br /> 
	<br /> 
	<br /> 
	
	
	
	
	
	</div> 
	
	
	
	<div class="main" 
	
	
	
	
	
	style="margin: 0px; width: 100%; height: 430px; float:left; background-color: #FFFFFF;"> 
	
	
	<div class="main1" 
	
	
	
	
	
	
	
	style="margin: 0px; width: 25.1%; height: 280px; float:left; vertical-align: top; padding-top: 40px; " 
	align="center"> 
	
	
	<div id="MainContent_Panel1" style="background-color:#FF9900;border-color:#FF33CC;border-width:4px;border-style:Solid;height:230px;width:200px;background-color: #FFFFFF"> 
	
	<br/> 
	
	<img id="MainContent_Image3" src="" style="height:136px;width:165px;" /> 
	<br /> 
	<br /> 
	It is a lovely day today and 
	<br/> 
	we are going to the beach. 
	</div> 
	
	<br/> 
	<br/> 
	<br/> 
	
	</div> 
	
	<div class="main2" 
	
	
	
	
	
	
	
	
	
	
	
	
	style="margin: 0px 0px 0px 0px; width: 25.05%; height: 282px; float:left; vertical-align: top; padding-top: 40px; " 
	align="center"> 
	
	<div id="MiddleDiv_Panel2" style="background-color:White;border-color:#FF33CC;border-width:4px;border-style:Solid;height:230px;width:200px;"> 
	
	
	</div> 
	
	<br/> 
	<br/> 
	<br/> 
	
	
	
	</div> 
	<div class="main3" 
	
	
	style="margin: 0px 0px 0px 0px; width: 24%; height: 280px; float:left; vertical-align: top; padding-top: 40px; " 
	align="center"> 
	
	
	<div id="RightDiv_Panel3" style="background-color:White;border-color:#FF33CC;border-width:4px;border-style:Solid;height:230px;width:200px;"> 
	
	
	</div> 
	
	
	
	</div> 
	
	<div class="main4" 
	
	
	style="margin: 0px 0px 0px 0px; width: 25.1%; height: 280px; float:right; vertical-align: top; padding-top: 40px; " 
	align="center"> 
	
	
	<div id="FarRightDiv_Panel5" style="background-color:White;border-color:#FF33CC;border-width:4px;border-style:Solid;height:230px;width:200px;"> 
	
	
	</div> 
	
	
	
	</div> 
	
	
	
	
	
	
	
	
	
	
	</div> 
	
	<div class="footer" 
	
	style="background-color: #003399; width: 100%; height: 66px; float: left; "> 
	</div> 
	
	
	
	</div> 
	
	
	
	<script type="text/javascript"> 
	//<![CDATA[ 
	(function() {var fn = function() {$get("ToolkitScriptManager1_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();//]]> 
	</script> 
	<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'ContentPlaceHolderMenu_Menu1', disappearAfter: 200, orientation: 'horizontal', tabIndex: 0, disabled: false });</script> 
	<script type="text/javascript"> 
	//<![CDATA[ 
	Sys.Application.add_init(function() { 
	$create(Sys.Extended.UI.RoundedCornersBehavior, {"id":"RevImages_Image2_RoundedCornersExtender"}, null, null, $get("RevImages_Image2")); 
	}); 
	Sys.Application.add_init(function() { 
	$create(Sys.Extended.UI.DropShadowBehavior, {"id":"MainContent_Panel1_DropShadowExtender"}, null, null, $get("MainContent_Panel1")); 
	}); 
	Sys.Application.add_init(function() { 
	$create(Sys.Extended.UI.DropShadowBehavior, {"id":"MiddleDiv_Panel2_DropShadowExtender"}, null, null, $get("MiddleDiv_Panel2")); 
	}); 
	Sys.Application.add_init(function() { 
	$create(Sys.Extended.UI.DropShadowBehavior, {"id":"RightDiv_Panel3_DropShadowExtender"}, null, null, $get("RightDiv_Panel3")); 
	}); 
	Sys.Application.add_init(function() { 
	$create(Sys.Extended.UI.DropShadowBehavior, {"id":"FarRightDiv_Panel5_DropShadowExtender"}, null, null, $get("FarRightDiv_Panel5")); 
	}); 
	//]]> 
	</script> 
	</form> 
	</body> 
	</html>

Open in new window

0
 
LZ1Commented:
Can you post the rendered output of your menu?

In CSS you would generally have 1 class if the hover image is going to be the same for all of your menu items.
.menuClass a:hover{background:url(path/to/image.jpg) no-repeat top left;}

Open in new window

0
 
dizzycatAuthor Commented:
In the menu code I have this:

<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal"
                    DynamicMenuStyle-HorizontalPadding="10px"
                    DynamicMenuItemStyle-HorizontalPadding="10px"
                    DynamicMenuItemStyle-ItemSpacing="10px" DynamicMenuItemStyle-Width="50px"
                    DynamicHorizontalOffset="2" Font-Names="Verdana"
                    Font-Size="0.8em" ForeColor="#7C6F57" StaticSubMenuIndent="10px"
                    Height="18px"
                    DisappearAfter="200" ItemWrap="True" BackColor="#F7F6F3"
                    style="text-align: center; background-color: #18B0DA;"
        CssClass="NewsTab">

For the css I have this:

.NewsTab .ajax__tab_hover .ajax__tab_outer
{
    Background-image: url('Images/HomeL.gif');
 
}
.NewsTab .ajax__tab_hover .ajax__tab_inner
{
    Background-image: url('Images/HomeL.gif');
 
}

For the statichoverstyle of the menu I have this:

<StaticHoverStyle  BackColor="#33CCFF" ForeColor="White" Height="22px"
                        Width="100px" BorderStyle="NotSet" Font-Size="Large" CssClass="ajax__tab_hover" />

My css is not great so please check if this is the problem.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
LZ1Commented:
I need to see the rendered output. When you view it in the browser and hit view source, what is the HTML that you get for the menu?
0
 
dizzycatAuthor Commented:
Please see file



 HTML-OUTPUT.docx
0
 
LZ1Commented:
You can use this for your CSS:
#ContentPlaceHolderMenu_Menu1 a:hover{background:url(path/to/image.jpg) no-repeat;}

Open in new window


Of course, replace the url with the url to your image you want to use.
0
 
dizzycatAuthor Commented:
Would you be able to give me a small example of the menu control displaying an image when a menu item is hovered over as I am having no success getting it to work.
0
 
dizzycatAuthor Commented:
That's great, thanks for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.