|
|
|
|
|
|
communauté : Gadgetothèque
Voir aussi comment réaliser une image cliquable avec The Gimp 
.
Voici une explication sur la façon de faire du mapping avec la suite bureautique libre OpenOffice.org
Ouvrir un nouveau document Open Offixe writer, insérer dedans l'image sur laquelle vous voulez définir des zones cliquables. Faire un clic droit dessus, sélectionner Image Map
Dans la fenêtre qui s'ouvre, choisr la sélection rectangulaire, elliptique, polygonal ou à la main, sélectionner la première zone à rendre cliquable sur l'image et compléter les champs. Le
champ Texte est le contenu de la balise alt, le champ cadre permet de choisir la fenêtre de destination du lien. Dans le champ adresse, on peut mettre l'adresse d'un site web, d'un blog, d'un
fichier ou d'une image (hébergés sur internet)
Définir autant de zones cliquables que voulu puis fermer la fenêtre en cliquant sur oui, appliquer les modifications
Enregistrer le document au format HTML puis l'ouvrir avec un navigateur pour vérifier son bon fonctionnement. Pas besoin de cliquer sur les zones définies, un simple survol à la souris affiche l'adresse du lien dans la barre d'état du navigateur (ici Konqueror )
L'image qui sert de support doit être hébergée sur internet puis il faut dans le code HTML de l'image cliquable le chemin relatif vers l'image sur votre ordinateur par celle, absolue, de la même image hébergée sur internet. Pour cela, ouvrir le document html avec un éditeur de texte ( du type Note-Pad sous windows, textEdit sous Mac OS X, Gedit ou Kate sous Linux ). Repérer à la fin du code HTML le <img src="*****" et remplacer **** par l'url de l'image. Enregistrer.
Il ne reste plus qu'à copier le code compris entre les balises <body> et </body> et à le copier en mode source dans un article ou un module texte libre.
Ce code, comme celui obtenu avec The Gimp, fonctionne pour tous les niveaux de blogs.
En cas d'insertion de plusieurs maps sur une même page, il faut donner à chacune un nom différent à ces niveaux:
<MAP NAME="nom_Map"> au début du code et <USEMAP="#Nom_Map" à la fin
Voici un exemple d'image cliquable réalisée avec OOo writer : (6 des gouttes ouvrent dans un popup des catégories d'un autre de mes blogs )
Voir tous les articles
.Voici une explication sur la façon de faire du mapping avec la suite bureautique libre OpenOffice.org
Ouvrir un nouveau document Open Offixe writer, insérer dedans l'image sur laquelle vous voulez définir des zones cliquables. Faire un clic droit dessus, sélectionner Image Map
Définir autant de zones cliquables que voulu puis fermer la fenêtre en cliquant sur oui, appliquer les modifications
Enregistrer le document au format HTML puis l'ouvrir avec un navigateur pour vérifier son bon fonctionnement. Pas besoin de cliquer sur les zones définies, un simple survol à la souris affiche l'adresse du lien dans la barre d'état du navigateur (ici Konqueror )
L'image qui sert de support doit être hébergée sur internet puis il faut dans le code HTML de l'image cliquable le chemin relatif vers l'image sur votre ordinateur par celle, absolue, de la même image hébergée sur internet. Pour cela, ouvrir le document html avec un éditeur de texte ( du type Note-Pad sous windows, textEdit sous Mac OS X, Gedit ou Kate sous Linux ). Repérer à la fin du code HTML le <img src="*****" et remplacer **** par l'url de l'image. Enregistrer.
Il ne reste plus qu'à copier le code compris entre les balises <body> et </body> et à le copier en mode source dans un article ou un module texte libre.
Ce code, comme celui obtenu avec The Gimp, fonctionne pour tous les niveaux de blogs.
Important
En cas d'insertion de plusieurs maps sur une même page, il faut donner à chacune un nom différent à ces niveaux:
<MAP NAME="nom_Map"> au début du code et <USEMAP="#Nom_Map" à la fin
Pour aller plus loin :
Pour ouvrir les liens dans un popup, il suffit de remplacer dans le code
href="URL" target="destination" ALT="texte">
par un code du type
href="url" onclick=
"window.open(this.href,'','resizable=yes,scrollbars=yes,width=800,height=600,status'); return false" ALT="texte">
(ou exemple ici pour une fenêtre popup 800px*600px avec barres de défilement, redimensionnable.
href="URL" target="destination" ALT="texte">
par un code du type
href="url" onclick=
"window.open(this.href,'','resizable=yes,scrollbars=yes,width=800,height=600,status'); return false" ALT="texte">
(ou exemple ici pour une fenêtre popup 800px*600px avec barres de défilement, redimensionnable.
Voici un exemple d'image cliquable réalisée avec OOo writer : (6 des gouttes ouvrent dans un popup des catégories d'un autre de mes blogs )
Je le dis
- Dewtube
- Download Day 2008 - Firefox3
- un lecteur de musique dans une fenêtre popup
- Un manchot dans la machine ?
- L'affichage du résultat de la recherche sur le blog
- Harmoniser les modules recherche et newsletter
- Les classes des albums et photos seules
- Une mise en page propre...
- Les modules (MaJ V2.1 )
- Les classes des pages
des trucs
|
|
|
Il y a 2 curieux sur ce blog |
|
Me contacter 
Remarque
Les captures d'écran sur ce blog sont réalisées sous Firefox2/Ubuntu, le rendu peut différer avec un autre système d'exploitation et un autre navigateur.
Un peu de musique?
Catégories
Rechercher
Vos remarques