18041 sujets

Questions générales et questions de débutants

Image dans menu déroulant

Bonjour à tous!

Je viens de créer un site internet dans lequel j'y ai mis un menu déroulant!
Cependant, j'aimerai que mes onglets soient un peu plus esthétique et que ce ne soit pas simplement un rectangle de couleur.
J'aimerai savoir s'il est possible de faire un menu déroulant où les boutons sont des images ? Dans le code, comment fait on pour inserer une image?

Merci pour votre aide

Clémentine
Modérateur
Bonjour Clémentine et bienvenue sur Alsacreations,

Comme nous ne sommes pas dotés de pouvoirs paranormaux nous permettant de voir le code de ton menu déroulant, ni de quel type de menu il s'agit exactement, tu vas devoir nous fournir l'adresse de ton site. Smiley cligne

Si l'adresse est confidentielle, tu peux nous fournir le code ou encore créer une page de démonstration de ton menu.
Bonjour à toi et merci pour ta réponse si rapide!

Comme je viens tout juste de créer le site, je ne l'ai pas encore mis en ligne et il n'a pas d'adresse! Je ne sais pas

Je te donne donc les codes de ma page parceque je ne sais pas comment créer une page de démonstration... Smiley confused 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Menu vertical parametrable</title> 
<script type="text/javascript"> 
  
window.onload = affiche; 
  
// ----- Fonction d'affichage des menus ----- 
  
function affiche (id) { 
  
var d = document.getElementById(id); 
  
var nbelmenu = 4        // nombre d'éléments dans le menu 
  
for ( var i = 1 ; i <= nbelmenu ; i++ ) { 
    if ( document.getElementById('sousmenu'+i) ) { 
        document.getElementById('sousmenu'+i).style.display='none'; 
    } 
} 
if (d) { 
    d.style.display='block'; 
} 
} 
  
</script> 
  
</head> 
<body> 
<script type="text/javascript"> 
  
var fontfamil = "arial, sans-serif" ;    // choix de la police de caractères du menu 
var tailleftmen = "85%" ;                // taille de la police du menu 
var fontcolo = "#356597" ;            // couleur de la police de caractères du menu 
var cellbckgrnd = "#e5e6ee" ;            // couleur des cellules du menu 
var positionver = 1 ;                    // position verticale du menu dans la page 
var positionhor = 0 ;                    // position horizontale du menu dans la page 
var largeurcell = 11 ;                    // largeur des cellules du menu 
var hauteurcell = 20 ;                    // hauteur des cellules du menu 
var espacemcell = 16 ;                    // espace entre les cellules du menu 
var subfontfamil = "arial, sans-serif" ;    // choix de la police de caractères des sous-menus 
var subtailleftmen = "75%" ;                // taille de la police des sous-menus 
var subfontcolo = "#356597" ;            // couleur de la police de caractères des sous-menus 
var subftsucolo = "#000000" ;            // couleur de la police de sous-menus survolés 
var subcellbckgrnd = "#F5F6F9" ;            // couleur des cellules des sous-menus 
var submovcellmenu = "absolute" ;            // "absolute"=sans déplacement des cellules menu ("relative" = avec déplacement) 
var subcellposhor = 1 ;                    // position horizontale des cellules des sous-menus 
var sublargeurcell = 8 ;                    // largeur des cellules des sous-menus 
var subhauteurcell = 15 ;                    // hauteur des cellules des sous-menus 
  
// creation des styles CSS du menu ---> 
document.write( "<style type='text/css'>" ); 
  
document.write( "#menuvert {position: relative;top: " + positionver + "em;" ); 
    document.write( "left: " + positionhor + "em;" ); 
    document.write( "width: " + largeurcell + "em;}" ) ; 
  
document.write( "#menuvert dt {font-family: " + fontfamil + ";" ) ; 
    document.write( "font-size: " + tailleftmen + ";color: " + fontcolo + ";" ); 
    document.write( "text-align: center;background: " + cellbckgrnd + ";" ); 
    document.write( "cursor: hand;height: " + hauteurcell ) 
    document.write( "px;margin: " + espacemcell + "px;list-style-type: none;}" ); 
  
document.write( "#menuvert dd {background: " + subcellbckgrnd + ";" ); 
    document.write( "position: absolute;left: " + subcellposhor + "em;" ); 
    document.write( "margin-top: -1em;width: " + sublargeurcell + "em;}" ); 
  
document.write( "#menuvert li {font-family: " + fontfamil + ";" ); 
    document.write( "font-size: " + subtailleftmen + ";list-style-type: none;" ); 
    document.write( "height: " + subhauteurcell + "px;}" ); 
  
document.write( "#menuvert li a, #menuvert dt a {color: " + subfontcolo + ";" ); 
    document.write( "text-decoration: none;}" ); 
  
document.write( "#menuvert li a:hover {color: " + subftsucolo + ";" ); 
    document.write( "text-decoration: none;}" ); 
  
document.write( "}</style>" ); 
// FIN des styles CSS 
  
</script> 
  
</head> 
<body> 
 
