Cacher-afficher par effleurement

Bernard de Go Mars · Message par **Bernard de Go Mars** » 08 sept. 2009, 23:38

J'ai amélioré la présentation de tout ça et ça paraît vraiment intéressant.

Le mieux, et c'est inespéré !, c'est que l'info-bulle apparaît même dans Kompozer (onglet "Aperçu" et onglet "Normal") !!!...

Dans l'onglet "Normal", le dièse apparait au bout de 2 secondes d'effleurement, mais pas dans l'onglet "Aperçu".

Il reste à régler le problème de la position de l'info-bulle : elle est ancrée sur le papier de la page, à une certaine hauteur...

En vous remerciant encore,

Bernard de Go Mars !

bubudesbois · Message par **bubudesbois** » 09 sept. 2009, 07:17

aloha !

Ca marche ! Ca marche !!!

D'abord, une petite correction dans ton code, le balisage <style></style> doit être entre les balise <head></head>, cela pour la conformité de la page.

En suite, tu peux supprimer les balise <div></div> ainsi que les info liées au "div" dans le style, cela marche quand même;
Le code corrigé :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Cacher-afficher du texte par Bubudubois4</title>

	<style type="text/css">
		a:hover
		{
		background: none;
		}
		a span
		{
		display: none;
		}
		a:hover span
		{
		text-decoration: none;
		Display: block;
		position: absolute;
		top: 85px;
		left: 200px;
		width: 400px;
		padding: 5px;
		border: 1px dashed #A52A2A;
		color: #000000;
		background-color: #CCCCCC;
		font: 1em Verdana, sans-serif
		}
	</style>

</head>

<body style="direction: ltr;">
Bla Bla Bla <a href="#">Texte à effleurer<span>Bien joué !</span></a> Bla Bla Bla
</body>
</html>

Voili Voilu

@ plus

BBDB

calimo · Message par **calimo** » 09 sept. 2009, 08:54

Bernard de Go Mars a écrit :Calimo : Je comprends ce problème et nous nous grandirons en le prenant en compte. Mais que proposes-tu comme solution pour des info-bulles ?
L'effleurement par le marqueur commandé par les flèches directionnelles ne peut-il donc pas déclencher des choses ?

L'accessibilité n'est pas une notion absolue, et donner une réponse sur un simple test artificiel n'est pas aisé.

Quelle est la nature de l'information transmise par ce biais ? Est-ce purement cosmétique ? Si c'est une image, comme je l'ai dit, un lien (<a href="lien vers limage" onmouseover="afficher l'image">...</a>) peut être utile. Est-ce du texte ? Qu'apporte-t-il ?

Bernard de Go Mars · Message par **Bernard de Go Mars** » 09 sept. 2009, 10:54

Merci Bubu.

Voici un exemple de ce que l'on peut faire avec cette méthode. Le code à été commenté pour les nullissimes.

Accessoirement, comment imposer un saut de ligne au visualisateur de code source (cela faciliterait grandement la lecture pour lesdits nullissimes).

Il reste les petits problèmes que j'évoque en rouge en bas de page (car il y a toujours un problème après le problème).

Au plaisir de lire tes solutions.

----------------------------------------------------------------------------------------------
Calimo :

Par définition, cette catégorie d'infos, sans être essentielle, n'est pas de nature cosmétique (encore les handicapés ont-ils le droit à l'usage des cosmétiques !).

Il faut que les association d'handicapés travaillent de leur côté à compenser au mieux les différents handicaps (quand c'est possible). N'existe-t-il pas de pointeur à piloter par les handicapés sur une page html ?

Amicalement,

Bernard de Go Mars !

Bernard de Go Mars · Message par **Bernard de Go Mars** » 09 sept. 2009, 11:02

Se pose encore une question essentielle : peut-on insérer autant qu'on veut de textes à cacher-afficher ?

Sinon, l'intérêt du système reste limité...

Bernard

~HP · Message par **~HP** » 09 sept. 2009, 15:19

calimo a écrit :
Bernard de Go Mars a écrit :Calimo : Je comprends ce problème et nous nous grandirons en le prenant en compte. Mais que proposes-tu comme solution pour des info-bulles ?
L'effleurement par le marqueur commandé par les flèches directionnelles ne peut-il donc pas déclencher des choses ?
L'accessibilité n'est pas une notion absolue, et donner une réponse sur un simple test artificiel n'est pas aisé.

Chez moi, la navigation au clavier ne donne rien sur ce "faux" lien…
donc, je partirais du principe que ce n'est pas accessible.
Après, en utilisant le :active en CSS, ça doit pouvoir se régler.

