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]

deleted the "Image/" & and then i get the images

I explained why and how that path was used in post 4.

1. the images link is not the full lenght, thay are to small.

The anchor element will only size to its text content, background image is not relevant for its size. I addressed that in post 5.

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 !??

That is how :active css selector is supposed to work, maybe you're looking for :focus selector? CSS Reference

 

[siraero]

I explained why and how that path was used in post 4.

The anchor element will only size to its text content, background image is not relevant for its size. I addressed that in post 5.

That is how :active css selector is supposed to work, maybe you're looking for :focus selector? CSS Reference

Hi JohnH

So fare many thx, and sry that i dont get it 1. time.
About the focus, if i add this to the codebehind for the master.page and to the web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="default.aspx" title="page 1" description="page 1" css="c1" imgLink="image/link1.png" imgActive="image/link1selected.png" imgHover="image/link1hover.png" imgFocus="image/link1selected.png">
        <siteMapNode url="default2.aspx" title="page 2" description="page 2" css="c2" imgLink="image/link2.png" imgActive="image/link2selected.png" imgHover="image/link2hover.png" imgFocus="image/link2selected.png" />
        <siteMapNode url="default3.aspx" title="page 3" description="page 3" css="c3" imgLink="image/link3.png" imgActive="image/link3selected.png" imgHover="image/link3hover.png" imgFocus="image/link3selected.png" />
    </siteMapNode>
</siteMap>

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)
        style.Width = Unit.Pixel(234)
        style.Height = Unit.Pixel(29)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)

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

        style = New BGImageStyle(map("imgActive"))
        selector = String.Format(".{0}:active", css)
        style.Width = Unit.Pixel(234)
        style.Height = Unit.Pixel(29)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)

        style = New BGImageStyle(map("imgFocus"))
        selector = String.Format(".{0}:focus", css)
        style.Width = Unit.Pixel(234)
        style.Height = Unit.Pixel(29)
        Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)
    End Sub

Then it still wont show the selected/focus image it only show the gray image.
i can see on the CSS ref that the focus is for input, cant i use it for a href !?
Or how do i use that !?

I fix then size error/problem with post 5, THX.

 

[JohnH]

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

Maybe I misunderstood you here. I think what you're trying to do is to highlight the selected page in menu. This is not a selected element as such (it is not an :active/:focus element), it is only the selected page in menu. This can for a regular menu be done by using a css class that defines the selected style and assign this class to the menus StaticSelectedStyle.CssClass property, menu then dynamically assign the css class for selected item. Since here you are using dynamically generated style classes with independent images that is not a possibility. A workaround for this, since each time a new page is selected new styles are also generated, is to use the MenuItemDataBound handler again and check e.Item.Selected, and if so use the active/focus image as background instead for normal style, example:

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

 

[siraero]

Maybe I misunderstood you here. I think what you're trying to do is to highlight the selected page in menu. This is not a selected element as such (it is not an :active/:focus element), it is only the selected page in menu. This can for a regular menu be done by using a css class that defines the selected style and assign this class to the menus StaticSelectedStyle.CssClass property, menu then dynamically assign the css class for selected item. Since here you are using dynamically generated style classes with independent images that is not a possibility. A workaround for this, since each time a new page is selected new styles are also generated, is to use the MenuItemDataBound handler again and check e.Item.Selected, and if so use the active/focus image as background instead for normal style, example:

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

Hi again

i have tryed to play with this, when i see the HTML and viewsource then i can se that the selected class have the name

class="level1 selected"
class="level2 selected"
class="level3 selected"

depending on what site thats selected.

I then add then to the MenuItemDataBound
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

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
selector = String.Format(".{0}:active", css)
style.Width = Unit.Pixel(234)
style.Height = Unit.Pixel(29)
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(234)
style.Height = Unit.Pixel(29)
Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)
End If

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

style = New BGImageStyle(map("imgSelected"))
selector = String.Format(".level{0}:selected", css)
style.Width = Unit.Pixel(234)
style.Height = Unit.Pixel(29)
Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)
End Sub

