How can i use menu.controller web.sitemap with diffrent image.

[siraero]

Hi
Im playing with vb.net and have made a menu, with the menu.controller and the web.sitemap, its work fine but its the same hover image and the same background image im using.
I need some pro help now , i have an image with: 5 Textlink, 5 Hover Textlink, 5 Activ Textlink.


Normal i can use this without the web.sitemap and menu.controller.

        <div id="nav">
            <ul>
                <li><a href="http://www.tester.com/" id="home">Home</a></li>                  
                <li><a href="http://www.tester.com/about-me/" id="about" title="About Me">About Me</a></li>
                <li><a href="http://www.tester.com/the-portfolio/" id="portfolio" title="View the Portfolio">View the Portfolio</a></li>
                <li><a class="active" href="http://www.tester.com/the-blog/" id="blog" title="The Blog">The Blog</a></li>
                <li><a href="http://www.tester.com/get-in-contact/" id="contact" title="Get in Contact">Get in Contact</a></li>
            </ul>

        </div>

And this CSS

#nav { position: absolute; top: 65px; right: 0pt; width: 487px; height: 61px; }
#nav ul { float: left; padding: 0pt; margin: 0pt; list-style: none outside none; }
#nav li { float: left; width: auto; }
#nav a { display: block; width: auto; text-indent: -9999px; height: 21px; background: url('nav.png') no-repeat scroll 0pt 0pt transparent; }
.home #nav a { background: url('nav-blog.png') no-repeat scroll 0pt 0pt transparent; }
#nav a#home { width: 61px; }
#nav a#home:hover { background-position: 0pt -21px; }
#nav a#about { width: 99px; background-position: -61px 0pt; }
#nav a#about:hover { background-position: -61px -21px; }
#nav a#portfolio { width: 138px; background-position: -160px 0pt; }
#nav a#portfolio:hover { background-position: -160px -21px; }
#nav a#blog { width: 89px; background-position: -298px 0pt; }
#nav a#blog:hover { background-position: -298px -21px; }
#nav a#blog.active { background-position: -298px -42px; }
#nav a#contact { width: 100px; background-position: -387px 0pt; }
#nav a#contact:hover { background-position: -387px -21px; }

My question is, how can i convert this, so i can use it in a menu.controller/web.sitemap, so i have 5 diffrent image as background for the link and 5 diffrent for the hover effect and then 5 diffrent gackground image for the activlink/page.
Im new to this and im not a pro. so hope someone can help me or give me an ex. on how to do this.

And sry my english.

 

[JohnH]

Here you can see how different images can be configured in sitemap, and accessed for various layout: Examining ASP.NET 2.0's Site Navigation - Part 5 - 4GuysFromRolla.com

 

[siraero]

Here you can see how different images can be configured in sitemap, and accessed for various layout: Examining ASP.NET 2.0's Site Navigation - Part 5 - 4GuysFromRolla.com

Hi again JohnH

nice tutorials, but how do i add HoverOver and Activ image to that, i can see how i can add the image (i need em to be background image, so its behind the text and not before the text)
Can i add a CssClass for every single sitemapnode. !? or how can i do it if we look at the ex. from ur link

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="~/Default.aspx" title="Home">
   <siteMapNode url="~/Books/Default.aspx" title="Books"
                [B]imageUrl="books.jpg"[/B]>
    <siteMapNode url="~/Books/Novels.aspx" title="Novels" 
                 [B]imageUrl="books.jpg"[/B] />
    <siteMapNode url="~/Books/History.aspx" title="History"
                 [B]imageUrl="books.jpg"[/B] />
    <siteMapNode url="~/Books/Romance.aspx" title="Romance" 
                 [B]imageUrl="Heart.gif"[/B] />
   </siteMapNode>
   
   <siteMapNode url="~/Electronics/Default.aspx" title="Electronics"
                [B]imageUrl="electronics.jpg"[/B] />
   <siteMapNode url="~/DVDs/Default.aspx" title="DVDs" 
                [B]imageUrl="dvd.png"[/B] />
   <siteMapNode url="~/Computers/Default.aspx" title="Computers" 
                [B]imageUrl="computer.png"[/B] />
 </siteMapNode>
