Cacher-afficher par effleurement

[Bernard de Go Mars]

Salut vous-autres, vieux routiers de l'html.

Je viens vers vous dans mes petits souliers de pragmatique pour solliciter de votre compétence la résolution du problème suivant :

Dans la rédaction des pages dont j'assure la webmaistrance, à présent grâce à Kompozer (par exemple là ou ici)

il m'arrive assez souvent de désirer :

-->que le survol de certains mots déclenche l'apparition d'une info-bulle ou éventuellement celle d'une image, cette info-bulle ou cette image disparaissant lorsque le pointeur n'est plus sur les mots déclencheurs.

-->qu'un clic sur certaines partie d'une image déclenche les mêmes actions (texte ou autre image) (mais ça ça doit être plus lourd à mettre en œuvre).


Un premier impératif implicite est que les mots à effleurer (ou à cliquer) soient "en plein texte" et non disposés à l'écart.

Un autre impératif complémentaire est que le code à insérer soit simple (et si possible séparé en blocs éclairés par des commentaires que d'ailleurs je laisserai "à demeure" au moment de l'insertion).

Mais quand je dis simple, cela ne veut pas dire "simple pour vous", évidemment ; ça veut dire "simple pour les nuls" et spécialement pour le nul que je suis (mais je me soigne à la débrouille et au pragmatisme).

Autrement dit il faut que la démarche soit "simplissime à destination des nullissimes".

-------------------------------------------------------------------------------------

Accessoirement, quel est le symbolisme à utiliser pour ces mots "sensibles" (dont l'effleurement déclenche une action) ? À mon sens, ce symbolisme devrait être différent de celui indiquant les mots à cliquer (pointant vers un lien), ceci pour éviter que les connecteurs ne cliquent (en pure perte) sur un mot qui ne demande qu'à être caressé.

-----------------------------------------------------------------------------------

J'ai trouvé sur le web un petit code (comment dite-vous ? : un codillon ?) (origine "Pijaku") que j'ai quelque peu bricolé pour éclairer les choses.

Il se trouve ici.

Vous allez rire aux éclats de mon bricolage. Mais c'est comme ça que je me soigne (car je n'ai pas le temps de me soigner dans les règles).

Dans cet exemple, ce qui ne me convient pas c'est que les mots à effleurer sont situés dans une liste à puces et non en plein texte (comme je le disais à l'instant)...

