[RESOLU] Images d'arrière-plan et infobulles

Bonjour,

J'ai sur mon site des petits pictos associés aux différents types de liens (liens externes, sécurisés, qui ouvrent une nouvelle fenêtre, etc.) grâce à la propriété CSS background-image. J'aimerais bien que des infobulles soient associées à ces pictos, du genre "Ce lien va ouvrir une nouvelle fenêtre", "Ce lien va vous faire quitter le site", etc. Savez-vous si c'est possible ? Et si non, auriez-vous une autre idée pour que la signification des différents pictos soit plus évidente ?...

Merci beaucoup !

Ocilya
Modifié par ocilya (09 Aug 2005 - 19:37)

Bonsoir ocilya,

Ce n'est pas possible, et pour une bonne raison : une image qui est générée via CSS est considérée comme n'ayant pas de valeur autre que décorative. Il n'y a donc aucune information textuelle à lui associer.

En revanche, ici, cette information est tout à fait pertinente pour l'ensemble de ton lien. Donc :

<a href="..." title="Site X, ouvre une nouvelle fenêtre">Site X</a>

Ton attribut title soit reproduire le sens du lien (Site X), puis y ajouter l'information souhaitée (ouvre une nouvelle fenêtre).
Modifié par Laurent Denis (08 Aug 2005 - 23:54)

Il existe un bon moyen d'autmatiser tes types de liens, malheureusemet IE 6 (notamment) ne prennent pas en compte cette balise, il s'agit des balises CSS :after et :before.

Ainsi, si tu veux que tous les liens qui pointent vers l'extérieur affichent une image et un message permettant d epréciser qq chose du genre "ce lien pointe vers l'extérieur, il te faut créer une classe style lien_ext avec ces propriétés :

a.lien_ext:after {
content: url(fleche.gif);
}

Et un javascript chargé dans le HEAD se chargera de faire ouvrir tous les liens ayant cette classe dans une nouvelle fenêtre, en plus de faire apparaître une info-bulle précisant "ce lien s'ouvre dans une nouvelle fenêtre").

Je n'invente rien, tout cla est sur ce même site à cette adresse : http://css.alsacreations.com/Tutoriels-JavaScript/liens-externes-nouvelle-fenetre

Ok ok... Merci pour vos réponses.

Je crois malheureusement que je ne vais adopter aucune de vos deux solutions :

@Laurent : certains de mes liens ont déjà des attributs title, ce sont ceux dont la destination n'est pas évidente. Si je mets des title sur tous les liens, j'ai peur que l'utilisateur en lise un ou deux et les "zappe" tous ensuite, auquel cas il passera à côté des informations importantes. On va dire que les pictos sont une solution suffisante... Et pour que leur signification soit plus claire, on va probablement créer une légende pour le site sur la page de crédits...

@LunaWeb : dans l'immédiat je trouve notre solution actuelle plus simple : avec le code suivant dans la CSS :

#calque [href ^="mailto:"],
.link-mailto {
    background: url("mail_icon.gif") center right no-repeat;
    padding-right: 18px;
}

pas besoin d'appliquer des styles aux liens à la main. Par contre c'est vrai que ça gérerait tout seul le type d'ouverture... Je garde cette idée-là sous le coude pour en parler au "webmaster en chef" !

Merci à tous les deux !

Ocilya