</siteMap>

 

[JohnH]

Can i add a CssClass for every single sitemapnode. !?

Yes, that may very well be the best of ideas. Let's say you have a siteMapNode like this:

<siteMapNode url="Default.aspx" title="page 1" description="page 1" css="c1" imgLink="normal.png" imgActive="active.png" imgHover="hover.png" />

The custom attributes are available from MenuItemDataBound event, but not from DynamicItemTemplate from what I can see, but using a variable they can be made available.
MenuItemDataBound event expose the MenuItem (e.Item), but no CssClass can be set, so you have to use the DynamicItemTemplate, here you can for example put a Label and evalutate the bound item (which is now the MenuItem):

<asp:Label CssClass='<%# classes(GetDataItem)%>' ID="Label1" runat="server" Text='<%# Eval("Text")%>' />

<%# ... %> is used for data-binding expressions, GetDataItem evaluates to current bound data item. The 'classes' used here is the variable I was talking about, this is declared as a Dictionary in code-behind and is used to map MenuItem as key with the custom 'css' attribute value from siteMapNode.
Further MenuItemDataBound generates three styles for each menu item. The images referred to in siteMapNode I have placed in a subfolder called 'Images' in web project.

    Public classes As New Dictionary(Of MenuItem, String)

    Protected Sub Menu1_MenuItemDataBound(sender As Object, e As System.Web.UI.WebControls.MenuEventArgs) Handles Menu1.MenuItemDataBound
        Dim map = CType(e.Item.DataItem, SiteMapNode) 'get SiteMapNode
        Dim css = map("css") 'cache cssclass, used several places in this method
        classes(e.Item) = css 'place css in lookup variable for use in DynamicItemTemplate 

        'add css styles
        Dim style As New BGImageStyle("Images/" & map("imgLink"))        
        Dim selector = String.Format(".{0}", css)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)

        style = New BGImageStyle("Images/" & map("imgHover"))       
        selector = String.Format(".{0}:hover", css)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)

        style = New BGImageStyle("Images/" & map("imgActive"))      
        selector = String.Format(".{0}:active", css)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)        
    End Sub

The output of these styles would for posted siteMapNode be this:

	.c1 { background-image:url('Images/normal.png'); }
	.c1:hover { background-image:url('Images/hover.png'); }
	.c1:active { background-image:url('Images/active.png'); }

BGImageStyle is a simple class derived from standard Style class that adds the background-image css style:

Public Class BGImageStyle
    Inherits Style
    Public Property BackgroundImage As String
    Public Sub New(backgroundImage As String)
        Me.BackgroundImage = backgroundImage
    End Sub
    Protected Overrides Sub FillStyleAttributes(attributes As System.Web.UI.CssStyleCollection, urlResolver As System.Web.UI.IUrlResolutionService)
        MyBase.FillStyleAttributes(attributes, urlResolver)
        If BackgroundImage <> String.Empty Then        
            attributes.Add("background-image", "'" & BackgroundImage & "'")
        End If
    End Sub
End Class

 

[JohnH]

If you want to make these menu items fixed size to the size of the background image it may be better to use a HyperLink control instead of the Label control (generates a SPAN) in DynamicItemTemplate, for example:

<asp:HyperLink ID="HyperLink1" runat="server" CssClass='<%# classes(GetDataItem)%>' Text='<%# Eval("Text")%>' Href='<%# Eval("NavigateUrl")%>' ToolTip='<%# Eval("ToolTip")%>' />

When added the css class styles you can set these sizes too:

style.Width = Unit.Pixel(150)
style.Height = Unit.Pixel(24)

 

[siraero]

If you want to make these menu items fixed size to the size of the background image it may be better to use a HyperLink control instead of the Label control (generates a SPAN) in DynamicItemTemplate, for example:

