Dobrý den,

v masterpage mám komponentu menu, kterou načítám z databáze. V události MenuItemDataBound definuji každé položce ImageUrl. Chtěl bych, aby po najetí myši na položku se vždy změnil obrázek u jednotlivých položek. A ještě lepší by bylo, kdybych si mohl ke každé položce přidat imagebutton, je to možné nějak jednoduše udělat? Budu vděčný za jakékoliv nasměrování. Děkuji Martin

  protected void Menu1_MenuItemDataBound(object sender, MenuEventArgs e)
    {
        e.Item.ImageUrl = "~/App_Themes/Theme1/design/sipka.png";

    } 

 
           [Odpovědět]

Toto půjde udělat pouze pomocí Javascriptu.Myslím,že už se tu něco podobného jednou řešilo

 
           [Odpovědět]

Představoval jsem si to tak, že si nějak nadefinuji MenuItem a přidám ji atribut onmouseover do události Page_Load, asi takto:

 Menu1.Attributes.Add("onmouseover", "src='" + "App_Themes/Theme1/design/sipka2.png" + "'"); 

Ale opravdu nevím, jak to nadefinovat. Děkuji za reakci, Martin

 
           [Odpovědět]

Opravdu nikdo neví?

Martin

 
           [Odpovědět]

Stačí trošku hledat;)

Řešil jsem tady na foru podobný problém: http://www.vbnet.cz/forum-tema--4129-zve...

Vás bude asi zajímat tento řádek:

<asp:image runat="server" id="hodnoceni1"  onmouseover="this.src='App_Themes/Default/Images/hodnoceni_plne.png'" onmouseout="this.src='App_Themes/Default/Images/hodnoceni_prazdne.png'" width="16px" height="16px" />
 

Jedná se o změnu obrázku v asp komponentě image. Kód bude v HTML tam kde máte danou komponentu vloženou.

 
           [Odpovědět]

Děkuji za reakci. Asi jsem se špatně vyjádřil, jak změnit imageurl po najetí myši na obrázek umím. Ale nevím jak to nadefinovat v komponente menu -> menuitem, kdyz celé menu načítám z databáze.

Rád bych přidal ke každé položce menu obrázek, jak jsem popsal v původním dotazu a po najetí myší na položku se obrázek změnil.

Děkuji Martin

 
           [Odpovědět]

Asi si budete muset pohrát se šablonami položky menu. Jinak tam obrázky s vlastními skripty, které je budou měnit, asi nedostanete.

http://weblogs.asp.net/dannychen/archive...

 
           [Odpovědět]

Děkuji, zkoušel jsem si pohrát se šablonami, ale mám trochu problém s javascriptem.

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" OnMenuItemDataBound="Menu1_MenuItemDataBound">
                        <StaticItemTemplate>
                            <asp:Image ID="Image1" ImageUrl="~/App_Themes/Theme1/design/sipka.png" onmouseover="src='App_Themes/Theme1/design/sipka2.png';" name="img"
                                onmouseout="src='App_Themes/Theme1/design/sipka.png';" runat="server"></asp:Image>
                            <asp:Label runat="server" ID="Label1" Text='<%# Eval("Text") %>' onmouseover="document.getElementById('Image1.ClientID').src = 'App_Themes/Theme1/design/sipka2.png';" />
                        </StaticItemTemplate>
                    </asp:Menu>
 

Když najedu myší na obrázek, tak onmouseover funguje, ale když najedu na text (label), tak zůstane obrázek stejný. Poradíte mi prosím jak po najetí myší na label změnit vždy obrázek u dané položky?

Děkuji Martin

 
           [Odpovědět]

Výraz Image1.ClientID je špatný název prvku ve stránce, nenajde ho to a proto se obrázek nezmění.

Jako parametr funkce getElementById musíte dát skutečné ID obrázku, které sice získáte přes ClientID, ale jde to jedině v kódu.

Menu bude mít určitě nějakou událost ItemCreating nebo ItemDataBound. V ní se dostanete na jednotlivé položky a v kódu můžete tuto vlastnost nastavit.

 
           [Odpovědět]

