Image Multiclicable 1

Me Contacter Mes Tutoriels PSP Livre d'or

 

IMAGE CLIQUABLE 

Réalisé avec PSP X3, ce tutoriel convient cependant à toute version PSP

Une image cliquable aussi appelée map ou réactive est une image dont certaines zones contiennent un lien

vous redirigeant vers d’autres pages ; on nomme ces zones « zones sensibles »

C’est donc une image dont certaines zones comportent des liens URL

I-MATERIEL-

La première chose est d’avoir une image ou d’en créer une sur laquelle on délimitera des zones sensibles

qui contiendront nos liens, qui renverront sur d’autres pages.

Pour le tuto , j’ai créé cette image sur laquelle je compte insérer 3 liens

1 vers ma page contact, 1 vers ma page tutoriels et 1 vers mon livre d’or

Une fois créée dans PSP, je l’enregistre soit en .gif, .png ou Jpeg pour la sauvegarder.

Je duplique la fenêtre pour travailler sur une copie et fermer l’originale ; on ne sait jamais !!!

II- PRESENTATION-

La Fenêtre

Quand l'image est ouverte dans PSP, je fais : Menu Fichier/Exporter/Image cliquable.

Une fenêtre avec plusieurs champs s’ouvre

En 1/ l’aperçu de votre image

En 2/ les outils pour délimiter la ou les zone(s) cliquable(s)

En 3/ le champ pour noter le lien Url de la page vers laquelle vous souhaitez que le clic redirige

En 4/ le nom que vous donnez au lien

En 5/ la cible, c'est-à-dire la façon dont s’ouvrira votre page de renvoi

En 6/ le format dans lequel vous souhaitez enregistrer votre image cliquable

En 7/ bouton aperçu dans le navigateur

En 8 /le bouton enregistrer

Agrandissez cette fenêtre en plein écran ou réduisez le zoom de l’aperçu pour travailler plus aisément

Les outils

L’outil Flèche permet de modifier la taille d’une zone sensible.

L’outil Déplacement permet de déplacer une zone sensible selectionnée.

L’outil Polygone permet de créer une zone sensible de forme irrégulière.

L’outil Rectangle permet de créer une zone sensible carrée ou rectangulaire.

L’outil Cercle permet de créer une zone sensible circulaire ou elliptique.

L’outil Supprimer permet de supprimer une zone sensible.

L’outil Main permet de faire glisser l’image dans la zone d’aperçu et d’afficher ses zones masquées.

 III  - MODE D'EMPLOI -

Votre image ouverte dans PSP, faites Menu Fichier/exporter/image cliquable ; la fenêtre de cette fonction s'est ouverte ...

-1-

Déplacez, avec l’outil main, votre image dans l’aperçu pour atteindre la 1ère zone à sélectionner

Sur mon image par exemple je veux donc insérer mes 3 liens vers des pages de mon site

Comme je l’ai dit dans la présentation vous pouvez délimiter des zones rectangulaires,

carrées, circulaires ou polygonales selon l’outil que vous choisissez (en 2)

Là pour l’exemple je vais le faire avec trois outils différents

-2-

1er Lien

Je commence par sélectionner le cœur en haut à droite avec l’outil sélection cercle

Si mon cercle n’est positionné pile là où je voulais, je le bouge avec l’outil déplacement

Notez qu’en bas de la fenêtre à gauche, on a maintenant la position de la sélection.

Puis je me rends dans la partie 3/ de la fenêtre, où je colle l’URL de la page sur laquelle je veux renvoyer

Ici par exemple je choisis que mon lien renvoie sur la page Tutoriels de mon site ; Donc je colle l'Url de cette page

En 4 /je note le texte qui s’affichera si par hasard mon image ne s’affichait pas un jour ; Donc perso, je note Tutoriels PSP

En 5/ je définis la façon dont cette page (sur laquelle le lien renvoie) va s’ouvrir

Je cite les explications de Corel :

blank : charge la page liée dans une nouvelle fenêtre du navigateur.

parent : charge la page liée dans l’image mère du lien.

Si le lien ne se trouve pas dans une image imbriquée, l’image est chargée dans l’intégralité de la fenêtre du navigateur.

lien : permet de charger la page liée dans la même image que le lien.

haut : charge la page liée dans l’intégralité de la fenêtre du navigateur et supprime les autres images.

Perso je choisis « blank » ; Mon 1er lien est fait

-3-

 -2ème Lien-

Même manipulation pour le second mais cette fois avec l’outil polygone

Si besoin j’ai déplacé mon image dans l’aperçu avec l’outil main