<asp:HyperLink ID="HyperLink1" runat="server" CssClass='<%# classes(GetDataItem)%>' Text='<%# Eval("Text")%>' Href='<%# Eval("NavigateUrl")%>' ToolTip='<%# Eval("ToolTip")%>' />

When added the css class styles you can set these sizes too:

style.Width = Unit.Pixel(150)
style.Height = Unit.Pixel(24)

Hi JohnH

So fare Thx. i have looked at what u write, and i have made an ex. but i cant get it to use my background image, i dont get the "DynamicItemTemplate"
I have uploadet my ex. so i hope u can help with the final touch on this ex.
the link is Download menu_sitemap_diff_image_OK.rar for free on uploading.com

 

[JohnH]

Menu.DynamicItemTemplate Property (System.Web.UI.WebControls)
As you can see this an element of the Menu control. You can add it directly in the markup (Source View), or in Design View select the Menu Tasks and click Edit Templates. Here you can select the DynamicItemTemplate and for example drag a control into the template area. When you from this go to markup you can see the DynamicItemTemplate child element was added and also the markup for the control you added to it. In the first example I dragged a Label server control to it and modified a few attributes. In last post I instead dragged a HyperLink server control to it and likewise added some attributes in the markup. In both cases the markup I posted was the complete content of the DynamicItemTemplate.

 

[siraero]

Menu.DynamicItemTemplate Property (System.Web.UI.WebControls)
As you can see this an element of the Menu control. You can add it directly in the markup (Source View), or in Design View select the Menu Tasks and click Edit Templates. Here you can select the DynamicItemTemplate and for example drag a control into the template area. When you from this go to markup you can see the DynamicItemTemplate child element was added and also the markup for the control you added to it. In the first example I dragged a Label server control to it and modified a few attributes. In last post I instead dragged a HyperLink server control to it and likewise added some attributes in the markup. In both cases the markup I posted was the complete content of the DynamicItemTemplate.

It sound right, but i mjust say im a little lost, maybe its bc. i dont have the experience yet, im new to this, will u maybe look at the file/preject I have uploadet and added the link to !?

 

[JohnH]

i dont have the experience yet

