Vie de ViaBloga

Caroline devient riche par leblase le Mercredi 11/07/2007 à 17:11

Caroline,
je pense que ton annonceur fait référence à un truc qui s'appelle Snapshots, qui lance une infobulle sur un lien représentant comme une copie d'écran du site en question lorsque tu passes la souris ou ton petit doigt dessus: c'est gratuit.
Le problème c'est que ça fait ça sur tous tes liens.
Certains aiment ça, et d'autres trouvent que c'est un peu envahissant.

---

pas de sapin de noël obligé par isabelle le Mercredi 11/07/2007 à 18:41

nononon, tu as le choix : internes et externes, ou uniquement les liens externes, puis ensuite pour chaque url et à chaque lien tu peux l'afficher ou non, il suffit de cocher la petite croix. Tu peux même choisir si c'est toi ou ton lecteur qui décide ;-)

---

En Achteumeuleu par Guillaume le Mercredi 11/07/2007 à 17:33

Est-ce tout bêtement ça ce que tu cherches ?


<a target="_blank" title="texte de l'infobulle" href="adresse du lien">

<img src="adresse de l'image" />

</a>

---

par Caroline le Mercredi 11/07/2007 à 17:57

@Leblase, fous-toi de moi, va ! Ben voui, je deviens riche. :-)
Sur le côté technique, je vois très bien de quoi tu parles : cf. par exemple dans la fonctionnalité "galerie photo", que j'utilise et qui est tout à fait adaptée à un besoin spécifique de présentation, mais dont je n'aimerais pas voir se généraliser le système de jaillissement de photo ou de texte — tout à fait d'accord avec ce que tu dis !
Je pense ici à autre chose. Très exactement, à ce texte qu'on peut mettre en "légende" de l'illustration principale d'un article, tu vois de quoi je parle ? Juste en dessous de la case adresse de la photo. Quand on remplit cette case "légende", cela donne exactement le résultat que je souhaiterais dans le cas qui m'occupe : mettons que pour illustrer mon article je veuille une photo de banane par exemple, alors je décide de mettre en légende : "banane". Et là, si on glisse avec sa souris sur la photo de la banane, ça dit juste "banane", dans un petit rectangle jaune.
Ça ne fait pas grossir la banane, en fait, ça affiche juste un texte. Disons que pour aujourd'hui ça me suffirait. ;-)

@Guillaume : oui, je crois que c'est ça, en tout cas ça ressemble furieusement à ce qu'il m'a envoyé comme lignes de code. Il doit y avoir une bêtise dans mon truc, mais je ne vois pas quoi. Je vais comparer et réessayer avec tes lignes à toi. Si ça marche, ce serait vraiment bien de faire un petit tutoriel ensuite ! (Je vous tiens au courant si j'y arrive.)

---

Tuto plus détaillé par Guillaume le Mercredi 11/07/2007 à 18:03

Réponse plus détaillée et précise :

<img src="adresse de l'image" />

Et on peut ausi ajouter des trucs plus compliqués comme :

<img vspace="5" hspace="0" border="0" align="right" src="adresse de l'image" />

pour que la photo soit intégrée à droite du texte (on remplace right par left pour qu'elle soit à gauche) avec un léger espacement vertical de 5 pixels par rapport au texte.

On peut aussi définir précisément la taille de l'image en ajoutant height="XXX" pour la hauteur et/ou width="XXX" pour la largeur.

<img height="150" src="adresse de l'image" />



<a href="adresse du lien">

<img src="adresse de l'image" />

</a>

On peut ajouter target="_blank" pour que le lien s'ouvre, selon les navigateurs, dans une nouvelle fenêtre (pour les vieux navigateurs obsolètes) ou un nouvel onglet (pour les rusés renards).

<a target="_blank" href="adresse du lien">

<img src="adresse de l'image" />

</a>


<a title="texte de l'infobulle" href="adresse du lien">

<img src="adresse de l'image" />

</a>


<a title="texte de l'infobulle">

<img src="adresse de l'image" />

</a>

Ajoutons que les points 2,3 et 4 marchent aussi bien pour du texte pour une image.

Ainsi, pour créer une infobulle sur le mot banane, pour donner par exemple au lecteur une explication sur le sens du mot "banane", il suffira d'utiliser le code suivant :

<a title="texte de l'infobulle">banane</a>

Ce qui nous donnera une infobulle dès que la souris se pose sur banane (oui je sais, il est assez rare qu'une souris se pose sur une banane mais c'est juste pour l'exemple) :

banane

---

Re: Tuto plus détaillé par Caroline le Mercredi 11/07/2007 à 18:08

Oh super ! OK, j'essaie toutes les versions et si j'y arrive ça mériterait absolument de figurer dans les tutoriels de base.
Thanks, Guillaume ! :-)

---

Re: Tuto plus détaillé par isabelle le Mercredi 11/07/2007 à 21:00

voili, voilou ;-)

---

Re: code ? par Caroline le Mercredi 11/07/2007 à 22:09

Oui c'est Ciao. J'ai eu ce qui suit, que j'ai légèrement modifié pour importer l'image du logo, qui sinon ne figurait pas (concrètement, j'ai juste ajouté culinotests.fr dans le nom de la photo du logo) :


<br /><html><head></head>
<body border="3px" bordercolor="#000000" link="#ff3333" alink="#ff3333" bgcolor="#ffffff" text="#000000" vlink="#3333ff">
<div style="border: 1px solid rgb(204, 204, 204); padding: 3px; background: rgb(255, 255, 255) none repeat scroll 0%; width: 160px; height: 175px; margin-bottom: 15px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; text-align: center; font-family: verdana; font-size: 11px;">
<a href="http://www.ciao.fr" target="_blank"><img src=" http://culinotests.fr/images/ciao_logo_80x40.gif" alt="votre comparateur internet!" border="0"></a><br>

<font style="" face="Arial" size="2">
Vous pensez acheter de l'électroménager de cuisine? <br> <a href="http://www.ciao.fr/Refrigerateurs_254238_3" target="_blank">réfrigérateur</a>,
<a href="http://www.ciao.fr/Congelateurs_254240_3" target="_blank">congélateur</a>,
<a href="http://www.ciao.fr/Lave_Vaisselle_254248_3" target="_blank">lave-vaisselle</a>,
<a href="http://www.ciao.fr/Cuisinieres_254242_3" target="_blank">cuisinière</a>,
<a href="http://www.ciao.fr/Fours_posables_254247_3" target="_blank">four</a>

<br>Comparez les avis et les prix en ligne!

</font></div></body></html>


—————
Je le mets juste pour info, pour ceux que ça intéresse. Demain je revois tout cela, je crois que j'ai tous les conseils voulus. Il n'y a plus qu'à essayer et à vous rendre compte du résultat. Vraiment merci à tous. :-)

---

Re: code ? par Caroline le Jeudi 12/07/2007 à 09:56

Super, ça marche impec ! :-)

Merci beaucoup pour tous ces renseignements, maintenant je saurai me débrouiller (et orienter vers l'aide adéquate des débutants qui se poseraient la même question). Je me demande pourquoi j'ai tant attendu pour poser la question, quand je vois comme je suis contente de maîtriser enfin le procédé ! Cela va me permettre de faire des présentations plus agréables et pratiques pour les lecteurs, alors encore un grand merci pour votre aide.

---