but i cant get it to show the selected image, right now its not showing a image when selected, so it know thats its need to show a image
but if i use the code i get this in codeview in HTML

.levelc1:selected { background-image:url('image/link1selected.png');height:29px;width:234px; }
.levelc2:selected { background-image:url('image/link2selected.png');height:29px;width:234px; }
.levelc3:selected { background-image:url('image/link3selected.png');height:29px;width:234px; }

thats wrong when i can see that the a class is level1, level2 or level3 Selected.
or did i misse something !?

 

[JohnH]

class="level1 selected"

Yes, but ignore that, as I said it is not applicable for you. Your links is what have the css classes you have defined.

If e.Item.Selected Then
style = New BGImageStyle(map("imgActive")) 'use active image for selected page
selector = String.Format(".{0}:active", css)

The red part is wrong. As I said the selected menu has nothing to do with :active or any special selector, it is just a regular element that should use css class you have set, the only difference is that when that page is selected (e.Item.Selected) that css class should show the active background image rather than the regular one. The code sample was pretty accurate in this regard.

And use the relevant code boxes when posting. There are simple buttons in posting editor that generate the appropriate formatting tags for you. If you have ever used a text processor like Word or anything you know how to format text, and posting messages here at the forums is no different.

 

[siraero]

Yes, but ignore that, as I said it is not applicable for you. Your links is what have the css classes you have defined.

The red part is wrong. As I said the selected menu has nothing to do with :active or any special selector, it is just a regular element that should use css class you have set, the only difference is that when that page is selected (e.Item.Selected) that css class should show the active background image rather than the regular one.

And use the relevant code boxes when posting. There are simple buttons in posting editor that generate the appropriate formatting tags for you. If you have ever used a text processor like Word or anything you know how to format text, and posting messages here at the forums is no different.

Hi
JohnH

Its works perfect now, thx. about the

And use the relevant code boxes when posting. There are simple buttons in posting editor that generate the appropriate formatting tags for you. If you have ever used a text processor like Word or anything you know how to format text, and posting messages here at the forums is no different.

I know but in this post and my post before this the add code #, is not showed. there is missing some icons in the Quick Reply menu.

But THX alot, i will play a little with the code, and then make the code i need.
one last question, in this ex. i used 9 images.

Is it posible to use one image and then use the background-position: in the CssStyle on the web.sitemap or do i need to make it this way. !?

 

[JohnH]

there is missing some icons in the Quick Reply menu.

Don't use Quick Reply for advanced posting, click Go Advanced, or the big 'Reply to Thread' button if you're not quoting.

Is it posible to use one image and then use the background-position: in the CssStyle on the web.sitemap or do i need to make it this way. !?

What does that mean?

 

[siraero]

Don't use Quick Reply for advanced posting, click Go Advanced, or the big 'Reply to Thread' button if you're not quoting.

What does that mean?

if i normally use this as nav from the css

#nav a { display: block; width: auto; text-indent: -9999px; height: 21px; background: url('nav.png') no-repeat scroll 0pt 0pt transparent; } #nav a#home { width: 61px; } #nav a#home:hover { background-position: 0pt -21px; }
#nav a#home:active { background-position: 0pt -21px; } #nav a#about { width: 99px; background-position: -61px 0pt; } #nav a#about:hover { background-position: -61px -21px; }
#nav a#about:active { background-position: -61px -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; }

Here i have one image nav.png on that image i have some diffrent positions for the hover/selected and normal link.
Can i use that, or do i need to cut the image out like the image in this thread so i have 9 images.

 

[JohnH]

Basically that is all about css classes, surely you can set what css class you want on your menu items.
In fact # is a id selector, but for all practical purposes you'll working with . class selectors.

 

[siraero]

Hi John

Hope its k to ask, if i have 5 images thats have the same height, how can i then changes the width !?
lets say c1 (imgLink, imgHover and imgActiv) have one width and c2 another and c3 another again and so on
but the images have the same width inside every single c number group.

