cf.geocities.com/willfonkam   

Le menu horizontal est un menu qui, comme son nom l'indique, s'affiche à l'horizontale (Quoi de plus normal!). Cependant, la particularité de celui-ci est qu'il se fait avec la balise <LI> et on sait qu'en temps normal, c'est une balise qu'on utilise pour les listes (elle affiche les puces et va automatiquement à la ligne). La particularité de ce menu est donc qu'on se sert de la balise des listes à puce qu'on aligne horizontalement (en temps normal elle s'affiche à la verticale).

LI { FLOAT: left} <!-- On l'aligne à gauche -- >

DIV.menu A {

BORDER-RIGHT: gray 1px solid;
BORDER-LEFT: gray 1px solid; BORDER-TOP: gray 1px solid;
DISPLAY: block;
BACKGROUND: aliceblue;
FLOAT: left;
MARGIN: 0px 2px;
COLOR: cornflowerblue;
BORDER-BOTTOM: gray 1px solid;
HEIGHT: 20px;
TEXT-ALIGN: center;
TEXT-DECORATION: none

}

<!-- Propriétés et attributs du lien -->

DIV.menu A:hover {

BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
BACKGROUND: c0c0c0;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: black 1px solid; text-decoration:none;
color:white

}

<!-- Propriétés et attributs du lien quand il est survolé par la souris -->

DIV.menu A:active {

BORDER-RIGHT: gray 1px solid;
BORDER-TOP: gray 1px solid;
BACKGROUND: gray;
BORDER-LEFT: gray 1px solid;
COLOR: #fff;
BORDER-BOTTOM: gray 1px solid;

}

<!-- Propriétés et attributs du lien actif -->

<div class=menu>

<UL>

<li><a href=""> Menu 1 </a><li>
<li><a href=""> Menu 2 </a><li>
<li><a href=""> Menu 3 </a><li>
<li><a href=""> Menu 4 </a><li>
<li><a href=""> Menu 5 </a><li>
<li><a href=""> Menu 6 </a><li>
<li><a href=""> Menu 7 </a><li>
<li><a href=""> Menu 8 </a><li>
<li><a href=""> Menu 9 </a><li>

</UL>

</div>

Voici ce que ça donne:

Avec <MARQUEE>

La balise <MARQUEE> (pour ceux qui l'ignorent encore) s'utilise pour les textes défilants.
Voici un exemple de texte défilant avec la balise <MARQUEE>

L'Astuce!!
<MARQUEE> peut nous servir à faire des textes qui rebondissent comme un ballon.


Pour animer ainsi un texte, il faut utiliser plusieurs fois la balise <MARQUEE> pour le même texte mais avec des directions différentes.

Je m'explique:

MARQUEE servant à faire défiler un texte dans plusieurs directions (Gauche—Droite ; Haut—Droite et vice-versa), si au lieu de faire défiler le texte seulement de gauche à droite ou de haut en bas, on combine deux directions (gauche et haut, par exemple), le texte va donc aller dans les deux directions. Pour qu'il rebondisse aux coins, on devra juste lui donner la Propriété Behavior et l'attribut Alternate.


Speedball
divertissant, pas vrai?

<center>
<marquee behavior=alternate direction=up width=60% height=100 scrollamount=50 style="BORDER-RIGHT: steelblue 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: steelblue 1px solid; BORDER-BOTTOM: black 1px solid; text-decoration:none; color:steelblue";>
<marquee behavior=alternate direction=left scrollamount=30> <font color=red size=1>Speedball</font></marquee></marquee></center>

On peut s'amuser à faire défiler ses textes ou ses images pour egayer son site

.   ht-bs   BGNoir   Cadre  


Lent 


Rapide

C'est possible grace aux propriétés Scrollamount pour la vitesse de défilement et Scrolldelay pour le temps entre deux défilements. BGCOLOR pour la couleur de background, Style="BORDER-RIGHT:; BORDER-BOTTOM: couleur/épaisseur ; BORDER-LEFT: couleur/épaisseur ; BORDER-TOP: couleur/épaisseur ;" pour la couleur et l'épaisseur des bordures à droite, bas, gauche et haut; text-decoration: none/underline/overline/overline underline ; pour la décoration du texte (aucune, souligné, surligné, souligné et surligné). color:steelblue" pour la couleur du texte.

Un message d'alerte est un message qui apparaît dans une boîte de dialogue. Il peut être très utile (par exemple à demander confirmation avant d'afficher une page). Les messages d'alerte sont écrits en JavaScript

