|
Connexion ratee
|
 |
Plutôt que de faire une ligne ou une colonne d'images, pourquoi ne pas placer vos images (ou textes) en rond ? Et pourquoi ne pas faire
tourner cette ronde ?
Ici on disposera autant d'éléments que l'on souhaite, autour d'un cercle virtuel, les éléments tourneront le long de ce cercle et quand on passera la souris sur un des éléments, on verra apparaître au centre du cercle un texte explicitant le lien.
Et bien sûr, en cliquant sur l'élément, on se rendra sur la page voulue ;-)) |
 |
|
|
|
 |
On place dans la page autant de calques qu'il y aura d'éléments et encore autant qui recevront les textes contextuels.
Sur chaque élément on place son lien et deux appels à la fonction d'affichage et de masquage des textes contextuels, onMouseOver et
onMouseOut.
Voilà pour le corps de la page.
Dans le script lui-même :
On détermine les caractéristiques du cercle 'virtuel' (position du centre, rayon) et le décallage qu'il y aura entre chaque mouvement des
éléments.
Il suffit ensuite de positionner chaque élément automatiquement sur le cercle virtuel grâce aux fonctions sinus et cosinus bien connue ;-).
En relançant systématiquement la même fonction mais en lui appliquant le décallage créé précédemment, on créé
l'illusion du mouvement !
Note : je n'ai pas créé ce script, je l'ai modifié et rendu compatible Netscape 6.x à partir de sources de www.webreview.com. |
|
|
|
|
 |
dans la partie <head>
 |
|
 |
|
<style>
/* Style qui sera applique aux calques contenant les textes contextuels */
.context { position: absolute; top: 175px; left: 90px; visibility: hidden; width: 200px; font-family: arial; font-size: 12px; color: #3399FF; text-align: center; }
</style>
<script language="JavaScript">
// Détection du navigateur
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
// Variables concernant le cercle 'virtuel'
// Valeur de décallage entre chaque position (pas grand chose ;-)
var decallage = Math.PI / 180;
// Le rayon du cercle
var r = 140;
// Placement du centre du cercle
var centre_x = 150;
var centre_y = 150;
// Noms des calques recevant les éléments à faire tourner
var calques = new Array('ballon1','ballon2','ballon3','ballon4','ballon5','ballon6', 'ballon7','ballon8');
// Variables qui accueilleront les 'index' de position des calques portant les éléments à faire tourner
var pos = new Array();
// Fonction de positionnement initial des éléments autour du cercle 'virtuel'
function init() {
pos[0] = 0;
// Pour chaque élément...
for ( i = 1; i < calques.length; i++ ) {
// Calcul d'un lot de valeurs que je ne saurais expliquer... (www.webreview.com)
pos[i] = parseFloat(pos[i - 1] + ((2 * Math.PI) / calques.length));
}
// Lancement du premier mouvement de rotation
ronde();
}
// Fonction d'animation des éléments autour du cercle 'virtuel'
function ronde() {
// Pour chaque calque portant un élément
for ( i = 0; i < pos.length; i++ ) {
// Modification de la position pour créer l'apparence de mouvement
// Pour inverser le mouvement, remplacer += par -=
pos[i] += decallage;
// Instructions pour Netscape 4.x
if (nc4) {
// Le calque est rendu visible
eval("document." + calques[i]).visibility = "visible";
// On place le calque en abcisse au cosinus de l'index de position
eval("document." + calques[i]).left = (r * Math.cos(pos[i])) + centre_x;
// On place le calque en ordonnée au sinus de l'index de position
eval("document." + calques[i]).top = (r * Math.sin(pos[i])) + centre_y;
}
// Instructions équivalentes pour Internet Explorer
if (ie4) {
eval(calques[i] + ".style").visibility = "visible";
eval(calques[i] + ".style").left = (r * Math.cos(pos[i])) + centre_x;
eval(calques[i] + ".style").top = (r * Math.sin(pos[i])) + centre_y;
}
// Instructions équivalentes pour Netscape 6.x
if (nc6) {
eval("document.getElementById('" + calques[i] + "').style").visibility = "visible";
eval("document.getElementById('" + calques[i] + "').style").left = (r * Math.cos(pos[i])) + centre_x;
eval("document.getElementById('" + calques[i] + "').style").top = (r * Math.sin(pos[i])) + centre_y;
}
}
// On relance la fonction pour que les déplacements s'enchaînent et créent l'animation
setTimeout("ronde()",75);
}
// Fonction d'affichage et de masquage des textes contextuels
function affiche(object,etat) {
// Création d'une variable pour manipuler les calques 'contextuels'
var calque = "";
// Instruction pour Netscape 4.x
if (nc4) {
calque = "document." + object;
}
// Instruction équivalente pour Netscape 6.x
if (nc6) {
calque = "document.getElementById('" + object + "').style";
}
// Instruction équivalente pour Internet Explorer
if (ie4) {
calque = object + ".style";
}
// Si le paramêtre transmis est "on" (on veut afficher le calque)
if ( etat == "on" ) {
eval(calque).visibility = "visible";
}
// Sinon...
else {
eval(calque).visibility = "hidden";
}
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
// détection du navigateur
<body OnLoad="init();">
<!-- Premier calque (il se positionnera à 3h, c'est le point zéro) -->
<div id="ballon1" style="position: absolute;">
<!-- On appelle au survol de la souris (onMouseOver) la fonction d'affichage du texte contextuel, on le masque au retrait de la souris (onMouseOut) -->
<a href="javascript:alert('Sur le clic, on part vers la page Football Americain...');" OnMouseOver="affiche('context1','on');" OnMouseOut="affiche('context1','off');"><img src="images/ronde_footus.gif" border="0"></a>
</div>
<!-- Second calque... -->
<div id="ballon2" style="position: absolute;">
<a href="javascript:alert('Sur le clic, on part vers la page Tennis...');" OnMouseOver="affiche('context2','on');" OnMouseOut="affiche('context2','off');"><img src="images/ronde_tennis.gif" border="0"></a>
</div>
...
<!-- Premier calque contenant un texte contextuel -->
<div id="context1" class="context">
Les résultats du Football Américain !
</div>
<!-- Second calque... -->
<div id="context2" class="context">
Les résultats du Tennis !
</div>
...
|
|
|
|
|
|
|
|
|
|
|
|
|
Ronde de liens
