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

siraero

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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.
VB.NET:
        <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
VB.NET:
#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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+

siraero

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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

VB.NET:
<?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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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:
HTML:
<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):
HTML:
<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:
HTML:
	.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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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:
HTML:
<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

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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:
HTML:
<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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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
VB.NET:
<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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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
VB.NET:
<DynamicItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" CssClass='<%# classes(page.GetDataItem)%>' Text='<%# Eval("Text")%>' Href='<%# Eval("NavigateUrl")%>' ToolTip='<%# Eval("ToolTip")%>' />
        </DynamicItemTemplate>
 

siraero

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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...
VB.NET:
<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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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
VB.NET:
    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.
 

JohnH

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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

VB.NET:
<?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>

VB.NET:
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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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

Active member
Joined
Jan 21, 2012
Messages
32
Programming Experience
Beginner
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

VB.NET Forum Moderator
Staff member
Joined
Dec 17, 2005
Messages
15,517
Location
Norway
Programming Experience
10+
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.
 
Top Bottom