S'identifier - S'inscrire - Ecrire un article - Contact

Insérer dans un bloc libre une image faisant lien + infobulle -- résolu

Quelles lignes de code html faut-il composer ?

Par Caroline • Aide • Mercredi 11/07/2007 • 11 commentaires  • Lu 5127 fois • Version imprimable

Mots-clés : ,


Hier j'ai galéré deux heures pour insérer une petite bannière publicitaire sur mon blog (la première qui soit rémunérée, donc avec légère pression de l'annonceur quant au "rendu" final).

L'annonceur m'avait envoyé les lignes de code. Il voulait :
1) qu'un clic sur son logo renvoie vers son site Internet,
2) et que, pour le lecteur qui ferait simplement glisser sa souris sur le logo, un texte s'affiche dans une infobulle.

En changeant l'adresse du logo dans les lignes de code, j'ai réussi à obtenir le renvoi par clic vers le site Internet, mais pas l'infobulle. L'annonceur ne sait pas ce qui débloque. Il m'a montré un site où cela marche exactement comme il le souhaite : c'est donc possible ! Mais je ne sais pas comment faire.

J'adorerais qu'il existe un tutoriel quelque part qui indique, en 4 paragraphes bien distincts selon les 4 besoins possibles, les lignes qu'il faut taper (dans un bloc libre, ou dans un article passé en mode html) pour :

1) insérer une photo ou une image (tout le monde le sait ici, mais je pense aussi aux débutants),
2) insérer une photo ou une image faisant lien vers un autre site Internet,
3) insérer une photo ou une image faisant lien vers un autre site Internet et comportant une infobulle,
4) insérer une photo ou une image ne faisant pas lien mais comportant une infobulle.

Si l'info existe quelque part, mille pardons pour cette demande inutile... et merci beaucoup de m'indiquer où la trouver ! :-)


D'autres articles sur des thèmes similaires :


Commentaires

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

leblase 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

isabelle
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

Guillaume 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

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

1) insérer une photo ou une image :

<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" />


2) insérer une photo ou une image faisant lien vers un autre site Internet :

<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>

3) insérer une photo ou une image faisant lien vers un autre site Internet et comportant une infobulle:

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

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

</a>

4) insérer une photo ou une image ne faisant pas lien mais comportant une infobulle.

<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

isabelle voili, voilou ;-)


code ? par Stephane le Mercredi 11/07/2007 à 22:00

Stephane Le plus simple c'est que tu nous copies/colles le code proposé par ton annonceur, on te dira tout de suite ce qui ne va pas.

Si c'est Ciao, il n'y a pas de balise 'title' dans le lien

<a href="http://www.ciao.fr" target="_blank">
Il vaudrait mieux un truc comme :
<a href="http://www.ciao.fr" target="_blank" title="votre comparateur internet">



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 Stephane le Mercredi 11/07/2007 à 22:54

Stephane Il manque le parametre "title" dans la balise <a> autour de l'image, c'est pour celà qu'il n'y a pas l'infobulle.


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.



Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Archives par mois