Voici deux d'alerte. ou ou

Pour faire un message d'alerte, on n'a besoin que du code suivant:

<a href="lien_de_la_page" onclick="window.alert('Ecrivez votre message ici');"> Mon message d'alerte </a>
ou encore
<input type=button onclick="alert('votre message');" value="Exemple 1"> pour l'exemple 1.

Pour l'exemple2, on remplace juste 'alert' par 'confirm' et par 'prompt' pour l'exemple3

Attention! Si vous voulez utiliser des apostrophes, vous devez les préceder d'un backslash (ou alors le code plante!) comme ceci:

<a href="lien_de_la_page" onclick="window.alert('Voici comment l\'apostrophe s\'écrit pour ne pas planter les codes');"> Mon message d'alerte </a>

Vous pouvez, si vous voulez, donner à la souris la forme que vous voulez quand elle survole un mot. Il s'agit en fait d'une feuille de style qu'on insère dans la balise <A>


Survolez ici avec la souris



<a href="" style="cursor: ne-resize;">Survolez ici avec la souris</A>

default text hand wait Help n-resize s_resize w-resize e-resize ne-resize nw-resize sw-resize se-resize crosshair

TESTER TESTER TESTER TESTER TESTER TESTER TESTER TESTER TESTER TESTER TESTER TESTER TESTER TESTER

Dans cette partie, nous entrons dans le domaine du javascript. Les scripts que je vais vous montrer peuvent se combiner à la partie sur les messages d'alerte la différence ici est que nous pouvons décider quand est-ce que le message va s'afficher:

Quand la souris survole le lien

Pour cela, on écrit:

<a href="lien.html" onMouseover="alert('Message - les apostrophes sont précédées par un "\"')">Lien</a>

Quand on clique

Pour cela, on écrit:

<a href="lien.html" onClick="alert('Message - les apostrophes sont précédées par un "\"')">Lien</a>

Quand on doubleclique

Pour cela, on écrit:

<a href="lien.html" onDblClick="alert('Message - les apostrophes sont précédées par un "\"')">Lien</a>

Quand Le bouton de la souris est appuyé

Pour cela, on écrit:

<a href="lien.html" onClick="alert('Message - les apostrophes sont précédées par un "\"')">Lien</a>

Quand on relâche le bouton de la souris

Pour cela, on écrit:

<a href="lien.html" onClick="alert('Message - les apostrophes sont précédées par un "\"')">Lien</a>

Quand la souris quitte le lien

Pour cela, on écrit:

<a href="lien.html" onMouseout="alert('Message - les apostrophes sont précédées par un "\"')">Lien</a>

<blink> (texte clignotant) avec Internet Explorer!!!

On a toujours su que la balise blink ne s'appliquait qu'avec Netscape. C'est vrai. Mais voici un moyen de faire clignoter un texte même avec Internet Explorer!

Exemple:

Regardez-moi ce texte... C'est y pas beau?

Comment on fait?

C'est simpel! on se sert de <MARQUEE>. Mais comment... Bon pour en finir je vous donne le code:

<marquee behavior="slide" loop="-1" scrolldelay="500" scrollamount="900">Mon texte... ça clignote!</marquee>

Et ça donne à peu près ce que vous avez là haut. Pour que ça clignote 10 fois, mettez juste loop="10".

---

Trucs et astuces

Liens Utiles

---

---