Tutoriel N°21
Réaliser des images cliquables
1- Difficulté facile à condition de bien suivre les explications.
Pour ce faire nous allons nous servir du logiciel de dessin : Gimp 2.8
Télécharger le logiciel.
Télécharger le logiciel.
2- Réalisation de votre image de base Cette dernière sera placée dans un dossier, pour notre exemple : "images cliquables" dans dossier "Mes Documents" au format JPEG.
cette dernière sera également hébergée ex : sur une page cachée de votre site Jimdo, de manière à noter son adresse URL nécessaire nous le verrons par la suite.
notre exemple.
notre exemple.
1- Ouvrir Gimp 2.8 Faire : Fichier--->Ouvrir--->Document--->images cliquables--->Ouvrir (2clics) votre image s'affiche.

Ensuite : Filtres >> Web >> Image cliquable Web...

3- Sélection de l'image cliquable Sur le tableau qui apparaît l'on observe à gauche les outils de sélection permettant de tracer des zones. Pour cet exemple : sélection rectangulaire ( figure 1 ). La sélection terminée, cliquez sans relâcher pour sélectionner la zone et passer à l'étape suivante.
figure 1
figure 1
4- Créer une sélection d'image et insérer un lien URL Un tableau apparaît ( figure 2) sélectionner :
A- Site Web dans la case correspondante,
B- Inscrire l'URL de votre lien qui s'ouvrira lorsque l'on cliquera sur l'image. La ligne du bas elle, est facultative.
C- cliquer sur "appliquer" "Valider".
Sur le tableau précédent vous constaterez à droite la création de votre zone cliquable. ( figure 3)
Figure 2
Figure 2
figure 3
figure 3
5- Nota : Répéter les opérations 3 et 4 pour chaque zones cliquables que vous souhaitez créer.
6- Enregistrement des zones en fichier HTML Cliquer sur "Enregistrer sous" dans le tableau qui s'affiche , remplacer "sans titre.map" par le titre de votre choix suivi de ( . html ). Ici, pour l' exemple : "test.html" ( figure 4 ) . sélectionner votre dossier ( celui ou se trouve votre image ) de manière à y placer votre fichier html.( figures 4 et 5 et 6 ) N'oublier pas le point entre votre titre et html. et enregistrer en bas à droite.
figure 4
figure 4
figure 5
figure 5
figure 6
figure 6
7- Fermer Gimp 2;8.
8- Ouvrez votre éditeur de texte...Notepad++ fera l'affaire.
la page ouverte cliquer sur fichier---->ouvrir le dossier "images cliquables" ---->double clic sur le fichier html ( que vous avez nommé ) pour mon exemple "test.html"
Le code html s'affiche sur la page Notepad++. ( figure 7 ).
Sur la première ligne du code , remplacer "sans titre" par l'adresse URL de votre image de base que vous avez hébergé ( voir §2 ci-dessus ). Coller cette adresse et enregistrer.
(figure 8)
figure 7 - 1clic pour agrandir
figure 7 - 1clic pour agrandir
figure 8 - 1 clic pour agrandir
figure 8 - 1 clic pour agrandir
9- Copier le code HTML et placer ce dernier sur votre site Jimdo à l'aide du widget/html. enregistrer et voilà !.
10- Nota :Ne multipliez pas plusieurs ensembles d'images cliquables sur une même page web, car dans ce cas des interférences perturbent le système.
11- Infos :Les éditeurs de texte sont des programmes dédiés à l'écriture de code. Ils sont utilisés notamment pour les langages HTML et CSS. Ils sont donc de puissants alliés pour les créateurs de sites web.
Concernant "Notepad++" je vous conseille de faire la manipulation suivante : allez dans le menu "Langage" > H > HTML. Cela permettra au logiciel de savoir que l'on va taper du HTML. Lorsque vous utiliserez le logiciel, il colorera votre code ( figures 7 et 8 ), ce qui vous permettra de vous repérer plus facilement .

jeune femme russe horloge blog
fille russe horloge html

Copyrigh votresiteweb.info - site créé le 25 août 2014 - B JC