Aller au contenu

modifier le code "acronym"


Sujets conseillés

Posté (modifié)

slt

J'ai ce code :

<acronym title="Texte à faire apparaître">Placer le curesur ici</acronym>

C'est pour faire apparaitre un texte au survol du curseur. J'ai un petit souci avec certain texte trop long. Je ne peux mettre que environs un peu moins de 70 caracteres. Comment faire pour augmenter le nombres ? sans pour autant que le texte qui apparaitra soit un roman :P

Merci d'avance.

Modifié par Nenex
  • 1 month later...
Posté
Bonjour,

Il y'a moyen d'imiter cela à l'aide du CSS.

Modifier l'apparence d'une info-bulle

Avec la technique de cet article, le résultat devient le même mais sans limitation de caractères

Cordialement,

Mikiman

Je suis alle voir le lien que tu ma passe mais j'ai pas eu le temps de le mettre en pratique.

On est bien d'accord que tu n'utilises acronym que pour préciser la signification d'un acronym et pas autre chose ?

Pour des acronym mais aussi pour des definitions de mots ou traduction de mots (un exemple).

Posté

Salut

Il y'a moyen d'imiter cela à l'aide du CSS.

Modifier l'apparence d'une info-bulle

Rien que de voir href="#", ça m'énerve: encore une solution parfaitement inacessible qui, sous prétexte qu'elle est diffusée sur un site très visité, passe pour une parole d'évangile et va se retrouver dans la source de trop nombreux sites.

Entre ça et les pages qui concourrent au plus grand nombre de <div> imbriqués, je ne sais pas ce qui me hérisse le plus...

La seule chose intéressante dans cet article est le paragraphe orange au début, en particulier la 2e phrase.

<acronym> est une balise créée pour contenir un acronym -et sa signification dans l'attribut title-, pas pour profiter de l'info-bulle.

Si on souhaites un attribut title qui contienne plus de 70 caractères, c'est qu'on n'est pas en présence d'un acronyme à définir. C'est donc qu'il ne faut utiliser acronym mais certainement une balise plus appropriée.

Au passage, je rappelle que <span> et <div> sont deux balises qui sémantiquement ne veulent RIEN dire: par conséquent, leur usage doit être limité au strict minimum, c'est-à-dire quand aucune autre balise n'est envisageable.

Pour des acronym mais aussi pour des definitions de mots ou traduction de mots (un exemple).
Ce sont deux choses bien différentes qui ne nécessitent pas la même balise.

CPPB est un acronyme, Baiona n'en est pas un (pour vérifier, voir la définition du mot "acronyme" dans un dictionnaire).

Plusieurs solutions à ton problème:

  • écrire le texte de définition par exemple dans une liste de définition (balises <dl>, <dt>, <dd>) et utiliser un JS non obstruant pour obtenir l'effet de survol
  • écrire le texte dans une balise adéquate selon le cas, car tu sembles confondre les acronymes, les définitions, et les traductions.. et utiliser un JS pour l'effet de survol
  • écrire le texte de l'infobulle dans une parenthèse, tout simplement, c'est tout aussi lisible. Exemple: Baiona (Bayonne)

En tous cas, les solutions à base de faux liens (utilisation abusive de la balise <a> détournée à des fins visuelles) et de <span> sont franchement à déconseiller.

PS/ tant que j'y suis, et parce que ça fait longtemps que je n'avais pas donné ce lien: mouvement abolitionniste contre l’utilisation abusive de la police Comic Sans MS :ph34r:

Posté

L'utilisation de la balise ACRONYM ne sert que pour les acronymes !...

Exemple :

<acronym title="Asynchronous JavaScript and XML">AJAX</acronym>

Pour les définitions, il faut utiliser les balises <dl> <dt> et <dd>...

<dl> Sert à créer une liste de définition...

<dt> Encadre le mot à définir

<dd> Est la définition du mot balisé par <dt>

Exemple :

<dl>
<dt>Acronyme</dt>
<dd>Sigle que l'on prononce comme un mot ordinaire. Ex.: DEUG.</dd>
<dt>Webmaster</dt>
<dd>Responsable d'un service Internet.</dd>
</dl>

(Les définitions proviennent de Mediadico)

Et enfin, pour simplement créer un "title" sur un mot... Il te suffit d'écrire :

<span title="Texte à faire apparaître">Et voilà !</span>

Sinon, tu as raison de regarder comment font les différents sites... mais avant même d'observer l'utilisation des balises, je t'invite à prendre connaissance de toutes les balises HTML .

