Discussion :

[evevev]

Bonjour !
Evidemment le bon terme n'est pas "ancre flottante" puisque je n'ai rien trouvé à ce sujet, mais je ne sais pas comment mieux définir ce que je cherche à faire.

Je suis en train de faire un texte qui sera assez long et qui va nécessiter de multiples notes explicatives. Jusqu'ici, je les mettais en bas de page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#1" title="lire la note" class="none"><span class="sup"> <font color="#FF0000"><strong>1</strong></font></span></a> <a name="1o" id="1o"></a>

et en bas de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<font color="#FF0000"><strong>&nbsp;1.</strong></font> <a name="1" id="1"></a>XXX<a title="revenir au texte" href="#1o" class="none"><font color="#FF0000">&nbsp;&uarr;&nbsp;</font>

Mais pour ce que je prépare, je ne peux pas utiliser le même principe car les notes vont être très nombreuses ; mais surtout elles vont être de nature très différentes : certaines seront importantes pour certains lecteurs, et d'autres complètement inutiles, et je ne peux pas demander à tout le monde de cliquer sur toutes ces notes. Mais d'un autre côté, je sais qu'il ne faut pas qu'ils en ratent certaines pour la compréhension ou l'intérêt du texte.
Bref.
J'ai pensé à mettre ces notes verticalement, sur la partie gauche du texte, dans "la marge" en quelque sorte... ce qui permettra, d'un seul coup d'oeil, à chaque lecteur, de juger de l'intérêt de la note pour sa lecture, sans avoir à cliquer à tout bout de champ. Il faudrait donc que ces notes restent à la même hauteur que le mot qu'elles explicitent, et cela quel que soit l'écran ou/ et le navigateur que l'on utilise.
Y a-t-il un moyen de faire cela ?
Merci d'avance !

[Vil'Coyote]

regarde du côté de jquery tooltip pour utiliser une 'info bulle' dynamique je pense que cela sera plus lisible que de les avoir dans la marge

[evevev]

Bonjour,
Et merci de ta réponse.
J'avais pensé aux infos-bulles, mais par rapport à ce que je veux faire, je veux vraiment que l'on voit du coin de l'oeil les notes en même temps que l'on lit.
A ta connaissance il n'y a pas un moyen de faire cela ?

[NoSmoking]

Bonjour,

mais surtout elles vont être de nature très différentes : certaines seront importantes pour certains lecteurs, et d'autres complètement inutiles, et je ne peux pas demander à tout le monde de cliquer sur toutes ces notes.

tout ton problème est justement là, comment veux tu faire la distinction entre tes différents lecteurs ?

Une solution est de passer par des info-bulles, le CSS est souvent très suffisant, qui apparaissent au survol du mot à expliquer.

Une autre solution et de faire une manchette visible/masqué que le visiteur active/désactive suivant son besoin.

[evevev]

C'est compliqué à expliquer, mais je sais que ce que je veux faire est indispensable.

Il s'agit d'un texte relatant un épisode important de notre histoire locale avec une somme d'événements que je tente de mettre en forme sur la base de très nombreux témoignages. Je cherche à faire un texte lisible par tous, de l'universitaire au collégien en passant par le titulaire du seul certif', mais avec une grande rigueur historique, d'où les nombreuses notes qui citeront les sources, donneront une date, une référence bibliographique, etc.
Quand il m'arrive de lire un livre dont les notes sont en fin de volume (ce qui est l'équivalent des notes en bas d'une page web, puisqu'il faut "y aller"), je sais qu'il est très vite agaçant de constater que, alors qu'on attendait seulement la traduction d'un terme on découvre un épisode de la vie de l'auteur, ou inversement. Et donc, on finit par ne plus aller voir les notes à la fin du livre parce qu'on ne veut pas sortir du texte à tout bout de champ.
A l'inverse, quand, dans un bouquin, les notes sont en bas de la page, les yeux se déplacent seulement de quelques centimètres pour voir si la note correspond à ce qu'on attend, puis ils retournent immédiatement au texte. L'équivalent de ce confort de lecture, pour un texte sur une page web, pour moi ce sont les notes "dans la marge", à la hauteur de l'astérisque ou du n° de renvoi. On ne sort pas de sa lecture, pour cliquer ou survoler.

On voit quelquefois des pubs qui restent à la même hauteur sur l'écran quand on se sert de l'ascenseur, alors je me dis qu'il doit bien y avoir un moyen de faire la même chose pour un mot (ou un paragraphe) par rapport à un autre dans une même page web...
Pour l'instant, l'ensemble est dans un tableau de deux colonnes et je fais des <br /> pour mettre les notes à la bonne hauteur. Mais c'est un pis aller. Cela me contraint à fixer la largeur du tableau, je voudrais quelque chose de plus souple.
J'espère que j'ai bien expliqué !
Merci d'avance si vous avez des suggestions...

[NoSmoking]

A l'inverse, quand, dans un bouquin,...

Des techno de lecture différentes entrainent souvent deux attitudes/habitudes d'utilisation différentes.

On ne sort pas de sa lecture, pour cliquer ou survoler.

le survol d'un élément avec la souris n'est pas un handicap au suivi de la lecture et seul celui qui en a besoin le fera.

On voit quelquefois des pubs qui restent à la même hauteur sur l'écran quand on se sert de l'ascenseur, alors je me dis qu'il doit bien y avoir un moyen de faire la même chose pour un mot (ou un paragraphe) par rapport à un autre dans une même page web.

C'est tout à fait faisable

Principe dans les grandes lignes, au scroll de la page
- récupération de la position dans la page de l'élément à annoter
- récupération du scroll de la page
- calcul de la position dans la fenêtre de l'élément à annoter ( pos_Element - pos_ScrollPage)
- placement de la note à la même position verticale

[evevev]

Merci beaucoup !