Valeur de cette activité : 5 points
Compétence :
24- La propriété innerHTML

A-Module 04 : JAVASCRIPT : 5 points - difficulté : 2

La propriété innerHTML

Présentation

La propriété La propriété innerHTML permet de modifier le contenu d'un bloc de votre page. Voyons comment utiliser cette propriété.

Description

Thème du travail pour les élèves de l'option sciences et technologies: Les sources d'énergie

Thème du travail pour les élèves de l'option sports : L'esprit sportif

Thème du travail pour les élèves de l'option art : La danse

  1. Ajoutez une page à votre portfolio en affichant les assitants HTML ainsi que la directive 13886
  2. Inscrivez dans le champ titre : La propriété innerHTML
  3. Sélectionnez la matière : informatique
  4. Inscrivez dans le champ No de la directive : 13886
  5. Cliquez le bouton NOUVEAU afin d'insérer le code d'une page HTML de base.
  6. Inscrivez dans votre page le titre de niveau 1 : Javascript : La propriété innerHTML
  7. Insérez à la suite un tableau de largeur 800 : (width=800), de 2 rangées x 3 colonnes
  8. Dans chacune des colonnes de la rangée 1,
    Pour les élèves de l'option sciences et technologie : inscrivez le nom d'une source d'énergie (utilisez GOOGLE si vous n'en connaissez pas!)
    Pour les élèves de l'option sport : inscrivez une manifestation de l'esprit sportif (utilisez GOOGLE si vous n'en connaissez pas!)
    Pour les élèves de l'option art : inscrivez le nom d'une danse

  9. Dans la rangée 2, ne conservez qu'une seule colonne et appliquez à cette colonne le paramètre COLSPAN=3

  10. Dans cette colonne, insérez une division identifiée fido
    Exemple :
    <div id=fido></div>
  11. Trouvez 3 images illustrant votre thème (chacun des mots inscrits dans la rangée 1 de votre tableau)
  12. Placez vos images dans votre espace de téléchargement
  13. Pour chacun des mots de la rangée 1, créez un lien inactif (href="javascript:void(0)") contenant l'évènement onclick qui utilisera la code javascript getElementById('fido') et la propriété innerHTML afin de modifier le contenu de votre division fido pour afficher chacune des images choisies.
    Exemple d'un lien :
    <a href="javascript:void(0)" onclick="document.getElementById('fido').innerHTML='<img src=UrlDeVotreImage>'">Votre mot</a>
  14. Visualisez votre page et apportez des modifications au besoin.