|
|
|
Créer une carte sensible à des liens hypertextes
On indiquera ici les éléments nécessaires à la création de l'exercice sur la révolution industrielle. Il est préférable d'avoir quelques notions du langage HTML. Cette présentation permettra à ceux qui ne disposent pas d'un éditeur HTML avancé de réaliser des présentation attrayantes en insérant dans leurs documents quelques lignes de code. On utilise dans cet exercice le langage JavaScript qui permet de manipuler des images. Les images ont été créées avec un logiciel de dessin vectoriel ( en l'occurrence Adobe Illustrator 8). On a exporté au format JPEG les huit images nécessaires qui sont en fait issues du même fichier vectoriel.
On utilise JavaScript dans l'en-tête du fichier HTML, de telle sorte que le script soit bien lu par le navigateur avant l'affichage du document. Cet en-tête ne contient en fait que les références des images, afin qu'elles soient ensuite mobilisables à travers des instructions qui sont disposées dans le corps du document. La déclaration d'une nouvelle image est très simple. On a ici le script d'en-tête tel qu'il se présenterait pour une seule image (le reste n'est que répétition des deux lignes d'instruction, autant de fois qu'il y a d'images) :
<script language="JavaScript1.2"><!--
toki0=new Image() toki0.src='tokimages/toki0.jpg'
// -->
</script>
On crée ici un nouvel objet image qui se nomme "toki O" et qui correspond à l'image"tokiO.jpg" du répertoire "tokimages".
Les objets sont des entités manipulables par le langage JavaScript, le langage HTML ne permettant pas de gérer des substitutions d'images, JavaScript a été créé par Netscape pour ajouter des fonctions aux navigateurs.
Il faut que l'image qui sera remplacée dispose d'un nom qui permettra d'indiquer que c'est elle que l'on souhaite remplacer :
<img border="0" height="496" width="414" src="tokimages/toki.jpg" name="tokimage">
L'attribut "name" doit donc être renseigné.
Ensuite, on appelle à l'intérieur des balises de lien l'image voulue :
<ahref="JavaScript:void(window.document.tokimage.src = toki0.src)"> le texte du lien </a>
Le contenu du lien n'est pas la référence d'un autre fichier HTML, mais une instruction JavaScript.
Cette instruction détermine le remplacement de l'image de départ par une nouvelle image du nom de toki0 qui correspond à l'image toki0.jpg située dans le répertoire tokimages.
