Menu Control - ASP.NET 2.0

I have been experimenting with the new menu control. It is acutally quite
nice. When you set the ImageURL, is there a way to have roll over images?
Rollovers are pretty much the standard for websites and they seem to not be
part of any asp.net controls when they very well could be.

jay

Jay

> Rollovers are pretty much the standard for websites and they seem to not
> be part of any asp.net controls when they very well could be.
>
it's probably because rollover can be handled in many ways to do many
things... you could replace an image, you could change the background
color, you could change the style like increasing borders or anything
else...

I hope it helps

Hi Jay,

Since the Menu control's certain ImageUrl just let us specify a image file,
it'll be hard for us to apply other style or script behavior on it.
However, if possible you can consider using some dynamic GIF for those
certain popout or separator image .....

Thanks,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
--------------------
| From: "ThunderMusic" <NOdanlatSPAM@hotmaildotcom>
| References: <>
| Subject: Re: Menu Control - ASP.NET 2.0
| Date: Wed, 11 Jan 2006 16:41:41 -0500
| Lines: 11
| X-Priority: 3
| X-MSMail-Priority: Normal
| X-Newsreader: Microsoft Outlook Express 6.00.2900.2670
| X-RFC2646: Format=Flowed; Response
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.2670
| X-Antivirus: avast! (VPS 0602-2, 2006-01-11), Outbound message
| X-Antivirus-Status: Clean
| Message-ID: <#>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: 66.254.36.122
| Path: TK2MSFTNGXA02.phx.gbl!TK2MSFTNGP08.phx.gbl!TK2MSFT NGP15.phx.gbl
| Xref: TK2MSFTNGXA02.phx.gbl
microsoft.public.dotnet.framework.aspnet:370194
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| > Rollovers are pretty much the standard for websites and they seem to
not
| > be part of any asp.net controls when they very well could be.
| >
| it's probably because rollover can be handled in many ways to do many
| things... you could replace an image, you could change the background
| color, you could change the style like increasing borders or anything
| else...
|
| I hope it helps
|
|
|

No, that is not it.

A rollover or hover graphic is just a graphic. The are millions of ways you
can create a rollover graphic. That is irrelevant. For many server
controls I should just be able to specify a normal image URL and a rollover
image URL. The server control would then create the javascript necessary to
implement the rollover effect. I do this all the time but it would be so
much easier to have this capability in serveral server controls -- buttons,
menus, etc.

You should also be able to specify a selected image URL.

The asp.net team missed a great opportunity by not including this in asp.net
2.0.

Jay


"ThunderMusic" <NOdanlatSPAM@hotmaildotcom> wrote in message
news:%...
>> Rollovers are pretty much the standard for websites and they seem to not
>> be part of any asp.net controls when they very well could be.
>>
> it's probably because rollover can be handled in many ways to do many
> things... you could replace an image, you could change the background
> color, you could change the style like increasing borders or anything
> else...
>
> I hope it helps
>
>

[Stephen Page]

Jay,

I completely agree with your pov; it's ridiculous that Microsoft didn't make it more accessible to accomplish this task directly. So, I took it to task to find a way to make this control work with rollover capability without too much hassle, and I believe that I have found a nice solution, though it may not be the most efficient one. It certainly works, but if any of you out there can find a way to make this more efficient, have at it! The gist of my solution is that it exploits the Text property of the MenuItem object to output an html <img> tag instead of just description text.

(Note: Code is in C#)

1.) create your menu control in your aspx page:

<asp:Menu ID="RolloverMenu" runat="server"></asp:Menu>

2.) Create a Parent method to call the child method we will use to generate each menu item:

/// <summary>
/// Generates Rollover Button Items
/// </summary>
protected void GenMenuItems()
{

addRolloverMenuItem(RolloverMenu, "Default.aspx", "Go to the Home Page", "images/HomeBtn.gif", "images/HomeBtnOver.gif", "images/HomeBtnDwn.gif");
addRolloverMenuItem(RolloverMenu, "about.aspx", "See who we are", "images/AboutBtn.gif", "images/AboutBtnOver.gif", "images/AboutBtnDwn.gif");
addRolloverMenuItem(RolloverMenu, "search.aspx", "Search the site", "images/SearchBtn.gif", "images/SearchBtnOver.gif", "images/SearchBtnDwn.gif");

}

3.) Create the child method which will generate each menu item

/// <summary>
/// Adds a Roll-Over Menu item
/// </summary>
/// <param name="theMenu">The menu to which this menu item will be added</param>
/// <param name="navUrl">The Destination URL</param>
/// <param name="toolTip">The test to be placed inside the alt attribute</param>
/// <param name="src">The Image's normal state</param>
/// <param name="srcOver">The Image's state when the mouse hovers over it</param>
/// <param name="srcDown">The Image's state when the button has been clicked</param>
protected void addRolloverMenuItem(Menu theMenu, String navUrl, String toolTip, String src, String srcOver, String srcDown)
{

// Don't write the menu item if it reflects the current page
string currentPage = Request.ServerVariables["URL"].ToString();
currentPage = currentPage.Substring(currentPage.LastIndexOf("/") + 1).ToLower();
if (currentPage != navUrl.ToLower())
{
// These objects are necessary in order to capture the image object into a rendered html format
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter();
HtmlTextWriter htmWriter = new HtmlTextWriter(sw);
HtmlImage image = new HtmlImage();
image.Style.Add("border-style", "none");

MenuItem theMenuButton = new MenuItem();
theMenuButton.NavigateUrl = navUrl;
theMenuButton.ToolTip = toolTip;
image.Src = src;
if (srcOver != "" && srcOver != null)
image.Attributes["onMouseOver"] = "this.src='" + srcOver + "';";
if (srcDown != "" && srcDown != null)
image.Attributes["onMouseDown"] = "this.src='" + srcDown + "';";
image.Attributes["onMouseOut"] = "this.src='" + src + "';";

image.RenderControl(htmWriter);
theMenuButton.Text = sw.ToString();
theMenu.Items.Add(theMenuButton);
}
}

4.) Generate the Menu Items:

protected void Page_Load(object sender, EventArgs e)
{
GenMenuItems();
}

Good Luck,
~Stephen

[jayson]

testing testing

[Ignacio Soto]

Originally Posted by jayson

testing testing

May be you can try something more simplier like this (at the aspx code inside the definition of the asp menu control):

<asp:MenuItem Text="&lt;img border=&quot;0&quot; name=&quot;Image6&quot; src=&quot;images/menu_01.gif&quot; onmouseout=&quot;change1('Image6','Image6')&quot; onmouseover=&quot;change1('Image6','Image_off6')&q uot; /&gt;" Value="&lt;img border=&quot;0&quot; src=&quot;images/menu_01.gif&quot; /&gt;"></asp:MenuItem>

That's the way the aspx source displays the code... but in the Menu Item Editor you can set the text property of the item to:

<img border="0" name="Image6" src="images/menu_01.gif" onmouseout="change1('Image6','Image6')" onmouseover="change1('Image6','Image_off6')" />




Where the function "change" is the one who manages the swap of images with javascript.

It works.