Description une phrase- Pouruoi - Comment - Lien MON vdixime

Partager le changement... Vers de nouvelles pistes ... Vers une nouvelle vie ...

Trouver la voie c'est rechercher sans cesse ... et savoir qu'elle se présente sans aucun doute quand nous sommes prêts

Dernière mise à jour : 24/07/2016 ... Mais je continue de veiller. Aussi longtemps que vous aurez de l'Amour dans votre coeur, vous gagnerez toutes les batailles - Desideratum sur facebook continue de vivre au quotidien pour les extras

mardi 12 août 2014

Créer une info bulle au survol sur un lien

Je trouve l'astuce très pratique pour éviter de surcharger la page lorsqu'il s'agit de donner une indication complémentaire sur le lien.Par contre entre html et css à rajouter et bidouilles de toutes sortes j'ai toujours trouvé compliqué d'insérer ce petit résumé.
Donc je vous mets ici comment je procède. C'est simple et il n'y a qu'une seule opération.

°°°°°°°°°°

A la base, sans avoir intégré le code pour obtenir une info bulle, nous avons :


<a href="http://www.agoravox.fr/" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;">Agoravox</span></a><br />



Ce qui correspond à





°°°°°°°°°°

Pour obtenir une bulle, il suffit d'intégrer la balise TITLE, ce qui donne :
(le rajout ici en rouge)


<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">
<a alt="Agora Vox" href="javascript:void(0)" onclick="window.open('http://www.agoravox.fr/'); return false;" title="Le média citoyen">Agoravox</a></span></span>



Ce qui au passage du curseur correspond à


°°°°°°°°°°

Précisions : 
Le rajout est placé après la première écriture sans oublier :

- d'ouvrir la totalité de l'écriture par : <span

- et la fermer par : </a></span>

Les données variables sont ici celles indiquées en bleu (le texte du lien tel qu'il est visible sur la page) et en rouge (le texte de l'info bulle).

<a alt="Agoravox"href="javascript:void(0)"onclick="window.open('http://www.agoravox.fr/'); return false;" title="Le média citoyen">Agoravox</a></span></span>

Attention à bien écrire le lien visé !

Voila, c'est tout, c'est simple et c'est fini !


Aucun commentaire:

Enregistrer un commentaire