Il serait aussi préférable que le texte caché-affiché apparaisse non loin du texte déclencheur, et peut-être (si c'est assez simple) dans un cadre qui faciliterait sa lecture...


Merci à vous et aux créateurs de Kompozer
ainsi qu'à tous les enthousiastes partageurs (dont je crois être),


Bernard de Go Mars !

[Ymai]

Bonjour
Dans un premier temps, j'irais voir du côté de Overlib: http://www.bosrup.com/web/overlib/ qui est sans doute une des solutions les plus simples.
Le sujet étant plutôt orienté "développement web", je déplace afin qu'il y ait plus de réponses intéressantes.

[Bernard de Go Mars]

Merci Ymai.

J'ai visité rapidement le lien OverLib.

Ma première impression est que ça menace d'être compliqué, même si je n'ai pas été jusqu'à télécharger du code (je garde ça pour demain).

Le résultat à l'air d'être très efficace, d'ailleurs. Pourtant on n'est pas loin d'une solution avec le petit code Pijaku modifié par moi (vers lequel pointait mon lien) : en fait je m'en serais satisfait si il n'y avait pas eu ces problèmes de mise en page...

Au plaisir de lire vos autres conseils,

Bernard de Go Mars !

[Ymai]

. Pourtant on n'est pas loin d'une solution avec le petit code Pijaku modifié par moi

Dans cette solution, il n'est pas du tout nécessaire que les actions "onmousever, ..." soient positionnées sur des balises <li>. N'importe quelle autre balise peut faire l'affaire; y compris <span>.
Par contre, le positionnement des infos supplémentaire n'est pas vraiment géré.
La solution "overlib" n'est pas franchement d'un niveau de complexité très supérieure. Juste une librairie .js à inclure dans chaque page et un bloc <div> vide à prévoir pour contenir les infobulles. Ensuite, c'est aussi du "onmouseover" et "onmouseout".
Pas de quoi faire très peur, tout ça. AMHA Il faut juste sauter le pas.

Plus impressionnant, mais sans doute un peu plus déroutant du point de vue du code au premier coup d'oeil, il existe aussi des solutions qui font appel à jquery
http://jquery.bassistance.de/tooltip/demo/

[Bernard de Go Mars]

Merci Ymai pour tes soins.

Le résultat produit par les Jquery sont impressionnants !

---------------------------------------------------------------------------------
À propos de mon fichier cité en lien, tu écris :

"Par contre, le positionnement des infos supplémentaires n'est pas vraiment géré."

: Oui, c'est ce qu'il me semblait. Mais si ce texte caché-affiché apparaît sur l'écran, son apparition doit attirer l'œil (du moins j'espère). C'est peut-être la rançon de la simplicité du code...


"il n'est pas du tout nécessaire que les actions "onmousever, ..." soient positionnées sur des balises <li>"

: Bon, alors il faut que je me mette la tête dans le code. Si je ne suis pas ressorti dans une semaine, prévenez les secours !


Amicalement,

Bernard

[Bernard de Go Mars]

J'ai trafiqué un petit code expérimental utilisant un onmouseover.

Mais l'effleurement ne fonctionne pas. Il y a donc une petite erreur quelque part.

Si ça vous crève les yeux, indiquez-moi cette erreur de primodébutant...

En vous remerciant,

Bernard (ces bricolages me font quand-même beaucoup progresser)

[Asumbaa]

Salut,

La balise onmouseover n'existe pas, c'est un événement Javascript que tu peux utiliser sur une balise (existante)
Au lieu de :

Code : Tout sélectionner

<onmouseover ="div.show('div1')" onmouseout="div.hide('div1')">image cachée</onmouseover>

Essaye donc :

Code : Tout sélectionner

<span onmouseover ="div.show('div1')" onmouseout="div.hide('div1')">image cachée</span>

[calimo]

Hello,

Toujours valider son code HTML : http://validator.w3.org/check?verbose=1 ... exte2.html

onmouseover/out n'est pas un élément HTML, mais un attribut. Tu dois utiliser <span onmouseover="..." onmouseout="...">...</span>.

J'ai cependant un très gros bémol à émettre : que fait l'utilisateur qui navigue sans souris ? Tu devrais transformer tout cela en liens qui pointent par exemple sur l'image cachée, permettant à ces utilisateurs de naviguer malgré tout.

Edit : grillé, mais le bémol à propos de l'(in)accessibilité s'applique toujours.

[bubudesbois]

Aloha !

Voici un petit bout de code que j'utilise pour faire apparaitre et disparaitre des info au survol de la souris.

Html et CSS seul

Affichage de calque

@ plus

bbdb

[Bernard de Go Mars]

Merci les gars !
[b]Asumba[/b] : OK, j'ai effectué les corrections. J'irais au coin dès qu'il y en aura un de libre dans mon bureau !
Ça fonctionne bien à présent, mais, dans FF, l'affichage est critiquable dans la mesure où le texte caché-affiché s'affiche en dessous de mon paragraphe. Ça fait vraiment trop loin !

Évidemment, je ne suis pas obligé de frapper un paragraphe aussi long, mais c'est la place réservée à l'image qui est dimensionnante (les autres textes cachés-affichés s'affichent sous l'emplacement réservé à cette image). Voir (Ici)


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 ?

Bubudubois : Ton truc paye un max ! C'est peut-être la solution (je ne sais si Calimo s'y opposera). Malheureusement je n'ai pas réussi à le faire fonctionner sur mes pages, sans doute parce que je ne suis pas utilisateur du CSS.
Peux-tu être plus explicite sur l'insertion de deux morceaux de code ?
Accessoirement, pour des utilisateurs comme moi, il faudrait que tu commentes ces deux morceaux (avant et après chaque morceau pour qu'on puisse le localiser) et que tu indiques bien dans ce commentaire où les insérer ! (c'est fou comme les enfants de 5 ans sont nuls !)...

En vous remerciant pour vos réponse passées et à venir,

Bernard

[bubudesbois]

Content que le code puisse t'intéresser.

Pour le CSS, 2 solutions:

• Soit dans une feuille de style exterieur

• Soit dans le code de la page entre les balise <head></head>

Pour le html, dans le code de la page a l'endroit ou tu veux le lien.

Tu peux regarder le code de la page donné en lien pour exemple.

@ plus

bbdb

[Bernard de Go Mars]

Bon, il me semblait avoir procédé ainsi que tu le dis...

Je recommencerai ce soir mon escalade de l'Himalaya, car il y a de la vaisselle à faire au camp de base...

Entretemps, un copain m'a donner l'astuce de placer le texte à cacher-afficher en tant que vignette d'une image qui n'existe pas, le texte alternatif de cette image inexistante étant le texte à effleurer.
Voir ici.

Ce sont les expression "En première partie" et "En deuxième partie" qui sont à effleurer.

Car, de fait, il reste à attirer l'attention sur les mots à effleurer par une mise en forme spéciale. Or ce n'est pas possible dans la fenêtre d'insertion d'image de Kompozer !

Amicalement,

Bernard

[Bernard de Go Mars]

Les imbéciles sont capables de tout, c'est même à ça qu'on les reconnait !

C'est sans doute pour ça que je n'arrive pas à coller tes deux codes dans ma page.

Amicalement,

Bernard

[bubudesbois]

En fait, j'ai oublié une info ... oups !

LE code :

Code : Tout sélectionner

<head>

   <style type="text/css">
		a:hover
		{
			background: none;
		}
		.menu a span
		{
			display: none;
		}
		.menu 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>

Il faut mettre les balyse <style></style>

bbdb

[Bernard de Go Mars]

Incroyable ce que les pro peuvent faire comme bêtises !
Il me semblait bien qu'il y avait quelque chose, mais je pouvais pas imaginer...

Voilà : j'ai progressé dans la chose.

Ça se fonctionne très bien (et très vite), mais il faudrait que l'expression à effleurer soit placée en plein texte, dans un paragraphe banal.

Sinon la présentation est très efficace et le positionnement "par dessus" et plus haut que le mot effleuré est satisfaisante...

En te remerciant,

Bernard