DHTML
Dynamic Hyper Text Markup Language

Azzam & Kaesar ALNIJRES

Feuilles de Style CSS
Cascading Style Sheets

Netscape Communicator 4 et MSIE  4.
Une feuille de style  permet de  personnaliser les  marqueurs HTML et la page
HTML en général ;
marges, emplacements, visibilité  etc. Une feuille de style est définie entre <style> et </style> dans la partie en-tête du document HTML.

<html>
<head>
<style type="text/css">
</style>
</head>

Les propriétés de chaque marqueur personnalisé sont entre 2 accolades { }. Chaque propriété se termine par  un point-virgule( ; ) . L'affichage par défaut est dans body

<html>
<head>
<style type="text/css">
body
{
font-family:arial;
background-color:black;
color:white;
}
h1
{
color:red;
}
</style>
</head>
<body>
Ici affichage par défaut
<h1>Ici titre H1 personnalisé</h1>
</body>
</html>

Annuler l'effet style pour un marqueur    :

<html>
<head>
<style type="text/css">
body
{
font-family:arial;
background-color:black;
color:white;
}
h1
{
color:red;
}
</style>
</head>
<body>
<h1>Ici titre H1 en rouge</h1>
< h1 style="color:white">Ici titre en blanc </h1>
</body>
</html>

Annuler le style de body :

<html>
<head>
<style type="text/css">
body
{
font-family:arial;
background-color:black;
color:white;
}
</style>
</head>
<body>
Ici affichage en blanc : style dans body
<div style="color:red">
Ici affichage en rouge le style dans body est annulé
</div>
</body>
</html>

Appliquer un style sur un ou plusieurs documents HTML en insérant la feuille de style dans un fichier séparé :
1-Les  commandes entre <style> et </style> sont à sauvegarder dans un fichier d'extension .css
2-Le document HTML doit avoir dans l'en-tête
   <link href="nom_fichier_style.css" rel=stylesheet type="text/css">

style.htm

 style.css
<html>
<head>
<link href="style.css" rel=stylesheet type="text/css">
</head>
<body>
<h1>Ici titre H1 en rouge</h1>
</body>
</html>		 <style type="text/css">
body
{
font-family:arial;
background-color:black;
color:white;
}
h1
{
color:red;
}
</style>

Utiliser les Classes pour définir un style

<html>
<head>
<style type="text/css">
  .perso
   {
   font-family:impact;
   color:red;
   }
</style>
</head>
<body>
<h1 class=perso>Ici la classe est utilisée avec une balise HTML</h1>
<div class=perso>Ici affichage avec la classe perso</div>
</body>
</html>

Positionnement avec les feuilles de style

<html>
<head>
<style type="text/css">
  .perso
   {
    position: absolute;
   top: 50px; left: 200px;
  font-family:impact;
   color:blue;
   background-color:yellow;
   }
</style>
</head>
<body>
<h1 class=perso>Bonjour</h1>
</body>
</html>

 

Accéder aux éléments d'une feuille de style CSS avec  Netscape 4 et MSIE 4

Netscapce :
document.id.nom_propriete

par exemple :
document.id.visibility='visible';
document.id.left=400;


MSIE 4 :
document.all.id.style.nom_propriete

Exemple :
document.all.id.style.fontSize = 12;
document.all.id.style.color = "blue";
document.all.id.style.left = 100;

Exemple 1 avec Netscape Communicator 4
<html>
<head>
<style type="text/css">
.perso
{
position: absolute;
top: 50px; left: 200px;
font-family:impact;
color:blue;
background-color:yellow;
}

</style>

<script language="javascript">
<!--hide

index=0;

function ch()
{
if(index) document.nom.visibility='hidden';
else document.nom.visibility='visible';
index=!index;
setTimeout("ch()",100);
}
//-->
</script>
</head>
<body>
<div id="nom" class=perso>Bonjour</div>
<form>
<input type="button" name="change" value="change" onClick="ch()">
</form>
</body>
</html>

 

Exemple 2 avec Netscape Communicator 4

<html>
<head>
<style type="text/css">
.perso
{
position: absolute;
top: 50px; left: 200px;
font-family:impact;
color:blue;
background-color:yellow;
}
</style>

<script language="javascript">
<!--hide
hauteur =getHaut();
largeur=getLarge();
pos=0;
posh=0;

function getHaut()
{
var outilJava=java.awt.Toolkit.getDefaultToolkit();
var taille=outilJava.getScreenSize();
var haut=taille.height;
return haut; //return hauteur écran
}

function getLarge()
{
var outilJava=java.awt.Toolkit.getDefaultToolkit();
var taille=outilJava.getScreenSize();
var large=taille.width;
return large;  //return largeur écran
}

