Cours 9 : Faire un lien sur une image

Ce tutoriel a été conçu par nos soins et est donc notre propriété exclusive. Toute ressemblance avec un autre existant ne serait que pure coïncidence. Il est interdit de recopier intégralement ou partiellement nos tutoriels qui sont exclusivement réservés aux membres de ce forum.

Pour ce cours nous allons apprendre à insérer un lien dans une image.
Les balises employées pour ce tutoriel sont :

- <a href="adresse url de la page"> est utilisé pour l'insertion d'un lien et sera obligatoirement fermé par la balise </a>

- <img src="url de l'image"> est la partie utilisée pour afficher l'image.
- N'oublions pas la balise border="0" qui servira à éviter un encadrement autour de l'image affichée.

Comme pour le cours précédent nous pouvons utiliser deux méthodes différentes :

1ère méthode : Image avec lien s'ouvrant dans une nouvelle fenêtre.

Pour insérer un lien dans une image qui s'ouvrira dans une nouvelle fenêtre nous allons utiliser les balises suivantes:
<a href="adresse url de la page"target="blank"><img src="url de l'image"border="0"></a>

target="blank" est la balise employée afin d'ouvrir une nouvelle fenêtre vers le lien que vous aurez choisi.

Voici un exemple pour insérer un lien dans une image:

Lien utilisé: http://www.pc-design-67.com
Lien de l'image:
http://www.e-monsite.com/s/2008/10/18/pc-design/83325716banniere-pc-design-468x60-gif.gif

<a href="http://www.pc-design-67.com"target="blank"><img src="http://www.e-monsite.com/s/2008/10/18/pc-design/83325716banniere-pc-design-468x60-gif.gif"border="0"></a>

Ce qui donne en visuel:


En cliquant sur la bannière vous accédez au site pc-design en ouvrant une nouvelle fenêtre.

2ème méthode : Image avec lien s'ouvrant sur la même fenêtre.

Cette solution est parfaite si vous dirigez vos visiteurs sur les pages de votre site ou forum. Par contre si le lien dirige vers un lien externe votre visiteur quittera votre site.

Pour insérer un lien dans une image qui s'ouvrira sur la même fenêtre nous allons utiliser les balises suivantes:
<a href="adresse url de la page"><img src="url de l'image"border="0"></a>

Seule différence entre ce code et le précédent c'est que la balise target="blank" n'existe plus.

Voici un exemple pour insérer un lien sur une image:

Lien utilisé: http://www.pc-design-67.com
Lien de l'image:
http://www.e-monsite.com/s/2008/10/18/pc-design/83325716banniere-pc-design-468x60-gif.gif

<a href="http://www.pc-design-67.com"><img src="http://www.e-monsite.com/s/2008/10/18/pc-design/83325716banniere-pc-design-468x60-gif.gif"border="0"></a>

Je ne peux malheureusement vous montrer ce que cela donne en visuel étant donné que j'ai désactivé le html de mon message afin de vous permettre de visualiser les codes.

Information : Il existe une nuance sur le net du code pour ouvrir le lien sur la même fenêtre que vous pourrez rencontrer lors d'échanges de lien entre vous et un top site ou encore pour les annuaires. En effet nous pouvons également voir le code affiché ainsi :
<a href="adresse url de la page"target="new"><img src="url de l'image"border="0"></a>


Exercice 1 :

Pour ce premier exercice je vous demanderai d'utiliser l'image que je vous donne ci dessous et d'insérer un lien s'ouvrant dans une autre fenêtre vers le site que je vous fourni :

Lien de l'image: http://s1.e-monsite.com/2008/07/05/6460126boutonannuaire-gif.gif

Lien vers le site: http://www.manimalworld.net/annuaire.html


Exercice 2 :

Pour ce deuxième devoir je ne vous donne aucun exemple. Prenez une image de votre choix (taille maximale 550*400) et insérez un lien vers le site ou forum de votre choix, en restant dans la même fenêtre.

Merci de respecter la taille maximale indiquée de votre image. Une simple petite banniere ou bouton suffira pour l'affichage. Les images trop grandes seront refusées et le devoir sera bien entendu à refaire.

Coucou, tentative pour le cours 9:
1)

2)
J'espère que ça marche
bisous
Chrys

Désolé Chrys mais je crois qu'il va te falloir refaire ce devoir. L'exercice 2 j'ai demandé à ce que le lien s'ouvre sur la même fenêtre. Or ton lien ouvre une autre fenêtre. Il te faut retirer le target="blank". Surtout faire attention à ca.

Par contre attention à ton image qui est trop grande. J'ai demandé une dimmension maximale de 550*400. Ton image fait 440 de haut.[ Afin de pouvoir voir les effets sur les cours suivant je te conseille de les reduire ou sinon de choisir des images plus petites.

coucou, me revoilà pour la correction de l'exercice:
1)

2)

gros bisous
Chrys
voilà pour ce 2° essai, j'ai rencontré un problème, impossible de faire le lien vers la page que j'avais créée à cet effet, du coup, j'ai mis la photo sur ma page d'accueil, autrement j'ai droit à un "oups, la page n'existe pas ou plus"..pourtant , je pense tapper les bons codes et la bonne url...je ne sais pas.J'avais déjà galéré cet AM avec ça, et puis ça avait fini par fonctionner...
si tu as une explication, je suis preneuse.
encore gros bisous
Chrys

c'est parfait bravo Chrys. Pour ta question, je pense que tu devais avoir une erreur dans le lien.

exercice 1 cours 9



exercie 2

en lisant ta réponse à Christelle je crois que j'avais du faire une erreur aussi
donc je recommence :

excercice 1




exercie 2





Excellent travail Danielepaul. Tu as parfaitement vu ton erreur par rapport à ta réponse précédente

Les devoirs du cours n°9 :

1er exercice :



2ème exercice :



Merci pour les corrections.

Régine



Lol Régine j'ai mis 1 semaine à faire ces tutos et toi tu l'es as fait en une petite soirée. Va falloir que je corse un peu tout ça

Thierry merci pour les cours de bases html
Danièle

De rien Daniele mais c'est pas encore fini. J'ai rajouté d'autres tutos. Normalement il devrais en avoir 20 quand j'aurais fini cette section. N'oublie pas de repasser pour suivre la suite.

De plus je vois que ça t'amuse bien sans compter que ça va te donner un superbe coup de pouce pour gérer ton site à l'avenir.

Vous êtes maintenant 3 élèves assidues pourvu qu'il y en ai d'autres.

bonsoir Thierry
je reviendrais après les fêtes de Pâques.
promis.
bisous et un grand merci

re-bonsoir
je me suis permise de te faire de la réclame pour la base html à un ami .
bisous

Coucou

Exercice 1 :



Exercice 2 :





Super Jennie. Très joli site au passage

Merci Thierry, tu es trop gentil

Houlà là ca se corse !!
Exercice 1 :


Exercice 2:



ouf terminé, mais super interressant !

Bon ben va falloir que je remette quelques devoirs on dirait. Mais ils seront sans aucun doute plus dur. Je vois que le niveau est trop facile lol!!

Merci Thierry !
Euh non les cours ne sont pas trop faciles, faut chercher quand même avant de poster les exercices
Merci pour les nouveaux cours, j'irais découvrir la suite ce week-end dès que j'ai un moment !!
Bisous et bonne journée

Il faut chercher un peu, mais tu t'en sors très bien ! Et c'est comme ça qu'on apprend aussi, et qu'on retient