Création Site Web
Liene2 MASS
Sébastien Verel
vereli3s.unie.fr
www.i3s.unie.fr/
∼
verelÉquipeSoBi-UniversitédeNieSophia-Antipolis
26 et28 novembre 2008
1
Savoirhanger lestyled'unélément de lapage avejavasript
2
Savoirfairerendre unontenu visibleou non
3
Savoirsimuler desalques
4
Savoirreer untype de menudéroulant
CeTD ne ouvrepas touteslespossibilitésde javasript, et
non...
Vouspouvezvous reporter àd'autresours si vousêtes
intéresséou me poserdesquestionspartiulières
doument.getElementById("nom")
donne l'élément identierparlahainede aratères "nom".
aessible seulement lorsquetout le doument aété hargé
<sript type="text/javasript">
funtion affiheID(name) {
var element = doument.getElementById(name);
alert(element);
alert(element.innerHTML);
}
</sript>
...
<boby>
<p id="para"> ... </p>
<h3 onlik="affiheID('para');">Affihe</h3>
</body>
Par l'attributstylede l'objet ontenant l'élément
Chaque propriété CSS orrespondàunattributde l'objet
Le tiret
−
estimpossible:remplaerparmajusulefuntion hangeBold() {
var element = doument.getElementById("para");
element.style.olor = "red" ;
element.style.fontWeight = "bold" ;
}
funtion makeLighter() {
var element = doument.getElementById("para");
element.style.olor = "blak" ;
element.style.fontWeight = "lighter" ;
}
En modiant lapropriétéCSS display on peut ontrolerl'apparition
d'un élément.
→
de même avel'attributdisplay de l'objetelement.style.display = "none";
element.style.display = "blok";
Erire unepage web quiahel'élémentdivlorqu'onlique
sur l'itemle désignant.
Touslesélémentsdivs'ahentau mêmeendroitdanslapage
(voir tableau).
Erire unmenudansune divquisesitueà gauhe
Tousles diérentsalques sontdans desdivde lamêmelasse
"alque" avedesidentiantsdiérents.Tousesalques
doivent êtredansune divàdroite.
Positionneràl'aideduss lesdivà gauheet àdroite.
Le menului-mêmepeut êtredansunautre divquipermet
alorsde lepositionnerplusbas danslapage.
Chaque itemdumenu doitêtre identierde manièreunique.
Délarer2 tableauxtabCalques ettabIndexhaque tableau
ontiendrarespetivement leséléments desalqueset des
items.
Denir unefontion initialisationquiremplitlestableaux
préedents.
Ajouter dansleode HTML,unsript javasript pour exéuter
lafontion initialisation.
Le prinipe onsisteà exéuterune fontionahe lorsqu'un
item estliqué. Cettefontionhange àlafois laouleurde
fond del'itemliquéet lapropriété display dualque
orrespondant. Dénir ette fontionjavasript et ajouterle
ode HTMLnéessaire.
Erireunepage web quiaheunmenudéroulant sur2lignes.
Erire unmenuprinipalsur uneligne
Erire autantde sous-menu en lignequ'ilexisted'itemdansle
menu prinipal
Ajuster les espaementsetles ouleursd'ahage
Délarer1 tableautabIndex quiontiendrarespetivementles
élémentsdes sous-menus.
Denir unefontion initialisationquiremplitlestableaux
préedents.
Ajouter dansleode HTML,unsript javasript pour exéuter
lafontion initialisation.
Le prinipe onsisteà exéuterune fontionahe lorsqu'un
item estliqué. Cettefontionhange lapropriétédisplay du
sous-menu orrespondant. Dénir ettefontion javasript et
ajouter leode HTMLnéessaire.