function ch()
{
if(pos+10 <largeur) pos+=10; 
else {    if(posh+30 <hauteur) posh+=30;
          else posh=0;
          pos=0;

          }
document.nom.left=pos;
document.nom.top=posh;
setTimeout("ch()",100);
}
//-->
</script>
</head>
<body>
<div id="nom" class=perso>Bonjour</div>
<form>
<input type="button" name="change" value="change" onClick="ch()">
</form>
</body>
</html>


Exemple   avec MSIE 4

<html>
<head>
<style type="text/css">
.perso
{
position: absolute;
top: 50px; left: 200px;
font-family:impact;
color:blue;
background-color:yellow;
}
</style>

<script language="javascript">
<!--hide

index=0;

function ch()
{
if(index)document.all.nom.style.visibility='hidden';
else document.all.nom.style.visibility='visible';
index=!index;
setTimeout("ch()",100);
}
//-->
</script>
</head>
<body>
<div id="nom" class=perso>Bonjour</div>
<form>
<input type="button" name="change" value="change" onClick="ch()">
</form>
</body>
</html>

Intercepter les Evénements de la Souris avec  Netscapce Communicator 4 :

  1. Préciser dans une fonction init() par exemple, le nom de la fonction qui va être appeler en répose à un événement de la souris ; par exemple pour un click  :
    document.onmousedown=affiche;
  2. Indiquer à Java Script d'intercepter cet événement :
    document.captureEvents(Event.MOUSEDOWN);
  3. Exécuter dans la fonctions de réponse les actions si un clic, l'argument passé à cette fonction permet d'obtenir des informations très utiles concernant par exemple les coordonnées du curseur etc.

Remarque : Pour capturer plusieurs événements :

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

Exemple  avec  Communicator 4 . Afficher les Coordonnées d'un Clic
 
<html>
<head>
<title>Afficher x et y d'un Clic</title>

<script language="javascript">

function init()
{
document.onmousedown = affiche;//la fonction affiche en réponse à un clic
document.captureEvents(Event.MOUSEDOWN);//intercepter MOUSEDOWN
}

function affiche(e)
{
window.status"x ="+e.pageX+" y="+e.pageY; //e.pageX le x d'un clic
}

function retour()
{
location.href="dhtml.htm#exemple4";
}

</script>
</head>

 <body onLoad="init()">
Un Clic et j'affiche les coordonnées de la souris dans status<br><br><br>

<form>
<input type="button" value="retour" onClick="retour()">
</form>
</body>
</html>


Exemple  avec  Communicator 4 . Bonjour suit la Souris
<html>

<head><title>le Texte suit la Souris</title>

<style type="text/css">

.perso
{
position:absolute;

font-familly:Arial;

font-size:17pt;

color:red;

}

</style>

<script language="javascript">

function init()
{
document.onmousemove = affiche;
document.captureEvents(Event.MOUSEMOVE);
}

function affiche(e)
{
document.bonjour.left=e.pageX;
document.bonjour.top=e.pageY;
}

function retour()
{
location.href="dhtml.htm#exemple5";
}

</script>
</head>

<body onLoad="init()">

<div class="perso" id="bonjour">
Bonjour
</div>

<br>
<br>
<br>

<form>
<input type="button" value="retour" onClick="retour()">
</form>

</body>
</html>

Intercepter les Evénements de la Souris avec  MSIE4 :

  1. Préciser dans une fonction init(), le nom de la fonction qui va être appeler en répose à un événement de la souris, par exemple un clic :
    document.onmousedown=affiche;
  2. Exécuter dans la fonctions de réponse les actions si un clic

Exemple  avec MSIE 4 . Afficher les Coordonnées d'un Clic
 
<html>
<head>
<title>Afficher x et y d'un Clic</title>

<script language="javascript">

function init()
{
document.onmousedown = affiche;//la fonction affiche en réponse à un clic
}

function affiche()
{
//event.x est  le x d'un clic et event.y est le y
window.status="x ="+event.x+" y="+event.y;
}

function retour()
{
location.href="dhtml.htm#exemple6";
}

</script>
</head>

 <body onLoad="init()">
Un Clic : j'affiche x et y dans status
<br>
<br>
<form>
<input type="button" value="retour" onClick="retour()">
</form>

</body>
</html>

 

Bonjour suit la Souris dans MSIE4
<html>

<head><title>le Texte suit la Souris</title>

<style type="text/css">
.perso
{
position:absolute;
font-familly:Arial;
font-size:17pt;
color:red;
}
</style>

<script language="javascript">

function init()
{
document.onmousemove = affiche;
}

function affiche()
{
document.all.bonjour.style.left=event.x;
document.all.bonjour.style.top=event.y;
}

function retour()
{
location.href="dhtml.htm#exemple7";
}

</script>
</head>

<body onLoad="init()">

<div class="perso" id="bonjour">
Bonjour
</div>

<br>
<br>
<br>

<form>
<input type="button" value="retour" onClick="retour()">
</form>

</body>
</html>