Et si ma sélection ne me convient pas j’utilise l’outil gomme, recommence ou je la modifie

Je prends l’outil polygone, je délimite ma zone point par point

Je colle mon URL sur la page vers laquelle je veux renvoyer par le clic

Ici par exemple, je renvoie vers mon livre d’or ; Je renseigne les champs texte à afficher et cible

-4-

 -3ème Lien-

Je passe au 3ème et dernier lien sur cette image avec l’outil rectangle

Et de nouveau même façon de procéder en remplissant les différents champs.

Avant d’enregistrer je peux vérifier en cliquant sur le bouton « œil » aperçu dans le navigateur

et m’assurer que c’est bien comme je voulais. Si c’est OK j’enregistre.

Je choisis le format dans lequel j’enregistrerai mon image

Perso j’affiche JPEG ; je clique sur le bouton à droite « optimiser l’image »/15-ok

Vous pouvez aussi cliquer sur les autres boutons pour régler les préférences, enregistrer dans le presse papiers …

IV- L’enregistrement-

Il s'effectue en 2 phases.

Créer sur votre PC, un dossier dans lequel vous allez enregistrer les 2 phases de l’enregistrement-

Il est important quelles soient dans le même dossier et c’est plus facile ensuite pour s’y retrouver

Donc je clique 1 première fois sur enregistrer sous ; une fenêtre s’ouvre

C’est La boîte de dialogue d’enregistrement du fichier HTML

Je vérifie en 1 que c’est dans le bon dossier

En 2, je remplis le champ du nom du fichier

En 3 je vérifie que c’est bien en format [*.htm, *.html]

Et en 4, j’enregistre ce fichier

Une autre fenêtre s’ouvre aussitôt

Pareil je vérifie et renseigne les 3 champs et j’enregistre

Là normalement je peux fermer PSP si je le souhaite et suis certaine de ne plus avoir de modifications à faire sur l' image

Je vais ouvrir mon dossier Clictuto dans lequel j’ai enregistré mes 2 fichiers. J’y trouve mon fichier *.html et mon image

Si je double-clique sur le fichier html, mon navigateur s’ouvre et m’affiche mon image cliquable

Si j’ouvre ce fichier html d’un clic droit ouvrir avec « bloc notes » j’obtiens le code html de mon fichier.

Et c’est ce code que je copie et insère sur la page de mon site où cette image s’affichera.

Je réalise tout ça en Html bien entendu !!! (Surtout que je n’y connais rien !!! Mais bon !)

Selon le site, selon la façon de faire de chacun vous trouverez plusieurs codes pour l’insérer

Il faut aussi héberger l’image elle-même en Jpeg sur un serveur et en relever l’url

Pour la partie code, on voit ça en page suivante de façon plus detaillée, pour ceux et celles qui comme moi ne sont pas trop doués(ées)

HAUT de PAGE

 

 

IMAGE CLIQUABLE avec PSP X3 - (2)

Comment inserer mon image multicliquable sur mon site ?

J"ai donc mon fichier htm ouvert par clic droit'ouvrir avec le bloc notes'

Et mon image en JPEG qui est sur un hebergeur - Perso j'utilise Archive-Host

Là pour les débutants comme moi, je vais utiliser des couleurs et des caractères gras

pour que vous vous y retrouviez plus facilement

Mon code htm, Html se présente ainsi et je met en rouge la partie qui va nous interesser

et surligne en vert les 3 <area...> qui sont nos 3 zones sensibles

<html>

<head>

<meta name="Author" content="">

<meta name="Generator" content="PaintShop Photo Pro">

<title> </title>

</head>

<body>

<img name="clic_tuto0" src="clic_tuto.jpg" width="612" height="383" border="0" usemap="#clic_tuto" alt="" />

<map name="clic_tuto">

<area shape="circle" coords="523,71,64"

href="http://coeur-passion-coeur.e-monsite.com/rubrique,mes-tutoriels-psp,1157569.html" target="_blank"

alt="MES TUTORIELS PSP">

<area shape="poly" coords="541,320,521,287,494,264,461,260,441,273,438,289,415,303,403,329,409,341,432,356,465,361,498,357,531,347,543,341" href="http://book.my-guestbook.net/book.php?id=15427" target="_blank" alt="LIVRE D'OR">

<area shape="rect" coords="35,245,152,372" href="http://coeur-passion-coeur.e-monsite.com/contact.html"

target="_blank" alt="CONTACTEZ MOI">

</map>

</body>

</html>

L'Url de mon image sur Archive-Host est

http://www.archive-host.com/link/cc0d76274c4b7aa1a74630758013fe650fcf5f08.jpg