<table width="709" height="596" border="0" align="center" cellpadding="0" background="fond.jpg">
  <!--DWLayoutTable-->
  <tr>
    <td width="192" height="143"> </td>
    <td width="511"> </td>
  </tr>
  <tr>
    <td height="338" valign="top">
	<dl id="menuvert">
         <dt onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();">Mariage<!--remplacer Menu 1 par le texte du menu--></dt> 
        <dd id="sousmenu1" onmouseover="javascript:affiche('sousmenu1');" onmouseout="javascript:affiche();"> 
            <ul> 
                <li><a href="mariage.htm"><!--remplacer menu11.htm par le lien du menu-->Film de Mariage<!--remplacer Menu 1.1 par le texte du menu--></a></li>
				                <li><a href="formation.htm"><!--remplacer menu11.htm par le lien du menu-->Formation<!--remplacer Menu 1.1 par le texte du menu--></a></li> 
                <li><a href="parten.htm"><!--remplacer menu11.htm par le lien du menu-->Partenaires<!--remplacer Menu 1.1 par le texte du menu--></a></li> 
                <li><a href="formule.htm"><!--remplacer menu11.htm par le lien du menu-->Formules<!--remplacer Menu 1.1 par le texte du menu--></a></li> 
 
            </ul> 
        </dd>
        <dt onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">Espace Entreprise
		
		</dt>
        <dd id="sousmenu2" onmouseover="javascript:affiche('sousmenu2');" onmouseout="javascript:affiche();">
          <ul>
            <li>
              <div align="left"><a href="filmentr.htm">Film Entreprise</a></div>
            </li>
            <li>
              <div align="left"><a href="formation.htm">Formation</a></div>
            </li>
			<li>
			  <div align="left"><a href="moyens.htm">Moyens de diffusion</a></div>
			</li>
            <li>
              <div align="left"><a href="pubclip.htm">Publicité Clip Vidéo</a></div>
            </li>
            <li>
              <div align="left"><a href="evence.htm">Evènements CE</a></div>
            </li>
          </ul>
        </dd>
		
        <dt onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();"><a href="evenem.htm">Evènementiel</a></dt>
        
        <dt onmouseover="javascript:affiche('sousmenu4');" onmouseout="javascript:affiche();"><a href="docum.htm">Court Métrage Documentaire</a></dt>
        
		<dt onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();"><a href="duplic.htm">Duplication Transfert</a></dt>
                         
		<dt onmouseover="javascript:affiche('sousmenu3');" onmouseout="javascript:affiche();"><a href="contact.htm">Contact</a></dt>
        
    </dl></td>
    <td> </td>
  </tr>
  <tr>
    <td height="107"> </td>
    <td> </td>
  </tr>

</table>  
</body>
</html>


J'espère que ça pourra te renseigner! Smiley smile
Modérateur
Avant de proposer des solutions pour mettre des images, j'aimerais t'informer de certaines choses importantes.

Alsacreations est une communauté qui est dédiée aux standards du Web, à l'accessibilité et aux normes de qualité. L'un des objectifs est de faire en sorte que le Web soit accessible à tous, peu importe les logiciels des visiteurs et leur condition physique.

Je t'invite donc à lire attentivement un article au sujet des menus déroulants de ce type : L'accessibilité des menus de navigation en cascade

Une fois cette lecture complétée, tu seras mieux placée pour juger de la pertinence de l'utilisation d'un menu déroulant dans ton cas. Es-tu certaine que cela apporte quelque chose au visiteur ? La simplicité est parfois tellement plus appréciable.

Ceci étant dit, pour insérer une image en HTML, c'est comme ceci :


<img src="nom-de-limage.jpg" alt="Intitulé de l'image" width="largeur" height="hauteur">


Dans, dans un lien qui pointe vers l'accueil, ca pourrait être ceci :


<a href="accueil.htm"><img src="nom-de-limage.jpg" alt="Accueil" width="100" height="200"></a>


L'attribut alt est très important pour afficher le texte alternatif lorsque les images sont désactivées, indisponibles ou en cours de téléchargement.
Modifié par Tony Monast (06 Dec 2006 - 17:21)
Je te remercie pour ton conseil!! Smiley smile

Cela fait des semaines que je suis sur la réalisation de mon site, et mon objectif est qu'il soit le plus simple possible pour les internautes et pour moi car je suis une débutante... Smiley cligne
Mais je pense qu'un menu déroulant est nécéssaire pour une meilleure navigation au sein du site!! Si j'avais pu m'en passer, je l'aurai fait volontier car j'ai eu beaucoup de difficultés à l'insérer !

Peux-tu m'indiquer à quel endroit mettre les codes que tu m'as donné? dans "head" ou "body" ?? je ne m'y connais pas vraiment...
Modérateur
clems23 a écrit :

Mais je pense qu'un menu déroulant est nécéssaire pour une meilleure navigation au sein du site!!


Non justement, ce n'est pas le cas. As-tu lu l'article au complet ? La qualité et la facilité de navigation dans le site n'est pas améliorée avec un menu déroulant, c'est même le contraire. Cela rend la navigation dans le site plus difficile, non seulement pour les personnes ayant des handicapes, mais aussi pour la population en générale. L'article explique tout ca. Ceci est sans compter les navigateurs Web où ton menu déroulant pourrait mal s'afficher.

Si tu veux tout de même rester sur ta position, il faut que tu insère le code de l'image à l'intérieur de tes liens. Je vais prendre un exemple avec ton code.


<li>
 <div align="left">
<a href="moyens.htm">Moyens de diffusion</a>
</div>
</li>


devient


<li>
 <div align="left">
<a href="moyens.htm"><img src="moyens.jpg" alt="Moyens de diffusion"></a>
</div>
</li>


Le fichier moyens.jpg doit se trouver dans le même dossier que ta page web. Est-ce que tu sais comment faire des liens relatifs, comme "images/moyens.jpg" ou "../images/moyens.jpg" ?
Modifié par Tony Monast (06 Dec 2006 - 17:39)
Sujet clos
Aller à