[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Hover image for asp.net menu control

Posted on 2011-10-20
8
Medium Priority
?
996 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:dizzycat
  • 4
  • 4
8 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 37000621
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
 

Author Comment

by:dizzycat
ID: 37000829
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37000857
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:dizzycat
ID: 37000921
Please see file



 HTML-OUTPUT.docx
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37000950
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
 

Author Comment

by:dizzycat
ID: 37001129
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
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 37001979
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
 

Author Closing Comment

by:dizzycat
ID: 37002405
That's great, thanks for your help.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month17 days, 16 hours left to enroll

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question