rss
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Placer une image sous un menu déroulant

firestorm1991, le mardi 17 avril 2007 à 18:15:47
Bonjour,
J'ai une page principale divisée en 3 cadres. Dans le cadre de gauche, j'ai un menu déroulant permettant d'ouvrir différentes pages dans le cadre cantral.
J'aimerais bien ajouter des images en bas du menu déroulant(dans le cadre de gauche donc), mais c'est là que je bloque. Les images se mettent en dessous(le menu déroulant est sur l'image) et non pas en bas. Je fais une copie du script ci dessous... J'ai mis le script du menu deroulant dans un div et l'image dans un autre mais ça ne change rien. Merci de votre aide.


<body>
<div>



<dl id="menu">

<dt onmouseover="javascript:montre();" onclick="javascript:cache();"><a href="#">Belgian citizens</a></dt>

<dt onmouseover="javascript:montre('smenu2');" onclick="javascript:cache('smenu2');">Links</dt>

<dd id="smenu2">
<ul>
<li><a href="#" target="mainFrame">Belgium</a></li>
<li><a href="#" target="mainFrame">blank</a></li>

<li><a href="#">Sous-Menu 2.3</a></li>
</ul
></dd>

<dt onmouseover="javascript:montre('smenu3');" onclick="javascript:cache('smenu3');">Menu 3</dt>

<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>

<dt onmouseover="javascript:montre('smenu4');" onclick="javascript:cache('smenu4');">LINKS</dt>

<dd id="smenu4">
<ul>
<li><a href="quicklinks.php" target="mainFrame">Quick links</a></li>
<li><a href="usefullinks.php" target="mainFrame">Useful links</a></li>

</ul>

</dd>




</dl>
</div>

<div>
<img src="../images/otan.jpg" /> //image à ajouter
</div>



</body>
Configuration: Windows XP
Internet Explorer 6.0
Répondre à firestorm1991  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mardi 17 avril 2007 à 19:18:08
salut,

si ton image est décorative tu peux la mettre en 'background' du <div> du menu. tu la place en bas et au milieu et tu ajoutes une marge intérieure basse égale à la hauteur de l'image. et le tout en css : et oui monsieur (ou madame d'ailleurs !) ! 
div{
	background-image:url("../images/otan.jpg");
	background-repeat:no-repeat;
	background-position:center bottom;
	padding-bottom:??px;
}

aperçu

sinon, on en reparle avec ta css sous les yeux, à plus !
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie...
   
Répondre à Dalida

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
firestorm1991, le mardi 17 avril 2007 à 20:41:28
Merci beaucoup pour ta réponse! En fait, mon image n'est pas décorative, je voudrais la mettre en dessous(en bas ;) ) du menu déroulant car elle servirait de lien pour aller sur le site de l'Otan. J'ai pensé la mettre en dernier élément <dt> mais ce n'est pas vraiment idéal...
   
Répondre à firestorm1991

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Jacobéo, le mardi 17 avril 2007 à 19:38:19
Bonsoir,

et en faisant comme cela ?

<div>
<marquee direction="up" scrollamount="1" > <img src="../images/otan.jpg" /><img src="file:///C|/Documents and Settings/JOUENNE DEPREUX/Bureau/Maintenance des sites/J-Images-J-In Conception/essai 1 J-Images-J-In Conception 10.03.07/discussions CommentCaMarche.com/Sans-titre-1.jpg" width="100" height="50" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="5,4,95,46" href="#celui que tu veux" />
</map> //<a href="http://www.xyz.com">image à ajouter</a>
</marquee>
</div>

Mais peut-être pas ompris la question. Enfin moi j'aime bien faut juste savoir viser pour les lliens.

Très drôle l'adresse est faite au hasard (xyz.com), et cela tombe sur un site dédié Apache !!
Internet ne vaut que s'il est partagé ...
Jacques
   
Répondre à Jacobéo

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
firestorm1991, le mardi 17 avril 2007 à 20:43:26
Merci aussi pour ta réponse, je teste ta solutio et je te dis quoi...
   
Répondre à firestorm1991

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
firestorm1991, le mardi 17 avril 2007 à 20:48:14
C'est assez joli comme effet ;) Je ne m'attendais pas à ça. En fait, c'est presque ça que je veux, mais sans l'effet de montée. J'aimerais que l'image reste fixe à l'endroit où elle démarre en bas du menu. Je ne sais pas commet tu as fait pour qu'elle démarre bien plus bas que le menu...
   
Répondre à firestorm1991

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Jacobéo, le mardi 17 avril 2007 à 21:10:06
Ce que tu veux, c'est de voir monter le texte sans l'image ? Internet ne vaut que s'il est partagé ...
Jacques
   
Répondre à Jacobéo

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
firestorm1991, le mardi 17 avril 2007 à 21:15:06
No no, ce que je veux, c'est d'avoir une image qui est affichée en bas de mon menu, qu'il soit déroulé ou non. Le problème, c'est que dès que j'ajoute mon image dans le script, elle apparaît littéralement "en dessous" du menu et non pas en bas du menu. Même si elle est dans un bloc div a part du bloc menu...
   
