Creating image based site navigation using standard sitemap

Could you please help with this ?

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/Default.aspx" title="Home" imageName="buttons_01.jpg" description="">
<siteMapNode url="~/Auction.aspx" title="Food Auction!" description="Food Auction! (number one in the world)" imageName="buttons_02.jpg"/>
<siteMapNode url="~/Start.aspx" title="Find and Order" description="Find and order your food." imageName="buttons_03.gif">
<siteMapNode url="~/Search.aspx" title="Find Restaurant" description="Find your food." imageName="buttons_03.gif"/>
</siteMapNode>
</siteMapNode>
</siteMap>


<asp:SiteMapDataSource ID="srcBuckets" runat="server" ShowStartingNode="False" />


<ul>
<li><asp:HyperLink runat="server" ID="lnkHome" ImageUrl='./images/buttons_01.jpg' NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>

<asp:Repeater runat="server" ID="menu" DataSourceID="srcBuckets" EnableViewState="false">
<ItemTemplate>
<li>
<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl='./images/<%# Eval((SiteMapNode)Container.DataItem)["imageName"]) %>' NavigateUrl='<%# Eval("Url") %>'> <%# Eval("Title") %></asp:HyperLink>

<asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>' EnableViewState="false">
<HeaderTemplate>
<ul>
</HeaderTemplate>

<ItemTemplate>
<li>
<asp:HyperLink ID="HyperLink2" runat="server" ImageUrl='images/<%# ((SiteMapNode)Container.DataItem))["imageName"] %>;' NavigateUrl='<%# Eval("Url") %>'> <%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>

<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>

I appreciate if you share any information that you might think it will help me.

__________________
H2O

Without us, no one can survive..

hey,

You can set the text of the menuitem to image control, for example:
<asp:MenuItem ToolTip="Home" Text="<img runat='server' src='../../image/button-search.gif' />" Value="Home" NavigateUrl="~/Menu/Menu.aspx" >
Then the menuitem's text will be repalce with an image.

Hope it helps.

__________________
G.A.P

hey,

Thanks, but I want to use SiteMap xml file, this is kind of hard coded right ?
i need something more dynamic ?

__________________
H2O

Without us, no one can survive..

hey,

I used the sitemap xml file and set a custom property of "ImageUrl" (Sample code below). After that I used the menuitemsdatabound event and assigned the SiteMapNodes's ImageUrl value to the MenuItems ImageUrl property. Let me know if this helps.

//Sitemap example
<siteMapNode>

<siteMapNode title="Support" url="#Support" ImageUrl="Images/mnu_support.jpg"></siteMapNode>

<siteMapNode title="Downloads" url="#Downloads" ImageUrl="Images/mnu_downloads.jpg"></siteMapNode>

<siteMapNode title="Purchase" url="#Purchase" ImageUrl="Images/mnu_purchase.jpg"></siteMapNode>

<siteMapNode title="Activation" url="#Activation" ImageUrl="Images/mnu_activation.jpg"></siteMapNode>

</siteMapNode>

//MenuItemDataBound Example
Dim node As SiteMapNode = CType(e.Item.DataItem, SiteMapNode) //Gets the current node
If node("ImageUrl") IsNot Nothing Then //Checks if the node has a ImageUrl property assigned
e.Item.ImageUrl = node("ImageUrl") //Assigns the SiteMapNode ImageUrl to the MenuItem ImageUrl property
e.Item.Text = String.Empty //This code removes the text from the SiteMap Node. This could possibly also be done by leaving the Title property empty for the SiteMapNode
End If

hey,


What would be the code in C# ?

__________________
H2O

Without us, no one can survive..

hey,

here is the code in C#

protected void MenuItemDataBound(object sender, System.Web.UI.WebControls.MenuEventArgs e)
{
MenuItem item = (MenuItem)e.Item;
SiteMapNode node = (SiteMapNode)item.DataItem;

if (node("ImageUrl") != null)
{
item.ImageUrl = node("ImageUrl");
item.Text = string.Empty;
}
}