18043 sujets

Questions générales et questions de débutants

Marquage de la position du visiteur dans une longue page : utile ?

Bonjour,
qui n'aura pas connu de l'agacement de ne pas savoir où l'on se trouve lors de la lecture d'une longue pageWeb : au milieu, vers la fin, vers le début ? Quel n'a pas été le désarroi de ne plus retrouver parmi des données fort riches et passionnantes l'endroit d'un point de détail important ?

J'ai donc fait truc marrant et utile qui s'appuie sur la visualisation automatique de l'endroit où se trouve le visiteur. Cette visualisation apparaît dans une frange du menu fixe de la page ; l'image ci-après propose une capture partielle de ma page à son ouverture :
upload/26607-menu1.jpg

Maintenant, positionnez le curseur dans le corps de la page, puis comme l'indique l'image suivante faites défiler la page : observez que la frange du menu fixe indique l'emplacement précis où vous vous trouvez à la suite ... :
upload/26607-clavier-fl.jpg

La dernière image présente l'état final du défilement : tout les chapitres ayant été visités sont renseignés en carré gris, et parce que vous vous trouvez tout en bas de la page, un carré jaune vous le renseigne. A tout moment, vous pouvez évidemment accéder au menu pour vous orienter différemment :
upload/26607-menu2.jpg

Ces astuces s'exercent par quelques lignes de javascript où au onmouseover l'on va basculer d'une class à une autre puis encore à une autre. Du .css qui va configurer ces trois class

<script type="text/javascript">
function Alterne(id)
{
this.id=id;
if (typeof this.passe1=='undefined' || this.passe1=='')
{
document.getElementById(this.id).className = 'encours';
this.passe1=this.id;
}
else
{
if (this.id!=this.passe1)
{
document.getElementById(this.id).className = 'encours';
document.getElementById(this.passe1).className = 'aetevisite';
this.passe1 = this.id;
}
}
}
</script>
<style type="text/css">
.natif{display:block; position:relative; font-size:1em; text-decoration:none; color:#c6b8c6; outline:none; padding-left:0}
.natif:hover{color:#fff; cursor:pointer; padding-left:0}   /*==>"natif"<== */

.encours{display:block; position:relative; font-size:1em; text-decoration:none; color:#c6b8c6; outline:none; background-repeat:no-repeat; margin-left:-21px; padding-left:21px; background-image:url(../img/bullv1.png)}
.encours:hover{color:#fff; cursor:pointer}   /*==>"en cours"<== */

.aetevisite{display:block; position:relative; font-size:1em; text-decoration:none; color:#c6b8c6; outline:none; background-repeat:no-repeat; margin-left:-21px; padding-left:21px; background-image:url(../img/bullv2.png)}   /*==>"a ete visite"<== */
.aetevisite:hover{color:#fff; cursor:pointer}
</style>

<html>
<div id="a0" onmouseover="Alterne('a0');">_ _ _</div>
<span id="a1" onmouseover="Alterne('a1');">_ _ _</span>
<span id="a2" onmouseover="Alterne('a2');">_ _ _</span>
etc.
</html>

Le tout est visible ici : http://sentrais.fr/florence_map/florence-map.htm
Modifié par zebulin (29 Apr 2012 - 18:48)
Bonjour, ne serait-il pas plus intéressant de se fier à la position de la scrollBar ?

Personnellement, je ne laisse jamais la souris au milieu de ma fenêtre, ça m'empêche de lire...
Ensuite, ça m'a un peu surpris de voir qu'il se remplissait au fur et à mesure le menu, j'avais l'impression d'avoir un problème de synchronisation sous Java avec les trucs qui se rafraichissent bien que quand on passe la souris dessus Oo
Je pense qu'au lieu de laisser un vide dans le menu, une case d'une troisième couleur serait peut-être la bienvenue.
Ensuite, je ne suis pas un grand fan du menu caché... On voit pas bien que c'est un menu. Par contre on voit son contenu entre deux divs, ça c'est un peu dommage aussi... Peut-être aurait-il mieux valu le cacher derrière le bord de la fenêtre et le faire se dérouler progressivement (ou pas progressivement, enfin, le faire se dérouler) plutôt que surgir comme ça au dessus du texte. Sinon, ne pas le cacher du tout aurait pu être une bonne idée aussi je pense...

Donc voilà, j'avais pas grand chose à dire, mais je l'ai dit =/

Edit : Ah, et pour répondre à la question du titre du sujet, oui, c'est important de savoir où on en est dans la lecture d'une page web, c'est pour ça qu'il y a les scrollbars d'ailleurs (en dehors de permettre la navigation, elles sont aussi une indication de la progression de notre lecture...)
Elle donne d'ailleurs sûrement une meilleure idée de la quantité de contenu restante qu'un menu tel que le tien car elle se base sur le contenu affiché de la page alors que la taille d'une sous-partie peut varier.
Modifié par Gothor (29 Apr 2012 - 22:10)
Salut Gothor,
euh ! en fait de savoir où l'on se trouve dans une page, il fallait bien sûr entendre : quel est le chapitre qui apparaît à l'écran. Car l'on n'a pas encore été capable de faire parler la scrollbar ... non ? Smiley lol
Modifié par zebulin (17 May 2012 - 19:43)
Ca doit être faisable avec la scrollbar =)
On regarde la position actuelle de la barre, la position du block, la hauteur de la fenêtre et le tour est joué =°
Sujet clos
Aller à