Aujourdhui-demain.net

Création d’un script de modification automatique d’objets dans un contexte fluide pour site Internet.

Problématique

Le script doit calculer dynamiquement les nouvelles coordonnées des objets (images et applets multimédias) au moment de l’affichage de la page, et à chaque modification de la taille de la fenêtre.


Aujourd’hui . demain: Page d’accueil du site Aujourd’hui . Demain

La solution (parmi d’autres)

Chaque objet est défini dans la page HTML :

<a href="page3.htm"><img src="images/info_pratique.jpg" id="info" class="mask" alt="infos-pratiques" title="Qui_Quoi ?" onMouseOver="this.src='/images/info_pratique_b.jpg'" onMouseOut="this.src='/images/info_pratique.jpg'"/></a>

les liens (balises <a>...</a>) sont optionnels.
Chaque objet est identifié par son attribut id, dans l’exemple, c’est id="info".
Les actions onMouseOver et onMouseOut définissent juste des rolover.

L’essentiel des données se fait au niveau des premières lignes :

var lrgfond = 2800;
data[0]= new Array("mick","855", "697"); 
data[1]= new Array("info","1071","287");
...
data[5]= new Array("adress","1748","808");

lrgfond correspond à la largeur de l’image de fond, en pixel.
Un tableau, avec l’identifiant, suivi des coordonnées en pixels, sur l’image de fond. Le script se charge de calculer tout le reste.

Voir en ligne : https://www.th2otime.net/Nocturne-09/aujourdhui-demain.net/sommaire.htm