Y a t-il moyen de creer un menu avec image(control menu) avec web.sitemap

Question

Y a t-il moyen de creer un menu avec image(control menu) avec web.sitemap

Signaler

cs_neotof

Messages postés: 75
Date d'inscription: jeudi 12 août 2004
Statut: Membre
Dernière intervention: 3 décembre 2012

- 29 déc. 2009 à 12:59
ggtry

Messages postés: 417
Date d'inscription: vendredi 13 juin 2008
Statut: Membre
Dernière intervention: 21 juillet 2010

- 30 déc. 2009 à 22:06

Bonjour j'alimente mon menu avec un sitemap:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode ImageUrl="~/ImagesMenuHoriz/Artisanal.jpg" title="Home" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products"
     url="Products.aspx" ImageUrl="~/ImagesMenuHoriz/Artisanal.jpg">
      <siteMapNode title="Hardware"
       description="Hardware choices"
       url="Hardware.aspx" />
      <siteMapNode title="Software"
       description="Software choices"
       url="Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services"
     description="Services we offer"
     url="Services.aspx">
      <siteMapNode title="Training"
       description="Training classes"
       url="Training.aspx" />
      <siteMapNode title="Consulting"
       description="Consulting services"
       url="Consulting.aspx" />
      <siteMapNode title="Support"
       description="Support plans"
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

Tous s'affiche sauf les images comment faire

merci

Afficher la suite

A voir également:

17 réponses

Répondre Posez votre question

ggtry · Answer 1 · 2009-12-29T19:29:25+0100

Réponse 1 / 17

ggtry

Messages postés: 417
Date d'inscription: vendredi 13 juin 2008
Statut: Membre
Dernière intervention: 21 juillet 2010

1
29 déc. 2009 à 19:29

Salut,

Une solution pourrait être (en vb) :

Protected Sub Menu1_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
If Not DataBinder.Eval(e.Item.DataItem, "[imageurl]") Is Nothing Then
e.Item.ImageUrl = DataBinder.Eval(e.Item.DataItem, "[imageurl]").ToString()
End If
End Sub

GGtry

cs_neotof · Answer 2 · 2009-12-29T21:04:22+0100

Merci de ton aide

Voila ce que j'ai quand je double clik sur le menu

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs) Handles Menu1.MenuItemClick

    End Sub
    Protected Sub Menu1_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
        If Not DataBinder.Eval(e.Item.DataItem, "~/ImagesMenuHoriz/Artisanal.jpg") Is Nothing Then
            e.Item.ImageUrl = DataBinder.Eval(e.Item.DataItem, "~/ImagesMenuHoriz/Artisanal.jpg").ToString()
        End If
    End Sub


End Class

Voici mon siteMap :

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode  ImageUrl="~/ImagesMenuHoriz/Artisanal.jpg" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products" url="Products.aspx" >
     <siteMapNode title="Hardware" description="Hardware choices" url="Hardware.aspx" />
     <siteMapNode title="Software" description="Software choices" url="Software.aspx" />
   </siteMapNode>
   <siteMapNode title="Services" description="Services we offer"
     url="Services.aspx">
      <siteMapNode title="Training"
       description="Training classes"
       url="Training.aspx" />
      <siteMapNode title="Consulting"
       description="Consulting services"
       url="Consulting.aspx" />
      <siteMapNode title="Support"
       description="Support plans"
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

Voici mon code source de la page


    <form id="form1" runat="server">
    
    
    
    </form>

J'ai fait ce que tu m'as dit, rien n'y change.

J'ai réellement besoin de trouvé la solution, pourtant le contrôle menu gère très bien les images, quand je les ajoutes manuellement ca fonctionne, mais j en aie besoin a partir du fichier sitemap.

Merci de ton aide.

ggtry · Answer 3 · 2009-12-29T21:14:47+0100

Bonsoir,

Non, tu ne dois pas mettre l'adresse url de ton image, mais laisser [imageurl].
En fait, ton ImageUrl, dans ton sitemap, n'est pas une propriété déclarée directement (contrairement à title, description ou url).
Pour récupérer title, par exemple (dans le code donné), tu pourrais écrire :
DataBinder.Eval(e.Item.DataItem, "title")
Mais pour récupérer l'attribut (que tu ajoutes) ImageUrl, tu dois écrire le nom entre crochets (pas mettre l'adresse) :
DataBinder.Eval(e.Item.DataItem, "[imageurl]")
C'est tout. Les crochets permettent de trouver le nom de la propriété que tu ajoutes.

