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

Insérer une image avec lien et info bulle

tuto de guillaume

Par isabelle • Tutoriels • Mercredi 11/07/2007 • 10 commentaires  • Lu 57256 fois • Version imprimable

Mots-clés : , , , , ,

1) insérer une photo ou une image


(voir aussi la procédure simplifiée de l'éditeur d'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>

banane 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

D'autres articles sur des thèmes similaires :

Commentaires

complément par Guillaume le Mercredi 18/07/2007 à 12:36

Guillaume @ Isabelle > Je n'ai pas de droits pour modifier ce tuto, mais il faudrait préciser qu'il s'agit là d'un tuto pour barbares amoureux du achteumeuleu et que la solution la plus simple reste de suivre la procédure classique.

Il faudrait faire un lien réciproque entre ce tuto et celui sur l'insertion d'image via l'éditeur visuel.

| [^] | Répondre
Re: complément par isabelle le Mercredi 18/07/2007 à 16:35

isabelle bien vu ;-). 

| [^] | Répondre
Lien croisé par Visiteur le Dimanche 06/02/2011 à 19:47

Blog de Ptitefred : " 19:28 de rien... tu veux mettre ta bannière en signature, je peux te renvoyer vers un site qui te donnera un code à insérer, il faudra juste changer l'adresse du lien et l'adresse de l'imagecliques ici pour copier le code à insérerTu copies le code du 2),tu viens dans ta signature ( profil, signature ) tu copies le code à l'intérieur de la fenêtre, tu effaces ensuites ce qui se trouve entre les parenthèses " adresse du lien ", tu y colles à la place, l'adresse de ton blog ( ça doit être entre les parenthèse"

| [^] | Répondre
Lien croisé par Visiteur le Mardi 12/07/2011 à 15:06

►Aide page d'accueil pour forum. : "Bonjour, Vous pouvez vous aider de ses tutos comment construire des tableaux code couleur Inserer infobulleJe vous ai fais un petit exemple, a vous de continuer à l'améliorer. Code: <table border=2>  <tr>       <th ROWSPAN=2< bgc"

| [^] | Répondre
par Repliques Sacs le Lundi 27/02/2012 à 10:39

Yo soy un defensor del 100% de la nueva característica. Si el innovador puede personalizar un entorno fácil de usar para nosotros. Eso sería mucho mejor. Cuanto más los grupos suscritos se convierte, más la notificación debe ser gestionado.

| [^] | Répondre
Lien croisé par Visiteur le Vendredi 16/08/2013 à 21:27

Bouton vers un endroit d'une page - Forum Mac : "> Tu donnes la bonne réponse, une ancre et une image avec le lien… "

| [^] | Répondre
par Eleonore le Vendredi 01/08/2014 à 16:58

 Interessant, en fait c'est super facile de mettre une image ! :) 
Vous m'apprennez plein de trucs sur l'informatique !

| [^] | Répondre
par James price le Mardi 23/11/2021 à 15:40

 Nice post!

| [^] | Répondre
par Visiteur le Dimanche 07/08/2022 à 15:30

 nice :) 

| [^] | Répondre
Excellent par Self le Lundi 15/08/2022 à 14:10

Merci pour cet astuce ! Je donne aussi quelques conseils sur mon site d'informatique https://selfdirection.org, si vous souhaitez y faire un tour à très bientôt. 

| [^] | Répondre

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

Discussions actives (+ commentaire)

Ailleurs sur ViaBloga

Derniers weblogs mis à jour :

08:57 - P'tit truc
15:15 - Photos Promenade Numérique
12:20 - GRASSE A TOUS
08:50 - Everitouthèque
08:45 - Voleur d'âme
14:49 - EPURES ASBL
17:18 - Défendre et Promouvoir les Valeurs de la République Sociale
12:21 -
10:30 - Le blog de Jean-Michel Cornu
12:22 - La ballade d'un tête en l'air

Toutes les mises à jour

Archives par mois