Gain it. Can you find the Source View for your page? If you can do that 33% of the job is complete.
Find the Menu (in split view you can select the menu in design view and it's markup is highlighted), add the DynamicItemTemplate markup to it. 66% done.
Add what I said to the DynamicItemTemplate. 100% done.

Previous explanation using designer is of course also valid, you just have to follow direction. I'd prefer if you learnt how to use the design view rather than pasting a few bits of text into source view.

 

[siraero]

Gain it. Can you find the Source View for your page? If you can do that 33% of the job is complete.
Find the Menu (in split view you can select the menu in design view and it's markup is highlighted), add the DynamicItemTemplate markup to it. 66% done.
Add what I said to the DynamicItemTemplate. 100% done.

Previous explanation using designer is of course also valid, you just have to follow direction. I'd prefer if you learnt how to use the design view rather than pasting a few bits of text into source view.

Hi JohnH

No problem and u are right...

If i add this to the master.page then i get an error

<asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticDisplayLevels="2"> 
        <DynamicItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" CssClass='<%# classes(GetDataItem)%>' Text='<%# Eval("Text")%>' Href='<%# Eval("NavigateUrl")%>' ToolTip='<%# Eval("ToolTip")%>' />
        </DynamicItemTemplate>
    <staticmenuitemstyle HorizontalPadding="8" VerticalPadding="10" Font-Names="Verdana" Font-Size="10pt" Font-Bold="true" />
    </asp:Menu>

Error 2 'GetDataItem' is not declared. It may be inaccessible due to its protection level.

 

[JohnH]

In that context you can use Page.GetDataItem, or Container.DataItem.

By the way, you probably also want to add the StaticItemTemplate with same content as DynamicItemTemplate. StaticItemTemplate defines the static part of the menu, ie usually the root item and also any other bound item displayed statically by being included by StaticDisplayLevels property.

 

[siraero]

In that context you can use Page.GetDataItem, or Container.DataItem.

By the way, you probably also want to add the StaticItemTemplate with same content as DynamicItemTemplate. StaticItemTemplate defines the static part of the menu, ie usually the root item and also any other bound item displayed statically by being included by StaticDisplayLevels property.

I still get the
Error 1 'GetDataItem' is not declared. It may be inaccessible due to its protection level.

Error if i add

<DynamicItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" CssClass='<%# classes(page.GetDataItem)%>' Text='<%# Eval("Text")%>' Href='<%# Eval("NavigateUrl")%>' ToolTip='<%# Eval("ToolTip")%>' />
        </DynamicItemTemplate>

 

[siraero]

In that context you can use Page.GetDataItem, or Container.DataItem.

By the way, you probably also want to add the StaticItemTemplate with same content as DynamicItemTemplate. StaticItemTemplate defines the static part of the menu, ie usually the root item and also any other bound item displayed statically by being included by StaticDisplayLevels property.

Ok i got this code now, and no errors, but i cant get it to use my imagebackgrounds from my image folder...

<asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticDisplayLevels="2"> 
        <DynamicItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" CssClass='<%# classes(page.GetDataItem)%>' Text='<%# Eval("Text")%>' Href='<%# Eval("NavigateUrl")%>' ToolTip='<%# Eval("ToolTip")%>' />
        </DynamicItemTemplate>
    <staticmenuitemstyle HorizontalPadding="8" VerticalPadding="10" Font-Names="Verdana" Font-Size="10pt" Font-Bold="true" />
        <StaticItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" CssClass="<%# classes(page.GetDataItem)%>" Href='<%# Eval("NavigateUrl")%>' Text='<%# Eval("Text")%>' ToolTip='<%# Eval("ToolTip")%>' />
        </StaticItemTemplate>
    </asp:Menu>

 

[JohnH]

Have you checked the output (html source) when debugging the page? You should see list items for each menu item containing anchors with correct class attribute set, and in header correct css classes defined with correct background-image urls.

 

[siraero]

Have you checked the output (html source) when debugging the page? You should see list items for each menu item containing anchors with correct class attribute set, and in header correct css classes defined with correct background-image urls.

JohnH

Now we are getting something...I changes the Sub Menu1 and deleted the "Image/" & and then i get the images

    Protected Sub Menu1_MenuItemDataBound(sender As Object, e As System.Web.UI.WebControls.MenuEventArgs) Handles Menu1.MenuItemDataBound
        Dim map = CType(e.Item.DataItem, SiteMapNode) 'get SiteMapNode
        Dim css = map("css") 'cache cssclass, used several places in this method
        classes(e.Item) = css 'place css in lookup variable for use in DynamicItemTemplate

        'add css styles
        Dim style As New BGImageStyle(map("imgLink"))
        Dim selector = String.Format(".{0}", css)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)

        style = New BGImageStyle(map("imgHover"))
        selector = String.Format(".{0}:hover", css)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)

        style = New BGImageStyle(map("imgActive"))
        selector = String.Format(".{0}:active", css)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)
    End Sub

Now i only have 2 problems.
1. the images link is not the full lenght, thay are to small.
2. when hitting a link then the Activ/Selected link is notworking.
The mouseover/hover works fine, but when i then click the mouse and hold it then it show the selected image, but when i then dont hold the mouse then it only show the normal image !??

This is the start page, and here the first image is gray, and its the main page so the link need to be green, bc. the link/page are selected
ImageShack® - Online Photo and Video Hosting

Here u see the mouseover/hover its works just fine.
ImageShack® - Online Photo and Video Hosting

Here u see that i have the selected image on, by holding the mousekey down, when i dont hold it, it get back to gray.
ImageShack® - Online Photo and Video Hosting

and then images is to small its just a 1/3 of the images lenght thats are showed.