//
// Pour inclure ce script dans une page HTML:
//
// 1. Inclure ce fichier dans le même répertoire que la page HTML.
//
// 2. Dans le fichier HTML, il faut inclure les éléments suivants pour utiliser le srcipt.
//
//
// ....
// ....
//
//
// ....
// ....
// 
//
// Voir l'exemple: Panoramajs.html
//
// 3. Paramètres du tag ![]()
:
// src=" " : nom de l'image à afficher durant le chargement
// name=" " alt=" " : nom et "aide" de l'image
// WIDTH="" HEIGHT="" : dimensions de l'image
// onload="PanoramaObj(image, prefixe, suffixe, nombre, initial,rotation, souris, centrex, centrey)":
// image obligatoire nom de l'image (ie la valeur du champ name du tag ![]()
)
// prefixe obligatoire préfixe du nom des images
// suffixe obligatoire suffixe du nom des images
// nombre obligatoire nombre d'images utilisées
// >0 : images ordonnées dans le sens des aiguilles d'une montre
// <0 : images ordonnées dans le sens inverse des aiguilles d'une montre
// initial optionnel numéro de la première image. Par défaut 0
// rotation optionnel Vitesse (en ms) de la rotation automatique. Par défaut 0
// 0 : pas de rotation automatique
// >0 : rotation dans le sens des aiguilles d'une montre
// <0 : rotation dans le sens inverse des aiguilles d'une montre
// souris optionnel Contrôle de la rotation par la souris. Par défaut 0
// 0 : mouvement en cercle autour de l'objet (relatif)
// 1 : mouvement en cercle autour de l'objet (absolu)
// 2 : mouvement horizontal (relatif)
// 3 : mouvement horizontal (absolu)
// 4 : mouvement vertical (relatif)
// 5 : mouvement vertical (absolu)
// -1 : pas de contôle souris
// centrex optionnels Coordonées du centre de rotation en % de la dimension de l'image.
// centrey Par défaut 0.5
//
//======================================================================
// Fonction publique.
//======================================================================
//----------------------------------------------------------------------
// Creation d'un nouveau panorama, nouveau élément du tableau PanoramObj
//----------------------------------------------------------------------
function PanoramaObj(image, prefixe, suffixe, nombre, initial, rotation, souris, centrex, centrey)
{
if (!document.PanoramaObjTab[image.name])
{
if (!initial) initial = 0;
if (!rotation) rotation = 0;
if (!souris) souris = 0;
if (!centrex) centrex = 0.5;
if (!centrey) centrey = 0.5;
new PanoramaObjTab(image, prefixe, suffixe, nombre, initial,rotation, souris, centrex, centrey);
PanoramaObjShow();
}
}
//======================================================================
// Fonctions privées.
//======================================================================
var NavNet = false;
var NavNet6 = false;
var NavIE = false;
document.PanoramaObjTab = new Array();
// ----------------------------------------------------------------------
// Détermination du navigateur.
// ----------------------------------------------------------------------
if ((navigator.appName.indexOf("Netscape") != -1) && (parseInt(navigator.appVersion) >= 4))
{
NavNet = true;
NavNet6 = parseInt(navigator.appVersion) >= 5;
}
else if ((navigator.appName.indexOf("Microsoft") != -1) && (parseInt(navigator.appVersion) >= 4))
{
NavIE = true;
}
//----------------------------------------------------------------------
// Constructeur d'un élément de PanoramaObjTab. Champs:
// image: image à afficher
// oimages: tableau des images
// courant: numéro de l'image à afficher
// xstart, ystart, astart: coordonnées pour le début d'un mouvement
// moving, loading, running: booléens: souris bouge, images chargent, panorama tourne
//----------------------------------------------------------------------
function PanoramaObjTab(image, prefixe, suffixe, nombre, initial,rotation, souris, centrex, centrey)
{
var i;
if ((nombre != 0) && (NavNet || NavIE))
{
document.PanoramaObjTab[image.name] = this;
this.image = image;
this.oimages = new Array();
if (nombre > 0)
{
this.nombre = nombre;
for (i = 0; i < this.nombre; i++)
{
this.oimages[i] = new Image();
this.oimages[i].src = prefixe + i + suffixe;
this.oimages[i].onload = PanoramaObjShow;
}
}
else
{
this.nombre = -nombre;
for (i = 0; i < this.nombre; i++)
{
this.oimages[i] = new Image();
this.oimages[i].src = prefixe + (this.nombre - 1 - i) + suffixe;
this.oimages[i].onload = PanoramaObjShow;
}
}
this.courant = initial;
this.initial = initial;
this.xstart = 0;
this.ystart = 0;
this.astart = 0;
this.moving = false;
this.loading = true;
this.rotation = rotation;
this.souris = souris;
this.running = false;
if ((this.souris & 6) == 0)
{
this.centrex = centrex;
this.centrey = centrey;
}
else
{
this.centrex = 0;
this.centrey = 0;
}
PanoramaObjInitXYWH(this);
}
}
//----------------------------------------------------------------------
// Initialise x, y: coordonnées du centre de rotation
// w, h: taille de l'image
//----------------------------------------------------------------------
function PanoramaObjInitXYWH(t)
{
if (NavIE)
{
t.x = t.centrex * t.image.offsetWidth;
t.y = t.centrey * t.image.offsetHeight;
t.w = t.image.offsetWidth;
t.h = t.image.offsetHeight;
}
else if (NavNet6)
{
t.x = t.image.offsetLeft + t.centrex * t.image.offsetWidth;
t.y = t.image.offsetTop + t.centrey * t.image.offsetHeight;
t.w = t.image.offsetWidth;
t.h = t.image.offsetHeight;
}
else if (NavNet)
{
t.x = t.image.x + t.centrex * t.image.width;
t.y = t.image.y + t.centrey * t.image.height;
t.w = t.image.width;
t.h = t.image.height;
}
}
//----------------------------------------------------------------------
// Affiche l'image courante pour chaque panorama (mais attend que toutes les images soient chargées.)
// La fonction setInterval permet de lancer une fonction à intervalle de temps régulier
//----------------------------------------------------------------------
function PanoramaObjShow()
{
var name;
var t;
for (name in document.PanoramaObjTab)
{
t = document.PanoramaObjTab[name];
if (t.loading)
{
t.loading = false;
var i;
for (i = 0; i < t.nombre; i++)
{
if (!t.oimages) {t.loading = true;break;}
else if (!t.oimages[i]) {t.loading = true;break;}
else if (!t.oimages[i].complete) {t.loading = true;break;}
}
}
if (!t.loading)
{
t.image.src = t.oimages[t.courant].src;
if ((t.rotation != 0) && !t.running)
{
t.running = true;
if (t.rotation > 0) {t.intervalcode = setInterval("PanoramaObjAuto('" + name + "', 1)", t.rotation);}
else {t.intervalcode = setInterval("PanoramaObjAuto('" + name + "', -1)", -t.rotation);}
t.rotation = 0;
}
}
else {setTimeout("PanoramaObjShow()", 1000);}
}
}
//----------------------------------------------------------------------
// Met à jour le numéro d'image courant en rotation automatique
//----------------------------------------------------------------------
function PanoramaObjAuto(name, step)
{
var t;
t = document.PanoramaObjTab[name];
t.courant += step;
while (t.courant < 0) t.courant += t.nombre;
while (t.courant >= t.nombre) t.courant -= t.nombre;
PanoramaObjShow();
}
//----------------------------------------------------------------------
// Enregistre la position de départ d'un mouvement de souris (xstart,ystart,astart)
//----------------------------------------------------------------------
function PanoramaObjDebMvt(e)
{
var t;
if (NavIE || NavNet)
{
if (NavIE) {t = document.PanoramaObjTab[window.event.srcElement.name];}
else {t = document.PanoramaObjTab[e.target.name];}
}
if (t && (t.souris >= 0))
{
if (NavIE) {t.xstart = window.event.offsetX;
t.ystart = window.event.offsetY;}
else {t.xstart = e.pageX;
t.ystart = e.pageY;}
if ((t.souris & 6) == 2) { t.astart = (Math.PI * 2) * (t.xstart - t.x) / t.w;} // horizontal.
else if ((t.souris & 6) == 4) { t.astart = (Math.PI * 2) * (t.ystart - t.y) / t.h;} // vertical.
else { t.astart = Math.atan2((t.xstart - t.x) / t.w,(t.ystart - t.y) / t.h);} // cercles.
t.moving = !isNaN(t.astart);
t.initial = t.courant;
if (t.moving && t.running)
{
clearInterval(t.intervalcode);
t.running = false;
}
}
}
//----------------------------------------------------------------------
// La souris n'est plus sur l'image.
//----------------------------------------------------------------------
function PanoramaObjFinMvt(e)
{
var t;
if (NavIE || NavNet)
{
if (NavIE) {t = window.event.srcElement;}
else {t = e.target;}
t = document.PanoramaObjTab[t.name];
}
if (t && (t.souris >= 0))
{
if (t.running)
{
clearInterval(t.intervalcode);
t.running = false;
}
t.moving = false;
}
}
//----------------------------------------------------------------------
// Traite le mouvement de la souris sur l'image:
// Trouve l'image à afficher à partir de la position courante de la souris,
// la position de départ et le type de contrôle souris.
//----------------------------------------------------------------------
function PanoramaObjMvt(e)
{
var t;
if (NavIE || NavNet)
{
if (NavIE) {t = window.event.srcElement;}
else {t = e.target;}
t = document.PanoramaObjTab[t.name];
}
if (t && (t.souris >= 0))
{
if (t.running)
{
clearInterval(t.intervalcode);
t.running = false;
}
if (!t.moving) PanoramaObjDebMvt(e);
if (t.moving)
{
if (NavIE)
{
t.xcourant = window.event.offsetX;
t.ycourant = window.event.offsetY;
}
else
{
t.xcourant = e.pageX;
t.ycourant = e.pageY;
}
if ((t.souris & 6) == 2) {t.acourant = (Math.PI * 2) * (t.xcourant - t.x) / t.w;} //horizontal
else if ((t.souris & 6) == 4) {t.acourant = (Math.PI * 2) * (t.ycourant - t.y) / t.h;} //vertical
else {t.acourant = Math.atan2((t.xcourant - t.x) / t.w,(t.ycourant - t.y) / t.h);} //cercle
if (!isNaN(t.astart) && !isNaN(t.acourant))
{
var i;
if (t.souris & 1) {i = Math.floor(t.nombre - 1 - t.nombre * t.acourant / (Math.PI * 2));} //absolu
else {i = t.initial - Math.round(t.nombre * (t.acourant - t.astart) / (Math.PI * 2));} //relatif
while (i < 0) i += t.nombre;
while (i >= t.nombre) i -= t.nombre;
if (i != t.courant)
{
t.courant = i;
PanoramaObjShow();
}
}
}
}
}
//----------------------------------------------------------------------
// Initialise la gestion d'événement.
//----------------------------------------------------------------------
function PanoramaObjInit()
{
document.onmouseover = PanoramaObjDebMvt;
document.onmouseout = PanoramaObjFinMvt;
document.onmousemove = PanoramaObjMvt;
if (NavNet) { document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEMOVE);}
}