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.

 

[siraero]

You have three identical If blocks to 'select' a single value, you only need one. Use a variable.
If you put that information in SiteMapNode you don't need those If's at all.

Another thing you can do if there is lots of repeating styles is to utilize the Style.CopyFrom method.

Can u help me with an ex. on the "Use a Variable" or the ex for the SiteMapNode !?

 

[JohnH]

Can u help me with an ex. on the "Use a Variable"

Declare a variable to hold the width value, use conditional code to assign width value to variable, assign variable to all style widths thereafter.

or the ex for the SiteMapNode !?

Exactly the same as the css example I posted; put value in an attribute, in MenuItemDataBound handler get the attribute value.

 

[siraero]

Declare a variable to hold the width value, use conditional code to assign width value to variable, assign variable to all style widths thereafter.

Exactly the same as the css example I posted; put value in an attribute, in MenuItemDataBound handler get the attribute value.

THX bc u are so hard that u DONT write a 100% solution, i ended up with this code, and that work THX.

    Protected Sub navcontainer_MenuItemDataBound(sender As Object, e As System.Web.UI.WebControls.MenuEventArgs) Handles navcontainer.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

        Dim style As BGImageStyle
        Dim selector = String.Format(".{0}", css)
        If e.Item.Selected Then
            style = New BGImageStyle(map("imgActive")) 'use active image for selected page
            style.Width = Unit.Pixel(map("imgSize"))
            style.Height = Unit.Pixel(46)
            Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)
        Else
            style = New BGImageStyle(map("imgLink")) 'use default image for not selected page
            selector = String.Format(".{0}", css)
            style.Width = Unit.Pixel(map("imgSize"))
            style.Height = Unit.Pixel(46)
            Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)
        End If

        style = New BGImageStyle(map("imgHover"))
        selector = String.Format(".{0}:hover", css)
        style.Width = Unit.Pixel(map("imgSize"))
        style.Height = Unit.Pixel(46)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)
    End Sub