Enfin, m'est avis que des notes de pied de page,
seraient, sûrement, bien plus adaptées ; comme, par exemple, sur Wikipédia :
http://fr.wikipedia.org/wiki/Fran%C3%A7 ... 3.A9rences (au hasard)
Ou, sur les blogs "type Dotclear" :
http://blogosx.homeunix.org/15.08.09/bi ... tml#note-1 (par exemple)
blogs partageant une syntaxe wiki similaire à celle de l'Encyclopédie…

Après, c'est sûr, que ça n'a pas grand chose à voir avec un "spectaculaire tooltip"… mais au moins l'information est aisément lisible

, reste à savoir ce que l'on veut privilégier… et faire, comme souvent en informatique, des compromis.

Bernard de Go Mars · Message par **Bernard de Go Mars** » 09 sept. 2009, 16:08

"Cher Calimo,

tu écris : "Chez moi, la navigation au clavier ne donne rien sur ce "faux" lien…
donc, je partirais du principe que ce n'est pas accessible."

: Merci d'avoir essayé. Si ça ne marche pas, c'est un problème d'informatique. L'informatique c'est la logique : donc si le pointeur est sur le "faux lien", ça doit pouvoir déclencher quelque chose (autre qu'un réchauffement du climat).

Bien sûr, être sur le faux lien ne signifie pas exactement "effleurer", par exemple si un aveugle lit (par l'intermédiaire d'une machine à picots) en déplaçant un pointeur sur le texte. Si le pointeur passe sur une zone à effleurer, il faut le signaler au "picoteur" (le lecteur, le brailliste, je ne sais comment vous dites)(puisqu'on n'osera pas dire "brailleur") par un signal spécial. Alors, en appuyant sur CTRL, par exemple, il affichera l'info-bulle sous ses doigts...

"Après, en utilisant le :active en CSS, ça doit pouvoir se régler."

: Je l'ignore...

Tu évoques les notes de bas de page comme dans Word, pourquoi pas ?
Mais dans Word, elles s'ouvrent également dans des info-bulles.

Pourquoi ce logiciel s'est-il doté de ce mode de lecture (les info-bulles) ?
Parce que, pour une personne normale (peut-être devrais-je dire non-handicapée), il est moins fatiguant de faire jaillir ces info-bulles par effleurement que de faire effectuer au texte un panoramique vertical vers le bas de page, fut-il spectaculaire (comme dans Wiki) ou encore de l'effectuer manu-militari à la molette (ce que l'on fait lorsque le système des infobulles est désactivé)...

Le système des info-bulles n'est donc pas critiquable en lui-même, mais le mode de déclenchement de ces info-bulles doit être rendu accessible aux handicapés (par un logiciel additif sur leur navigateur, je présume)...

Amicalement,
Bernard

~HP · Message par **~HP** » 09 sept. 2009, 16:32

Bernard de Go Mars a écrit :"Cher Calimo,
[…]
Tu évoques les notes de bas de page comme dans Word, pourquoi pas ?
Mais dans Word, elles s'ouvrent également dans des info-bulles.

Je suis ~HP et non Calimo… mais c'est pas très grave.

De plus, je n'ai pas la (mal)chance d'utiliser Word™… alors, j'ignore comment il se comporte.
Pour le reste, tu as ton avis, j'ai le mien, je n'ai aucune envie d'épiloguer

.

Bernard de Go Mars · Message par **Bernard de Go Mars** » 09 sept. 2009, 17:21

Excuse-moi, ~HP, de t'avoir donné un faux nom. Il n'y avait pas malice.

~HP a écrit :je n'ai aucune envie d'épiloguer .

Ben, moi ça ne me gêne pas. C'est sûr qu'il reste beaucoup de boulot pour ce qui est de l'accessibilité des handicapés à des choses diverses...

Amicalement,

Bernard

calimo · Message par **calimo** » 10 sept. 2009, 10:07

Bernard de Go Mars a écrit :Calimo :

Par définition, cette catégorie d'infos, sans être essentielle, n'est pas de nature cosmétique (encore les handicapés ont-ils le droit à l'usage des cosmétiques !).

Il faut que les association d'handicapés travaillent de leur côté à compenser au mieux les différents handicaps (quand c'est possible). N'existe-t-il pas de pointeur à piloter par les handicapés sur une page html ?

Amicalement,

Bernard de Go Mars !

Cela dépend du handicap. Si c'est un handicap moteur, effectivement il y a ce genre de choses. Pour un handicap visuel, en revanche, l'usage de la souris et son pointeur à l'écran (élément visuel par nature) est tout simplement impossible.