Bonne Chance ;)

Posté

Merci a vous 2 pour vos eclaircessements. C'est qu'apres avoir regarder dans wikipedia la definition du mot "acronyme" ca na rien a voir avec certaine de mes utilisations. Donc je vais revoir touts me code "acronyme" que j'ai deja utilise pour les modifier (si c'est une abreviation ou une explication d'un mot et peux etre une traduc. Pour les traduc je vais voir si je fais come ca ou entre parenthese).

Et merci a tout le monde pour votre aide.

Posté (modifié)
Pour les définitions, il faut utiliser les balises <dl> <dt> et <dd>...

<dl> Sert à créer une liste de définition...

<dt> Encadre le mot à définir

<dd> Est la définition du mot balisé par <dt>

Exemple :

<dl>
<dt>Acronyme</dt>
<dd>Sigle que l'on prononce comme un mot ordinaire. Ex.: DEUG.</dd>
<dt>Webmaster</dt>
<dd>Responsable d'un service Internet.</dd>
</dl>

J'ai utilise tel quel le code de ton exemple mais les definition des mots acronyme et webmaster sont dans la page, ils ne sont pas invisible. Ils devriaent ne pas etre visible et apparaitre quant on met le curseur sur le mot. J'ai copier-colle le code que tu a mis.

L'utilisation de la balise ACRONYM ne sert que pour les acronymes !...

Exemple :

<acronym title="Asynchronous JavaScript and XML">AJAX</acronym>

Et enfin, pour simplement créer un "title" sur un mot... Il te suffit d'écrire :

<span title="Texte à faire apparaître">Et voilà !</span>

C'est quoi en fait la difference entre les 2 codes, a part que pour acronym title le mot est souligne et pour span title le mot n'est pas souligne ?

Modifié par Nenex
Posté

Attention Acronym ne souligne pas forcément : oui dans mozilla, non dans ie

Tu peux personnaliser l'apparence de la balise acronym ou span grace aux CSS

Après la différence entre les deux, c'est une question de sémantique.

Posté (modifié)

Je vais essayer de te donner des éléments de reponses bien que j'ai pas pu experimenter ce que j'avance:

- je suppose que les lecteurs vocaux (type Jaws, etc) précisent à l'utilisateur qu'il va lire un acronyme, alors qu'avec le span, il ne doit pas le préciser. C'est tout simplement le coeur de la sémantique: définir l'utilisation des données et non leur presentation.

ps: pour les termes anglais, tu as également <span lang="en">hello</span> qui là encore a pour but de préciser à un lecteur vocal comment prononcer ce passage. Mais encore une fois, n'étant pas utilisateur de ce type d'outil, j'attends l'avis des specialistes.

Modifié par broadcastor
Posté
si c'est une abreviation
Dans le cas une abréviation, il faut utiliser <abbr>. Et encore une fois, un acronyme n'est pas une abréviation: ce sont VRAIMENT deux choses différentes ;)

Exemple:

<abbr title="Monsieur">M.</abbr> Dupont et <abbr title="Madame">Mme</abbr> Durand travaillent à l'<acronym title="Organisation des Nations Unies">ONU</acronym>

Posté
Dans le cas une abréviation, il faut utiliser <abbr>. Et encore une fois, un acronyme n'est pas une abréviation: ce sont VRAIMENT deux choses différentes ;)

Exemple:

<abbr title="Monsieur">M.</abbr> Dupont et <abbr title="Madame">Mme</abbr> Durand travaillent à l'<acronym title="Organisation des Nations Unies">ONU</acronym>

Ha ben oui :P

Et pour le code que ma passe Fanou :

<dl>
<dt>Acronyme</dt>
<dd>Sigle que l'on prononce comme un mot ordinaire. Ex.: DEUG.</dd>
<dt>Webmaster</dt>
<dd>Responsable d'un service Internet.</dd>
</dl>

Le texte apparait de cette maniere dans ma page :

Acronyme

Sigle que l'on prononce comme un mot ordinaire. Ex.: DEUG.

Webmaster

Responsable d'un service Internet.

Normalmeent on devrait voir les explication des mots au survol du curseur sur les mots Acronyme et Webmaster.

Posté

C'est normal car par défaut ce genre de balises a ce genre de présentation.

Dans cet article les listes de définitions, tu as certaines astuces CSS pour "styler" ces balises.

Mais pour faire afficher les définitions dans une info-bulle au survol, il te faudra utiliser Javascript ;)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...