Děkuji za rychlou reakci. Po přidání atributu onmouseover labelu, hází label NullReferenceException. Kde dělám prosím chybu?

 
protected void Menu1_MenuItemDataBound(object sender, MenuEventArgs e)
    {

        Label lb = (Label)Menu1.FindControl("Label1");
        Image i = (Image)Menu1.NamingContainer.FindControl("Image1");
        lb.Attributes.Add("OnMouseOver", "document.getElementById('" + i.ClientID + "').src = 'App_Themes/Theme1/design/sipka2.png'");

    }
 

 <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" OnMenuItemDataBound="Menu1_MenuItemDataBound">
                        <StaticItemTemplate>
                            <asp:Image ID="Image1" ImageUrl="~/App_Themes/Theme1/design/sipka.png" onmouseover="src='App_Themes/Theme1/design/sipka2.png';"
                                onmouseout="src='App_Themes/Theme1/design/sipka.png';" runat="server">
                            </asp:Image>
                            <asp:Label runat="server" ID="Label1" Text='<%# Eval("Text") %>' />
                        </StaticItemTemplate>
                    </asp:Menu>
 

 
           [Odpovědět]

Potíž je v tom, že label hledáte pomocí FindControl v celém Menu, ale on je tam několikrát (v akždé položce jednou).
Hledejte jen v e.Item.
To samé s tím obrázkem - tam navíc hledáte v naming containeru komponenty Menu, což je ještě větší oblast. Opět hledejte v e.Item.
StaticItemTemplate je jen šablona, která se pro každou položku zopakuje. e.Item odkazuje na instanci té šablony, ta je ve stránce pochopitelně víckrát - jednou pro každou renderovanou menu položku.

Abyste v tom měl jasno - komponenty v ASP.NET mají vlastnost NamingContainer, které odkazují na nadřazený naming container.
Pro ilustraci - každá položka menu je naming container, proto může každá z nich obsahovat komponentu Label1. Pokud tedy dáte e.Item.NamingContainer, vrátí vám to rodičovský naming container, tedy komponentu Menu. Pokud zavoláte Menu1.NamingContainer, dostanete například ContentPlaceHolder. Naming container je vždycky taková část stránky, v níž nemohou mít dvě komponenty stejné ID.

A ještě u té cesty - aby vám to fungovalo 100% i ze stránek, které nejsou v kořenovém adresáři, jako cestu k obrázku dosaďte Page.ResolveClientUrl("~/App_Themes/...").

 
           [Odpovědět]

Děkuji za vysvětlení. S tím naming containerem to už byla metoda pokus omyl ze zoufalství.

Původně jsem se snažil hledat jen v e.Item, ale vůbec nevím, jak to mám zapsat.

Label lb = (Label)e.Item.FindControl("Label1");
 

Takhle to bohužel nejde. Poradíte mi ještě prosím?

Díky Martin

 
           [Odpovědět]

Aha, vývojáři komponenty Menu byli tak kreativní, že do té události dali jen MenuItem (což je jen informativní třída, podle které se vytváření komponenty ve stránce), a nedali tam kontejner, na kterém by mohlo být zavoláno FindControl. Ach jo.

Takže jinak, ukázka je tady: http://stackoverflow.com/questions/70544....
Místo funkce, která vrací barvu, udělejte funkci, která bude vracet ten javascript. Parametr container je pak normální komponenta dědící z Control, takže uvnitř můžete zavolat FindControl a najít si příslušný label a obrázek.

 
           [Odpovědět]

V jaké vlastnoti mám volat tu funkci? Oni tu barvu volají ve ForeColor. Mám ten Label a Image taky vložit do Panelu? Panel neobsahuje vlastnost OnMouseOver.

Moc děkuji za rady, Martin

 
           [Odpovědět]

Vyřešeno, děkuji za návod.

    public Color GetItemColor(MenuItemTemplateContainer container)
    {
        Panel pan = (Panel)container.FindControl("Panel1");
        System.Web.UI.WebControls.Image i = (System.Web.UI.WebControls.Image)container.FindControl("Image1");
        pan.Attributes.Add("OnMouseOver", "document.getElementById('" + i.ClientID + "').src = 'App_Themes/Theme1/design/sipka2.png'");
        pan.Attributes.Add("OnMouseOut", "document.getElementById('" + i.ClientID + "').src = 'App_Themes/Theme1/design/sipka.png'");
        return Color.Black;
    }
 

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"
                            SiteMapProvider="MenuSiteMapProvider" />
                        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
                            <StaticItemTemplate>
                                <asp:Panel ID="Panel1" runat="server" ForeColor='<%# GetItemColor(Container) %>' CssClass="NavMenuItem">
                                    <asp:Image Name="obr" ID="Image1" ImageUrl="~/App_Themes/Theme1/design/sipka.png"
                                        runat="server"></asp:Image>
                                    <asp:Label runat="server" ID="Label1" Text='<%# Eval("Text") %>' />
                                </asp:Panel>
                            </StaticItemTemplate>
                        </asp:Menu>
 

 
           [Odpovědět]