Question d'élèves curieux:
- FAQ1: Comment changer la couleur de fond d'une cellule ?   ici un exemple
- FAQ2: Comment afficher une image au survol d'une autre image  ?
- FAQ3: Comment créer une zone réactive plus large qu'un simple lien (navigation par pavé comme les tablettes)    ?
- FAQ4: Comment faire apparaître une liste déroulante au survol d'un lien ? (voir ancien tutotiel ou bien celui-ci)


! ATTENTION, ces opérations risquent de 'casser' ta page html si tu ne respectes pas parfaitement la procédure !
     
  Principe commun à ces FAQ:
  Notions requises: Savoir insérer un tableau, savoir faire une modification simple dans le source KpZ et la sauvegarder,
                               connaître la notion de code couleur, avoir déjà mis en oeuvre un hyperlien + sa cible avec Insertion/Lien.

  0) Après avoir lancé KompoZer et créé son tableau !!!! bien sûr !!!, ..
  1) Passer en mode 'Source' dans KompoZer en cliquant sur l'onglet 'Source' situé en bas de la fenêtre Kompozer.
  2) Recopier la fin de la présente page (depuis le navigateur avec Ctrl 'C' par ex),
      La zone à recopier est à partir de <script language="Javascript">, jusqu'à </script>
  3) Toujours dans l'onglet 'Source', coller cette copie dans le début du source de  KompoZer 
     JUSTE AVANT LA FERMETURE DE LA BALISE head  (càd avant </head>)
  4) Faire Ctrl/S avant de sortir et repasser en mode 'Conception'.

 Résultat --> Tu ne vois rien de plus, mais tu as bien inclus des fonctions dans ta page html. Ces fonctions et leurs comportements dynamiques sont maintenant utilisables.

Réponse à FAQ1: Exemple de procédure à suivre pour changer la couleur d'une cellule en la survolant:

.... Voir ici l'effet du survol ....
Cellule: état initial = Bleu

alternat sur Rouge <-> Vert
Cellule: état initial = Bleu
Survol = Bleu foncé,
retour bleu clair initial

Détails de la procédure sous forme 'action-->résultat':
  0) Préambule: Avec PhotoFiltre7 par ex ou avec l'outil 'choisir la couleur de texte de Kompozer
   --> Note bien les codes couleurs que tu veux obtenir avec l'effet voulu,
   --> rappel: Code couleur = combinaison de (Rouge, Vert, Bleu).
   Tu devras avoir créé au préalable un tableau: nous utiliserons ses cellules pour produire l'effet souhaité.
  1) Dans KompoZer, en mode 'Conception', se placer sur la cellule qui va avoir l'effet voulu
  2) clic droit/propriété de la cellule/édition --> une fenêtre apparaît.
  3) clic sur  l'onglet 'Evénements Javascript'
  4) En bas de la fenêtre,  dans la liste déroulante nommée 'Attributs', choisir l'action qui déclenchera le changement de couleur
      choisir par exemple: onmouseover
     --> onmouseover est en bleu
  5) En face de la zone onmouseover maintenant en bleu, il y a une zone de saisie 'Valeur:'
  6) Taper l'instruction suivante  dans 'Valeur:':
     changerCouleurFond(this,    ... suivi du code couleur lieé au changement,
    !! ne pas oublier de refermer la parenthèse.

Contrôle: Dans la zone de saisie 'Valeur:' tu dois avoir quelque chose comme:
 changerCouleurFond(this, 255,5,5)
  qui correspondra à un rouge très vif lors du survol de la souris. KpZ ne permet pas de voir l'effet, il faudra le tester avec un navigateur.

Variante: Si tu veux retrouver une autre couleur ou bien la couleur d'origine en 'quittant' la zone survolée, il suffit de recommencer la procédure en rajoutant un nouvel Attribut onmouseout. Bien sûr il te faudra modifier la colorisation du fond de cellule en mettant le nouveau code couleur souhaité.

6) Terminer par OK/OK

nota: ici quelques événements pouvant déclencher des changements de couleur:

   onmouseover  (le survol)
   onmouseout (quand ta souris quitte la cellule)
   onmousdown (quand tu cliques dans  la cellule)


Fonctions disponibles:
    1) changerCouleurFond(this,204,0,255): changer la couleur de fond d'une cellule
    2) changerImageFond(this,"leNomImage.jpg"): Afficher une image au survol d'une autre image (pratique pour animer des liens en affichant une image réduite au survol par exemple)   
    3) ziVa("http://siteMachin.fr"): Cliquer sur une grande zone (celulle tableau) sans afficher d'hyperlien (pratique pour simuler une navigation 'Tablette' par exemple) et recharger une page ou un site ' distant(e)'.  
                    
nota: la notion de tableau, bien que 'dépréciée' est très utile pour une mise en oeuvre simple 'niveau Collège' et facilite la 'photocomposition' des pages  html.

                <!--  copiez ceci   en début de votre page html, juste avant le </head> -->
<script language="Javascript">
function changerCouleurFond(identification,dosageR,dosageV,dosageB)
 {
    identification.style.backgroundColor="rgb("+dosageR+","+dosageV+","+dosageB+")";
}

function changerImageFond(identification,imageDansDossier)
 {
    identification.style.backgroundImage="url("+imageDansDossier+")";
}

function ziVa(urlCible)
 {
    window.location.href =urlCible;
}
</script>

                <!--  fin  -->
  
.... Voir ici l'effet du survol .... Bon travail ....

Cellule: état initial = Bleu
bloque sur Rge <-> Vert
Survol = Bleu foncé,
retour bleu clair initial
                  Version 2.0  maj: 25/11/2015 Accueil  Mr HOLSTEIN /  13100 Aix

TRAVAUX ELEVES Aide

avec