How can i then show the images in the right width, now its the same width for all 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)         style.Width = Unit.Pixel(234)         style.Height = Unit.Pixel(29)         Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)          style = New BGImageStyle(map("imgHover"))         selector = String.Format(".{0}:hover", css)         style.Width = Unit.Pixel(234)         style.Height = Unit.Pixel(29)         Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)          style = New BGImageStyle(map("imgActive"))         selector = String.Format(".{0}:active", css)         style.Width = Unit.Pixel(234)         style.Height = Unit.Pixel(29)         Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)      End Sub

 

[JohnH]

Use an If-Else statement ?
Storing information in sitemap file could also be an option.

 

[siraero]

Ok but where do i do that (with the IF) and is it the title="page 3" from the sitemap im looking at from the sitemap
And is it

If Eval("Text") = "page 1" Then
style.Width = Unit.Pixel(234)
ElseIf Eval("Text") = "page 2" Then
style.Width = Unit.Pixel(100)

and so on, Or !?

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)         style.Width = Unit.Pixel(234)         style.Height = Unit.Pixel(29)         Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)          style = New BGImageStyle(map("imgHover"))         selector = String.Format(".{0}:hover", css)         style.Width = Unit.Pixel(234)         style.Height = Unit.Pixel(29)         Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)          style = New BGImageStyle(map("imgActive"))         selector = String.Format(".{0}:active", css)         style.Width = Unit.Pixel(234)         style.Height = Unit.Pixel(29)         Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)     End Sub

 

[JohnH]

In MenuItemBound event handler you can access predefined properties that maps SiteMapNode to MenuItem from e.Item, and custom properties you also have an example for.

While on the topic, since you are only tranferring a single value from MenuItemBound to the item templates, you can do without the classes dictionary and instead just set e.Item.Value and in item template do Eval("Value").

 

[siraero]

In MenuItemBound event handler you can access predefined properties that maps SiteMapNode to MenuItem from e.Item, and custom properties you also have an example for.

While on the topic, since you are only tranferring a single value from MenuItemBound to the item templates, you can do without the classes dictionary and instead just set e.Item.Value and in item template do Eval("Value").

Hi John
i have made this and its working, but its a long code, can i write the code so its not so long, but do the same thing !?

    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
            If css = "c1" Then
                style.Width = Unit.Pixel(105)
            ElseIf css = "c2" Then
                style.Width = Unit.Pixel(96)
            ElseIf css = "c3" Then
                style.Width = Unit.Pixel(98)
            ElseIf css = "c4" Then
                style.Width = Unit.Pixel(95)
            ElseIf css = "c5" Then
                style.Width = Unit.Pixel(99)
            ElseIf css = "c6" Then
                style.Width = Unit.Pixel(130)
            End If
            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)
            If css = "c1" Then
                style.Width = Unit.Pixel(105)
            ElseIf css = "c2" Then
                style.Width = Unit.Pixel(96)
            ElseIf css = "c3" Then
                style.Width = Unit.Pixel(98)
            ElseIf css = "c4" Then
                style.Width = Unit.Pixel(95)
            ElseIf css = "c5" Then
                style.Width = Unit.Pixel(99)
            ElseIf css = "c6" Then
                style.Width = Unit.Pixel(130)
            End If
            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)
        If css = "c1" Then
            style.Width = Unit.Pixel(105)
        ElseIf css = "c2" Then
            style.Width = Unit.Pixel(96)
        ElseIf css = "c3" Then
            style.Width = Unit.Pixel(98)
        ElseIf css = "c4" Then
            style.Width = Unit.Pixel(95)
        ElseIf css = "c5" Then
            style.Width = Unit.Pixel(99)
        ElseIf css = "c6" Then
            style.Width = Unit.Pixel(130)
        End If
            style.Height = Unit.Pixel(46)
            Page.Header.StyleSheet.CreateStyleRule(style, Nothing, selector)
    End Sub

 

[JohnH]

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.