Quand JavaScript et CSS s'allient ...
C'est la porte ouverte à toutes les possibilités.
Cet exposé se limitera toutefois à l'une d'entre elles et votre imagination ou votre savoir (si vous avez bien acquis les subtilités d'un langage de Script ...) feront le reste.
Le résultat de cette feuille de style est bien visible et il paraît difficile de ne pas remarquer le lien ...
Imaginons toutefois qu'il échappe à la sagacité du visiteur de votre site ... quoique, en l'occurence, il faut être particulièrement inattentif pour ne pas le voir ... et présentons-lui ceux qui suivent.
Quand JavaScript s'en mêle, voyez le résultat sur ceux-ci ... :
Délirant, n'est-ce pas ... ? Et pourtant bien simple à mettre en oeuvre. Si, si !
Voici la feuille de style qui règle la présentation de cette page (oui : je vous livre le tout ... à vous de trier !) :
p,body {color:black; font-family: Arial, Helvetica; font-size: 14px}
h2 {color:blue}
b {color:red; letter-spacing:1px}
b.Imp3 {background-color:aqua; color:black; font-size:14 px; font-weight:bold}
table.Jav {background-color: black; font-family:arial;
font-size:16px; font-weight:bold; text-align:center;}
div.Contour {background-color: black; color:white; width:600px; height:50px;
margin-left:auto; margin-right:auto; border: 5px outset;
font-family:arial; font-size:12px; font-weight:bold}
div.Cadre {background-color: #ffffcc; width:700px; height:auto; border:10px solid #ffffcc; text-align:left}
.coul { background-color: black; color:blue; text-decoration:none}
.coul :visited {color:blue; text-decoration:none}
.coul :hover {background-color: yellow; color:red; text-decoration:underline; border: 5px outset}
Vous aurez remarqué l'utilisation d'une table en lieu et place de blocs (encore nommés boîtes et/ou calques), ce qui peut paraître choquant pour les puristes. Une fois n'est pas coutume ... En réalité, vous comprendrez, grâce à la lecture d'autres exposés, que l'utilisation de tables est parfois un mal nécessaire pour arriver à ses fins. C'est le cas dans les évènements que je vous propose dans cette page.
Voyons la signification de ces règles de style dans les balises :
body appelle le fond de la page
dans un autre dossier p,body règle la couleur, la famille et la
taille de la police dans ces balises h2 règle la couleur du titre de cette
page b règle la couleur et l'espacement entre les
lettres des sélecteurs explicités dans cet encart b.Imp3 règle l'affichage des 2 lignes de règles
de style internes écrites ci-dessous table.Jav règle fond, police et centrage du
texte dans le tableau contenant l'effet "rollover" div.Contour règle dimensions, marges, bordure
et police du calque contenant les calques de liens div.Cadre règle les calques contenant toutes
les explications de cette page (les faux tableaux jaunes) .coul règle la présentation des liens mis en
oeuvre dans les exemples présentésCette feuille de style est externe. A l'intérieur de la page (en code source), afin de présenter correctement les deux premiers liens, le premier calque (div class="Contour") en contient 3 autres. Celui du centre comporte le texte proposant d'activer les liens et sa règle de style est incluse dans le calque-mère. Les deux autres calques intégrés possèdent chacun leur propre règle de style qui s'écrit comme suit :
pour celui de gauche
<div class="coul" style="float:right; width:190px; height:50px; border:10px">
pour celui de droite
Enfin, pour obtenir l'effet de couleurs déclenché par le curseur passant sur les cellules du tableau, j'ai ajouté à l'intérieur de chacune de celles-ci les commandes suivantes :
Et voilà ! A vous de jouer, maintenant !
Et, si malgré toutes ces explications, vous n'avez pas parfaitement compris,
voyez en code source de cette page ... : elle n'a rien à cacher ... et vous réservera d'ailleurs quelques
surprises !