GGtry

cs_neotof · Answer 4 · 2009-12-30T14:54:10+0100

Super un grand merci a toi.

Mais j'ai encore un petit problème, au niveau du fichier siteMap.

Dans le premier Nœud, je n'aie pas sur mettre de sous-menu !!!! donc j ai fait comme çà:


<?xml version= "1.0" encoding= "utf-8" ?>
  <siteMap>
     <siteMapNode>  
      <siteMapNode ImageUrl  ="~/ImagesMenuHoriz/Artisanal.jpg" description="SECTEUR: ARTISANALES" url="">
        <siteMapNode title="Carrosserie - préparateur peinture" url="" />
        <siteMapNode title="Chauffage-central: soudure acier"   url="" />
        <siteMapNode title="Horticulture" url="" />
        <siteMapNode title="Ouvrier maçon"  url="" />
        <siteMapNode title="Ouvrier carreleur" url="" />
        <siteMapNode title="Pose et raccordement des radiateurs de chauffage central"   url="" />
        <siteMapNode title="Décoration de table" url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Arts_plastique.jpg" description="SECTEUR: ARTS PLASTIQUE" url="">
        <siteMapNode title="Techniques d'expression" url="" />
        <siteMapNode title="Expression manuelle niv 1"  url="" />
        <siteMapNode title="Expression manuelle niv 2" url="" />
        <siteMapNode title="Gravure"  url="" />
        <siteMapNode title="Description de l'image" url="" />
        <siteMapNode title="Composition de l'image" url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Boulangerie.jpg" description="SECTEUR: BOULANGERIE" url="">
        <siteMapNode title="Boulangerie - Pâtisserie - Techniques élémentaires"  url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Remediation.jpg"  description="SECTEUR: REMEDIATION" url="">
        <siteMapNode title="Formation de base - niveau 2"  url="" />
        <siteMapNode title="Humanités générales - certificat d'enseignement secondaire supérieur"  url="" />
        <siteMapNode title="Renforcement en orthographe" url="" />
        <siteMapNode title="Alphabétisation: communication orale et écrite n.2"  url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Soins_corps.jpg"  description="SECTEUR: SOINS DU COPRS" url="">
        <siteMapNode title="Bases de pédicurie"  url="" />
        <siteMapNode title="Coiffure dames"  url="" />
        <siteMapNode title="Coiffure - encadrement des stages" url="" />
        <siteMapNode title="Coiffure perfectionnement des techniques, création et conception"  url="" />
        <siteMapNode title="Esthétique"  url="" />
        <siteMapNode title="Soins de beauté des pieds et des mains"  url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Stylisme.jpg"  description="SECTEUR: HABILLEMENT" url="">
        <siteMapNode title="Bases de retouche"  url="" />
        <siteMapNode title="Techniques d'exécution"  url="" />
        <siteMapNode title="Techniques spécifiques: manteau" url="" />
        <siteMapNode title="Techniques spécifiques: robe et ensemble"   url="" />
        <siteMapNode title="Bases de retouches"  url="" />
        <siteMapNode title="Conception assistée par ordinateur"  url="" />
        <siteMapNode title="Confection enfant de 2 à 12 ans"  url="" />
        <siteMapNode title="Stylisme" url="" />
        <siteMapNode title="Techniques spécifiques: Robe" url="" />
        <siteMapNode title="Techniques de retouche"   url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Informatique.jpg"  description="SECTEUR: INFORMATIQUE" url="">
        <siteMapNode title="Cisco"  url="" />
        <siteMapNode title="Suite Office"  url="" />
        <siteMapNode title="Traitement de l'image" url="" />
        <siteMapNode title="Word - niveau moyen"   url="" />
        <siteMapNode title="Bachelier en informatique de gestion (R1)"  url="" />
        <siteMapNode title="Edition assitée par ordinateur"  url="" />
        <siteMapNode title="Opérateur de saisie-encodeur"  url="" />
        <siteMapNode title="Maintenance PC" url="" />
        <siteMapNode title="UTL" url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/images.jpg"   description="SECTEUR: TECHNIQUES/INDUSTRIE, TECHNOLOGIES DE POINTE" url="">
        <siteMapNode title="Graduat Energie et Environnement : Niveau 1"  url="" />
        <siteMapNode title="Bases de dessin assisté par ordinateur"  url="" />
        <siteMapNode title="Dessinateur industriel" url="" />
        <siteMapNode title="Graduat Energie et Environnement : Niveau 2"   url="" />
        <siteMapNode title="Graduat Energie et Environnement : Niveau 3"  url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Langue.jpg"  description="SECTEUR: LANGUES" url="">
        <siteMapNode title="Allemand"  url="" />
        <siteMapNode title="Anglais"  url="" />
        <siteMapNode title="Collaboration Communauté russophone" url="" />
        <siteMapNode title="Espagnol"   url="" />
        <siteMapNode title="Français"  url="" />
        <siteMapNode title="Italien" url="" />
        <siteMapNode title="Néerlandais"  url="" />
      </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Restauration.jpg"  description="SECTEUR: RESTAURATION" url="">
      <siteMapNode title="Bases de restauration"  url="" />
      <siteMapNode title="Suites restauration"  url="" />
      <siteMapNode title="Suites restauration (ESS)" url="" />
      <siteMapNode title="Restaurateur niveau 1"   url="" />
      <siteMapNode title="Restauration-gastronomie niveau CTSS"   url="" />
      <siteMapNode title="Restauration-gastronomie niveau ESI"  url="" />
      <siteMapNode title="Salle niveau 1"  url="" />
    </siteMapNode>
      <siteMapNode ImageUrl="~/ImagesMenuHoriz/Tertiaire.jpg"  description="SECTEUR: TERTIAIRE" url="">
        <siteMapNode title="Connaissances de gestion"  url="" />
        <siteMapNode title="Hôtesse d'accueil"  url="" />
        <siteMapNode title="Vendeur - Vendeuse" url="" />
        </siteMapNode>
    </siteMapNode>
  </siteMap>