Dans l'exemple que tu donnes, c'est typiquement un élément à mettre en note de bas de page. Pour moi, tu dois mettre ce texte dans une ancre en bas de page, ancre qui serait appelée par le lien "réécriture" (qui serait alors un "vrai" lien). Ensuite, rien ne t'empêche de dupliquer l'information avec du javascript. Le mettre en <span> n'est pas la panacée ici : désactive les CSS (menu Affichage > Style de la page) pour voir que le texte perd toute cohérence (il faudrait au minimum le mettre entre parenthèse).

En résumé, il faudrait :
- transformer ce texte en note de bas de page ;
- dupliquer l'information avec un onmouseover javascript.

Tout ça n'est pas forcément aisé à mettre en place

Bernard de Go Mars · Message par **Bernard de Go Mars** » 10 sept. 2009, 11:44

Cher Calimo,
tu écris :
- transformer ce texte en note de bas de page ;
- dupliquer l'information avec un onmouseover javascript.

Ça devient compliqué (le double de travail ?). Mais on peut s'en faire un devoir...

Si une note de bas de page est accessible par effleurement, on peut très bien changer son fusil d'épaule et remplacer les info-bulles par des notes de bas de page... Mais ces notes de bas de page sont-elles accessibles par effleurement ou par clic ? (un clic à la place d'un effleurement ne me gênerait pas, d'ailleurs)...

En tous cas, de mon côté, j'ai prouvé (je me suis prouvé ?) un certain nombre de choses, que je relate dans cette nouvelle page.

La solution (du moins pour les non-handicapés) n'est pas loin !

Amicalement,

Bernard

calimo · Message par **calimo** » 10 sept. 2009, 18:45

Bernard de Go Mars a écrit :Cher Calimo,
tu écris :
- transformer ce texte en note de bas de page ;
- dupliquer l'information avec un onmouseover javascript.

Ça devient compliqué (le double de travail ?). Mais on peut s'en faire un devoir...

Si une note de bas de page est accessible par effleurement, on peut très bien changer son fusil d'épaule et remplacer les info-bulles par des notes de bas de page... Mais ces notes de bas de page sont-elles accessibles par effleurement ou par clic ? (un clic à la place d'un effleurement ne me gênerait pas, d'ailleurs)...

Un lien, il faut cliquer pour l'activer. Mais rien ne t'empêche (en théorie) que le javascript aille chercher le texte de la note de bas de page et l'affiche en infobulle. Probablement pas trivial, mais faisable.

Ici tu t'es orienté vers les CSS, donc ça ne sera pas possible.

Bernard de Go Mars · Message par **Bernard de Go Mars** » 10 sept. 2009, 20:38

Merci pour cette réponse, cher Calimo.

Ce n'est surement pas moi qui me lancerai dans quelque chose que "rien n'empêche (en théorie)"...

La solution des info-bulles basé sur le code de Bubudubois est très intéressante, pour le moment (sauf pour les handicapés visuels, du moins tant que quelqu'un n'aura pas pondu un additif qui réalise leur ouverture).

Je rappelle que, dans ledit système , il serait souhaitable que le cadre où s'ouvre les info-bulles se place à l'endroit où se situe le pointeur. Il doit bien y avoir une commande de format pour ça ?

Au minimum, on pourrait accepter que ce cadre s'ouvre au milieu géométrique de la fenêtre active , même réduite...

Amicalement,

Bernard

calimo · Message par **calimo** » 11 sept. 2009, 10:48

Code : Tout sélectionner

a:hover span
{
[…]
position: absolute;
top: 85px;
left: 200px;
[…]

C'est ici que tu définis le positionnement. Il semblerait que tu souhaites un positionnement relatif (position: relative).

Bernard de Go Mars · Message par **Bernard de Go Mars** » 11 sept. 2009, 12:07

Merci, cher Calimo.
J'ai donc tenté le "relative". Cela améliore sensiblement la lecture, ou plutôt cela crée une situation où le connecteur est très bien averti de l'ouverture de l'info-bulle (celle-ci ne pouvant s'ouvrir hors de sa vue, puisqu'elle s'ouvre à l'emplacement du pointeur).

Dans mon exemple, j'ai ajouté pas mal d'espace libre en haut de page pour vérifier ce qui se passe si l'on met, tout en bas de la page, un mot à effleurer (comme le mot "reste" dans cette page) avec une info-bulle monstre : Cette info-bulle apparaît bien (recouvrant le mot effleuré), mais n'est pas lisible (puisque l'on ne peut pas être "à l'effleurement" et "à l'ascenseur")(au four et au moulin).

D'autre part, la création d'un espace blanc sous l'info-bulle est assez désagréable (et même nauséeuse), car elle modifie l'image du texte de fond, ce qui est totalement inutile.

C'est dingue ce que une petite info-bulle peut poser comme problème !

Néanmoins, on progresse.

En te remerciant,

Bernard

Geckozone

Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Re: Cacher-afficher par effleurement

Qui est en ligne ?