Répondre à firestorm1991

8


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Jacobéo, le mardi 17 avril 2007 à 21:24:14
Voilà une autre manière, image fixe et défilement du texte sur le dessus. A noter qu'en obtenant un lien depuis l'image, tu peuxchanger l'ensemble (image/texte) et obtenir un texte défilant correspondant avec plusieurs liens, ex. image: une 2cv, et au dessus les pièces disponibles avec un lien vers ce que tu veux. Tu vois ?

<body>
<div>
<marquee direction="up" scrollamount="1" >
<p><img src="../images/otan.jpg" /></p>
<p>//<a href="http://www.xyz.com">image à ajouter</a></p>
</marquee>
<img src="../discussions CommentCaMarche.com/Sans-titre-1.jpg" width="100" height="50" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="0,0,253,49" href="#celui que tu veux" />
</map>

</div>

</body> Internet ne vaut que s'il est partagé ...
Jacques
   
Répondre à Jacobéo

9


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
firestorm1991, le mardi 17 avril 2007 à 21:35:08
Merci. Je vois oui, en fait, maintenant que je regarde bien, c'est surtout ton area shape qui m'intéresse. Car dans le dernier script que tu viens de me donner, l'image "otan" défile toujours vers le haut, mais le bloc "area shape" est fixe et positionné à l'endroit que je veux. Est-il possible de mettre l'image otan dans le bloc area shape? Car c'est à ça que je voulais arriver en fait, je me suis sans doute mal exprimé...

PS: Quelle est cette balise, "marquee"?
PS 2: Je ne connaissais pas non plusla balise <map>
   
Répondre à firestorm1991

10


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Jacobéo, le mardi 17 avril 2007 à 22:02:28
Marquee est une balise permettant le défilement de ce que tu veux, texte ou image pourvu que cela soit enfermé dans <marquee> xxxx </marquee> Elle défile par défaut de droite à gauche, mais tu peux changer le sens horizontal (right ou leight) ou vertical (direction ="up", rapide ou lent (scrolldellay = vitesse en millisecondes ou scrollamount = vitesse en pixels).

Attention, il est possible que cette balise ne fonctionne pas sur tous les serveurs, mais elle fonctionne sur IE5,6 et 7.

La balise <map> xx </map> donne un lien "zoné" sur image. Elle est soit rectangulaire, ovale, ou polygonale. c'est ce que l'on appelle "zone réactive" Il peut y en avoir plusieurs sur une image.
Internet ne vaut que s'il est partagé ...
Jacques
   
Répondre à Jacobéo

11


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
firestorm1991, le mardi 17 avril 2007 à 22:07:51
Merci beaucoup pour tes explications et pour ton aide Jacobéo. Je vais mettre mon image dans une balise <map> afin de la coincer en bas de mon menu déroulant.
Une dernière question... Sais-tu pourquoi lorsque l'image défile, elle passe en dessous du menu? et pas, soit au dessus, ou mieux, s'arrêter dès qu'elle arrive au niveau du menu?
   
Répondre à firestorm1991

12


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Jacobéo, le mardi 17 avril 2007 à 22:12:53
Pour faire cela, il te faut JavaScript. Ce que je t'ai donné est basique et utilisé en HTML. Attendons les spécialistes, eh, holà ..
Ils se reposent pour mieux te répondre ;) Internet ne vaut que s'il est partagé ...
Jacques
   
Répondre à Jacobéo

13


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 firestorm1991, le mardi 17 avril 2007 à 23:05:01
Héhé, ;) ok. en tout cas, merci encore pour tout!
   
Répondre à firestorm1991
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger PE Builder 3.1.10aPE Builder - PE Builder vous permet de créer un CD-Rom (ou un DVD) bootable (appelé BartPE) de Windows XP (SP1 minimum) ou Windows Server...Catégorie: Personnalisation
Licence: Freeware/gratuit
Télécharger Daemon Tools Lite 4.30.1Daemon Tools Lite - Daemon Tools est un émulateur de lecteur CD/DVD, c'est-à-dire un outil capable de créer un lecteur CD ou un lecteur DVD...Catégorie: Gravure
Licence: Freeware/gratuit
Télécharger HP USB Disk Storage Format Tool 2.0.6HP USB Disk Storage Format Tool - HP USB Disk Storage Format Tool est un petit utilitaire permettant de formater une clé USB ou un lecteur MP4 . Il permet...Catégorie: Formatage/Partitionnement
Licence: Freeware/gratuit
Télécharger Image Resizer 1Image Resizer - Petit utilitaire (PowerToy) basique, très simple, permettant de réduire la taille d'une image, dans le but, notamment, de...Catégorie: Graphisme
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « placer une image sous un menu déroulant »