cs_neotof · Answer 5 · 2009-12-30T14:55:45+0100

Réponse 5 / 17

cs_neotof

Messages postés: 75
Date d'inscription: jeudi 12 août 2004
Statut: Membre
Dernière intervention: 3 décembre 2012

30 déc. 2009 à 14:55

Oups désolé j ai envoyé le message trop vite.

Donc en faite on dirait a cause du premier sitemap il me fait un genre d'espace dans mon menu .

Un grand merci .

ggtry · Answer 6 · 2009-12-30T15:18:01+0100

Réponse 6 / 17

ggtry

Messages postés: 417
Date d'inscription: vendredi 13 juin 2008
Statut: Membre
Dernière intervention: 21 juillet 2010

1
30 déc. 2009 à 15:18

Bonjour,

Je ne suis pas sûr de comprendre exactement.
Mais ton sitemap, en tout cas, est une simple source de données (avec des champs title, url, etc.) xml, et il est donc inutile d'y appliquer un quelconque formatage.
Si ce que tu veux, c'est éviter d'avoir une premier noeud général dont dépendent tous les autres, tu peux écrire dans ta page asp :

GGtry

cs_neotof · Answer 7 · 2009-12-30T15:52:38+0100

Réponse 7 / 17

cs_neotof

Messages postés: 75
Date d'inscription: jeudi 12 août 2004
Statut: Membre
Dernière intervention: 3 décembre 2012

30 déc. 2009 à 15:52

Ok un grand merci pour ton aide en tous cas.

Une dernière questions penses tu que c est faisable que chaque item aie une couleur différentes ???

ggtry · Answer 8 · 2009-12-30T17:15:39+0100

Je me demande si tu n'es pas obligé, dans ce cas, d'injecter de l'html dans la propriété text de l'item.
A la rigueur, le plus simple serait de définir une propriété "couleur" dans ton sitemap, par exemple :
<siteMapNode title="Carrosserie - préparateur peinture" url="" couleur="#ffcc66"/>
Tu pourras alors récupérer la couleur sur le même événement que ci-dessus, et faire, e.g. :

If Not DataBinder.Eval(e.Item.DataItem, "[couleur]") Is Nothing Then
e.Item.Text = "" & e.Item.Text & ""
End If

GGtry

