Apprendre le Html - Tout le language HTML facil - Astwinds
 

 Menu déroulant en HTML avec des images menu deroulant images - texte

Nom: Menu déroulant images

Contenu:
Une image sans lien et une image dotée d'un lien. C'est a dire que lorsque vous cliquerez sur la première image il ne se passera rien et lorsque vous cliquerez sur la deuxième image vous serez dirigé vers l'adresse que vous aurez déterminée dans le lien.

Apprentissage:
Nous allons apprendre a créer un menu déroulant, a arrêter le défilement du menu au passage de la souris, a insérer une image dans ce menu et a mettre un lien sur une image.

Menu déroulant:

Les astuces d'Astwinds

Astwinds

La première image n'a pas de lien, la deuxième image est dotée d'un lien.

 
Description

Voici le code a insérer pour obtenir le menu déroulant

<!-- Début du code du menu déroulant d'Astwinds-->
<noscript><a href="http://www.astwinds.com/">Menu déroulant <br> d'Astwinds</A></noscript><marquee Class="Scroller" bgcolor="#669999" behavior="scroll" direction="up" width="150" height="90" scrollamount="2" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<div align="center"><img src="../interface/astwinds90x60v.gif" border="0" alt="Les astuces d'Astwinds"></a></p>
<p><a href="http://www.astwinds.com/ " target="_blank"><img src="../interface/astwinds120X60s.gif" border="0" alt="Astwinds"></a></div>
</marquee>
<!-- Fin du code du menu déroulant d'Astwinds -->


Explication du code

Afin d'obtenir le menu déroulant copiez le code ci dessus et collez le a l'endroit que vous souhaitez sur la page de votre site.

Comme vous pouvez le voir ce menu est composé de deux images, pour obtenir vos propres images modifiez les textes que j'ai mis en rouge. Voici les explications des parties en rouge:

 

<!-- Début du code du menu déroulant d'Astwinds-->
<noscript><a href="http://www.astwinds.com/">Menu déroulant <br> d'Astwinds</A></noscript>
Ceci détermine la provenance du code html. Ne modifiez pas cette partie du code.

<marquee>
Ceci est la balise d'ouverture du code du menu déroulant. C'est entre cette balise et la balise de fin : </marquee> que va se trouver le code de votre menu déroulant. Vous remarquerez la différence de la balise d'ouverture et la balise de fermeture par le slash   "/"  sur la balise de fin.

bgcolor="#669999" 
Ceci vous permet de déterminer la couleur du fond de votre menu. Vous pouvez indiquer la couleur en code comme sur l'exemple ou bien ecrire directement le nom de la couleur en anglais.
par exemple si vous voulez que votre fond soit rouge vous mettrez ceci: bgcolor="red"

direction="up"
Ceci détermine la direction vers la quelle défilera votre menu. Sur notre menu ici nous avons déterminé le défilement vers le haut, en anglais "up" les autres valeurs de direction sont:
      direction="down" ce qui signifie vers le bas
      direction="left" ce qui signifie vers la gauche
      direction="right" ce qui signifie vers la droite

width="150"
Ceci détermine la largeur de votre menu déroulant. La valeur est indiquée en pixels. Plus le nombre est grand, plus votre menu sera large, et bien sur plus le nombre sera petit, plus votre menu sera étroit.
P ar exemple pour un menu a 200 pixels vous marquerez : width="200"

height="90"
Ceci détermine la hauteur de votre menu. Modifiez le nombre comme pour la largeur

onmouseover="this.stop()" onmouseout="this.start()"
Ceci determine la façon dont vous arrêtez le menu de défiler.
       onmouseover="this.stop()"
  dès que vous passez la souris sur le menu le défilement s'arrête
       onmouseout="this.start()"  dès que vous retirez la souris votre menu redémarre
Ne modifiez rien dans ces deux options, si vous ne souhaitez pas appliquer d'arrêt de défilement à votre menu, supprimez tout simplement ces deux éléments de votre code

img src="../interface/astwinds90x60v.gif"
Ceci détermine l'adresse de votre première image. Dans cet exemple l'image que j'ai insérée dans le menu se trouve dans le dossier "interface" et le nom de l'image est: astwinds90x60.gif, astwinds90x60 étant le nom de l'image et .gif étant l'extension du fichier au format "gif".
Changez cette adresse par l'adresse de votre image.

Je vous conseille d'utiliser des images au format .gif ou .jpg car ce sont des formats beaucoup moins lourds que le format .bmp, vos pages se chargeront plus rapidement.
Pour convertir vos images vous pouvez télécharger Convertor qui est un utilitaire de conversion d'images *.bmp, *.gif, *.jpg.

border="0"
Ceci determine la bordure de votre première image. Si vous souhaitez ajouter une bordure a votre image, remplacez le "0" par un chiffre suppérieur a "0"
Plus votre chiffre sera élevé, plus la bordure de votre  image sera épaisse

alt="Les astuces d'Astwinds"
Ceci détermine le texte qui s'affichera lors du survol de la souris sur la première image. Si vous mettez le pointeur de votre souris sur l'image sans cliquer, une bulle apparaitra avec ce texte "Les astuces d'Astwinds"
Remplacez ce texte par le texte que vous souhaitez voir s'afficher lors du survol de la souris de vos visiteurs sur votre image.

<a href="http://www.astwinds.com/ ">
Ceci représente le lien de votre deuxième image. C'est vers cette adresse que votre visiteur sera dirigé lorsqu'il cliquera sur la deuxième image.
Remplacez cette adresse par l'adresse vers la quelle vous souhaitez que pointe votre lien lorsqu'un de vos visiteurs cliquera sur la deuxième image.

 

img src="../interface/astwinds120X60s.gif"    border="0"    alt="Astwinds" 
pour ces trois otpions de la deuxième image la description est la même que pour la première image

Voila vous connaissez maintenant le détail du code changez juste les textes en rouge par vos propres textes et vos propres adresses.

Pour rajouter d'autres images vous pouvez copier une ligne de code et la coller a la suite. Par exemple vous copiez le code de la deuxième image et vous le collez a la suite:


Voici notre code de départ avec une image en plus.Ici le code de la troisième image est en vert. J'ai donc copié le code qui est en violet et je l'ai collé a la suite: ici en vert

<!-- Début du code du menu déroulant d'Astwinds-->
<noscript><a href="http://www.astwinds.com/">Menu déroulant <br> d'Astwinds</A></noscript><marquee Class="Scroller" bgcolor="#669999" behavior="scroll" direction="up" width="150" height="90" scrollamount="2" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<div align="center"><img src="../interface/astwinds90x60v.gif" border="0" alt="Les astuces d'Astwinds"></a></p>
<p><a href="http://www.astwinds.com/ " target="_blank"><img src="../interface/astwinds120X60s.gif" border="0" alt="Astwinds"></a></p><p><a href="http://www.astwinds.com/ " target="_blank"><img src="../interface/astwinds120X60s.gif" border="0" alt="Astwinds"></a></p></div>
</marquee>
<!-- Fin du code du menu déroulant d'Astwinds -->



 

  Autres astuces (pointer avec la souris arrête et redemarre le défilement)

Pointez les astuces avec votre souris afin d'arrêter le défilement, retirez votre souris et le défilement recommence

....Téléchargement codecs

Téléchargez des logiciels gratuits, des codecs, des lecteurs Multimédia

© Astwinds