Pour inserer des images sur des pages Web, il existe des codes que vous pourrez trouver sur Google

Je vous en donne 2 que j'ai testés

Pour centrer l’image, il suffira d’ajouter les balises <center> …et </center> au tout début et toute fin de la formule

- Code d'insertion 1 -

<img src="macarte.jpg"alt="carte" usemap=#map/>

ce qui revient à

<center><img src="Url de l’image hebergée"alt="code fichier htm" usemap=#map/></center>

Pour le code Html, je ne recopie pas tout mais seulement la partie rouge ; Ce qui me donne

<center><img src="http://www.archive-host.com/link/cc0d76274c4b7aa1a74630758013fe650fcf5f08.jpg"alt="

<img name="clic_tuto0" src="clic_tuto.jpg" width="612" height="383" border="0" usemap="#clic_tuto" alt="" />

<map name="clic_tuto">

<area shape="circle" coords="523,71,64" href="http://coeur-passion-coeur.e-monsite.com/rubrique,mes-tutoriels-psp,1157569.html" target="_blank" alt="MES TUTORIELS PSP">

<area shape="poly" coords="541,320,521,287,494,264,461,260,441,273,438,289,415,303,403,329,409,341,432,356,465,361,498,357,531,347,543,341" href="http://book.my-guestbook.net/book.php?id=15427" target="_blank" alt="LIVRE D'OR">

<area shape="rect" coords="35,245,152,372" href="http://coeur-passion-coeur.e-monsite.com/contact.html"

target="_blank" alt="CONTACTEZ MOI">

</map> usemap=#map/></center>

Perso sur E-Monsite, j’ai du supprimer usemap=#map/> de la fin

Et voilà mon image mappée est insérée sur mon site

Map 1

Autre formule qui m’a été donnée par un ami pro du Html

- Code Insertion 2 -

<img src="adresse de l’image sur l’hébergeur" border="0"code htm de l’image à partir de usemap=

Ce qui va me donner

<center><img src=" http://www.archive-host.com/link/cc0d76274c4b7aa1a74630758013fe650fcf5f08.jpg " border="0" usemap="#clic_tuto" alt="" />

<map name="clic_tuto">

<area shape="circle" coords="523,71,64" href="http://coeur-passion-coeur.e-monsite.com/rubrique,mes-tutoriels-psp,1157569.html" target="_blank" alt="MES TUTORIELS PSP">

<area shape="poly" coords="541,320,521,287,494,264,461,260,441,273,438,289,415,303,403,329,409,341,432,356,465,361,498,357,531,347,543,341" href="http://book.my-guestbook.net/book.php?id=15427" target="_blank" alt="LIVRE D'OR">

<area shape="rect" coords="35,245,152,372" href="http://coeur-passion-coeur.e-monsite.com/contact.html"

target="_blank" alt="CONTACTEZ MOI">

</map></center>

Map 2

Si je veux que des bulles infos s’affichent sur mes zones réactives, Dans mon code de départ je vais ajouter 3 fois, pour les 3 liens

title="nom-de-la-zone" dans les 3 <area ..>

J’aurais donc

<center><img src=" http://www.archive-host.com/link/cc0d76274c4b7aa1a74630758013fe650fcf5f08.jpg " border="0" usemap="#clic_tuto" alt="" />

<map name="clic_tuto">

<area shape="circle" coords="523,71,64"title="Tutoriels" href="http://coeur-passion-coeur.e-monsite.com/rubrique,mes-tutoriels-psp,1157569.html" target="_blank" alt="MES TUTORIELS PSP">

<area shape="poly" coords="541,320,521,287,494,264,461,260,441,273,438,289,415,303,403,329,409,341,432,356,465,361,498,357,531,347,543,341"

title="Livre d’Or" href="http://book.my-guestbook.net/book.php?id=15427" target="_blank" alt="LIVRE D'OR">

<area shape="rect" coords="35,245,152,372"title="M'écrire" href="http://coeur-passion-coeur.e-monsite.com/contact.html" target="_blank" alt="CONTACTEZ MOI">

</map></center>

Map 3

Oui cela vous semble surement compliqué à lire comme ça, certes et ne vous inquitez pas c'est normal !

En fait il faut bien se concentrer,ne pas être derangé, tout suivre et ce ne sera pas si sorcier ;

la preuve, même moi j'y suis arrivée !!! C'est pour vous dire !

HAUT de PAGE

 

MES TUTORIELS PSP LIVRE D'OR CONTACTEZ MOI

MES TUTORIELS PSP LIVRE D'OR CONTACTEZ MOI

Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site