cs_neotof · Answer 9 · 2009-12-30T17:39:47+0100

Réponse 9 / 17

cs_neotof

Messages postés: 75
Date d'inscription: jeudi 12 août 2004
Statut: Membre
Dernière intervention: 3 décembre 2012

30 déc. 2009 à 17:39

Ok ca fonctionne bien, mais je voudrais changer la couleur de sélection de mon item quand je mets la souris dessus.

c est la propriété StaticSelectedStyle que je voudrais changer pour chaque item.

Vraiment un très grand merci.

ggtry · Answer 10 · 2009-12-30T18:23:37+0100

Tu veux dire une couleur par élément de texte lorsque la souris passe dessus ?
C'est faisable, mais si tu utilises DynamicHoverStyle tu ne pourras définir qu'une seule couleur (tu dis Static, mais il s'agit bien du texte ? donc de la partie dynamique de ton menu ?).
La seule solution me semble être de le programmer directement en javascript.
Si l'on repart de ce qui précède, avec la définition de 'couleur' dans le sitemap (ou sinon, il serait aussi possible de définir la couleur aléatoirement, ou en fonction de l'ordre dans le menu), tu peux, à la place de définir color dans le span, renvoyer à une fonction javascript à l'aide de onmouseover et onmouseout.
La solution la plus simple donnerait :
dans le vb,
If Not DataBinder.Eval(e.Item.DataItem, "[couleur]") Is Nothing Then
e.Item.Text = "" & e.Item.Text & ""
End If

et le js, à mettre dans le head de ta page :

<script type="text/javascript">
function couleur(cl, ceci)
{
var sp=ceci.parentNode.getElementsByTagName("span");
sp[0].style.color=cl;
}
</script>

GGtry

cs_neotof · Answer 11 · 2009-12-30T19:12:21+0100

Merci,

Ce n'est pas la couleur du texte que je veux changer, mais la couleur du cadre de l'image(chaque image aura une couleur différente) qui s'affiche(le cadre) quand je passe la souris dessus.


<siteMapNode ImageUrl="~/ImagesMenuHoriz/Artisanal.jpg" description="SECTEUR: ARTISANALES" couleur="#ffcc66" url="">
      <siteMapNode title="Carrosserie - préparateur peinture"  url="" />
      <siteMapNode title="Chauffage-central: soudure acier"   url="" />
      <siteMapNode title="Horticulture" url="" />
      <siteMapNode title="Ouvrier maçon"  url="" />
      <siteMapNode title="Ouvrier carreleur" url="" />
      <siteMapNode title="Pose et raccordement des radiateurs de chauffage central"   url="" />
      <siteMapNode title="Décoration de table" url="" />
    </siteMapNode>

Donc pour le premier item ca serait la couleur du cadre de l'image quand je passe dessus.

Merci

cs_neotof · Answer 12 · 2009-12-30T19:16:29+0100

Voici le code de mon menu


 
        <StaticSelectedStyle BackColor="#507CD1" />
        <StaticMenuItemStyle HorizontalPadding="2px" VerticalPadding="5px" />
        <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
        <DynamicMenuStyle BackColor="#B5C7DE" />
        <DynamicSelectedStyle BackColor="#507CD1" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#284E98" ForeColor="White" />

ggtry · Answer 13 · 2009-12-30T20:25:27+0100

C'est le même principe, mais en plus chi***.
Un problème pourrait provenir de la définition du staticmenuitemstyle, mais cela n'est pas sûr. A voir.
Je suppose que, dans ton sitemap, tu as donc 'imageurl' et 'couleur', ce dernier attribut servant à définir la couleur qui sera donnée au border quand tu passes la souris dessus. Si tu peux à la fois une couleur différente pour chaque cadre, et une couleur différente lors du mouseover, tu peux définir un autre attribut 'couleur2' et adapter le code ci-dessous.
En fait, pour le faire, le plus simple me paraît de ne plus déterminer l'ImageUrl, mais de définir l'image dans le .text (cela dépend aussi de la possibilité d'avoir un lien url sur ton image, mais apparemment, il n'y en a pas).

En vb, il faudrait alors faire un truc du genre (nb. il faut définir, pour que cela marche, à la fois 'imageurl' et 'couleur') :

