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

Signaler
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012
-
Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
-
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

17 réponses

Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
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
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012

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.
Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
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
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012

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>


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

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 .
Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
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
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012

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 ???
Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
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
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012

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.
Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
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
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012

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
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012

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" />
    
    



Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
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
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012

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
Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
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
Messages postés
75
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
3 décembre 2012

Ok un grand merci a toi.
Messages postés
417
Date d'inscription
vendredi 13 juin 2008
Statut
Membre
Dernière intervention
21 juillet 2010
1
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