Voilà comment afficher une information en fonction de la position de la souris

Ce lien montre l'exemple de LA photo, avec l'affichage de noms en fonction de la position de la souris.
En regardant dans le fichier AfficheLesNoms.js, il est facile de voir comment ajouter d'autres zones affichant une information.

Voici le fichier wanner.zip qui contient tous les fichiers utiles, sauf l'image Wanner_dscn573.jpg

Le fichier AfficheLesNoms11.html est le fichier html avec l'image. Clique sur le lien pour voir ce que cela donne.

Les fichiers AfficheLesNoms.js et overlib.js contiennent le code javascript qui affiche les informations.
overlib.js n'est pas destiné à être modifié.
AfficheLesNoms.js est destiné à être modifié, pour y mettre les noms corrects et rajouter des zones affichant des informations.
En regardant le fichier, c'est facile de comprendre ce qu'il faut modifier.
La ligne : " var xMin=8; var yMin=68; " doit probablement être modifiée pour indiquer la position haut gauche de la photo.
On peut déterminer cette position en modifiant temporairement la ligne :
// else if (x > 0 && x < 1280 && y > 0 && y < 782) { return myPopupInfo('X='+x + '; Y='+y); } // affiche la position de la souris si desire.
en enlevant le // en début de ligne.

Le fichier AfficheLesNomsCreation11.html peut être utile pour créer automatiquement des zones rectangulaires qui détermineront des informations à afficher.
Il utilise les fichiers AfficheLesNomsCreation.js et DebuggingWindow.js en plus de overlib.js.
Ces deux premier fichiers "*.js" ne sont pas utiles sinon.
Le premier click gauche mémorise la position haut gauche du rectangle, le second click affiche dans une fenêtre la ligne de code qu'il faudra recopier dans le fichier AfficheLesNoms.js. Mais on peut aussi faire tout le travail manuellement, sans chercher à comprendre comment fonctionne cette page.
Elle ne fonctionne que avec Netscape, pas avec IExplorer.


Plan du Site : index.html     wanner.html

Page mise à jour le 12 avril 2004 par   Bernard Gisin
Hébergement par : www.Infomaniak.ch