Protected Sub Menu1_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
If Not DataBinder.Eval(e.Item.DataItem, "[imageurl]") Is Nothing Then
If Not DataBinder.Eval(e.Item.DataItem, "[couleur]") Is Nothing Then
e.Item.Text = ""

End If
End If
End Sub

Et en js :

<script type="text/javascript">
function couleur(cl, ceci)
{
var sp=ceci.parentNode.getElementsByTagName("img");
sp[0].style.borderColor=cl;
}
</script>

Je pense que cela doit marcher.
C'est le défaut et l'avantage des vacances : on s'emmerde, alors on passe le temps.

GGtry

cs_neotof · Answer 14 · 2009-12-30T20:57:48+0100

J'ai essayé avec tes explications, mais ca ne fonctionne pas, je ne vois plus mes images.

Voici ce que j'ai au cas ou j'aurai raté quelle que chose


 Protected Sub MenuHoriz_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs) Handles MenuHoriz.MenuItemDataBound

        'ImageUrl, dans le sitemap, n'est pas une propriété déclarée directement (contrairement à title, description ou url).
        'Pour récupérer title, par exemple (dans le code donné)DataBinder.Eval(e.Item.DataItem, "title")
        'Mais pour récupérer l'attribut que j' ajoutes ImageUrl,je dois écrire le nom entre crochets DataBinder.Eval(e.Item.DataItem, "[imageurl]")
        'Les crochets permettent de trouver le nom de la propriété que j' ajoutes. 

        If Not DataBinder.Eval(e.Item.DataItem, "[imageurl]") Is Nothing Then
            If Not DataBinder.Eval(e.Item.DataItem, "[couleur]") Is Nothing Then
                e.Item.Text = ""

            End If
        End If
    End Sub

<siteMapNode ImageUrl="~/ImagesMenuHoriz/Artisanal.jpg" description="SECTEUR: ARTISANALES" couleur="#e56b00" >

<head runat="server">
    <!-- Lien vers la feuille de style pour la structure du site -->
<link rel="stylesheet" media="screen" type="text/css" title="StructureSite" href="~/Css/StructureSite.css" />
<!-- Lien vers la feuille de style pour la structure du site -->
<script type="text/javascript">
function couleur(cl, ceci)
{
var sp=ceci.parentNode.getElementsByTagName("img");
sp[0].style.borderColor=cl;
}
</script> 
    <title></title>
</head>

J'ai pas de messages d'erreur, mais a la palce du menu j ai un genre de rectangle noir si je mets ma souris dessus j ai accès au 2,3 premiers sous menu.

J'ai de la chance alors que tu sois aussi en vacances.

Merci encore

ggtry · Answer 15 · 2009-12-30T21:14:57+0100

Salut,

Je ne sais pas.
Le code fonctionne chez moi, alors je te l'envoie, c'est à toi de voir :
<script runat="server">

Protected Sub Menu1_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
If Not DataBinder.Eval(e.Item.DataItem, "[imageurl]") Is Nothing Then
If Not DataBinder.Eval(e.Item.DataItem, "[couleur]") Is Nothing Then
e.Item.Text = ""

End If
End If

End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Page sans titre</title>
<script type="text/javascript">
function couleur(cl, ceci)
{
var sp=ceci.parentNode.getElementsByTagName("img");
sp[0].style.borderColor=cl;
}
</script>
</head>

<form id="form1" runat="server">

</form>

GGtry

cs_neotof · Answer 16 · 2009-12-30T22:00:33+0100

Réponse 16 / 17

cs_neotof

Messages postés: 75
Date d'inscription: jeudi 12 août 2004
Statut: Membre
Dernière intervention: 3 décembre 2012

30 déc. 2009 à 22:00

Ok un grand merci a toi.

ggtry · Answer 17 · 2009-12-30T22:06:53+0100

Réponse 17 / 17

ggtry

Messages postés: 417
Date d'inscription: vendredi 13 juin 2008
Statut: Membre
Dernière intervention: 21 juillet 2010

1
30 déc. 2009 à 22:06

Ah oui, l'image n'est générée que si et seulement si tu as défini à la fois 'imageurl' et 'couleur'. Si l'un ou l'autre sont absents de ton sitemap, cela ne marchera pas parce que les deux tests sont dépendants. Il faut donc que les deux soient définis.

GGtry

Votre réponse