Créer des liens sur des morceaux d'images

02/09-2007 à 18:28Bonjour,
Pour les besoins d'un site internet, j'ai une image d'une région qui comprends trois départements et je dois faire qu'en cliquant sur le département on soit dirigé sur le site du département indiqué.
Je joins mon image pour vous donner une idée


La région limousin

Comment dois-je faire, me faut-il un logiciel supplémentaire. Je vous remercie d'avance.

----------

l'informatique, c'est comme les champignons, pour trouver il faut chercher.

02/09-2007 à 19:39au départ quel est ton logiciel d'autre part avec le logiciel dreamwaver très facile.

----------
@jj@

02/09-2007 à 22:58il y a plusieurs façon de faire en voilà une: copie le code HTML dans ta page :

<img src="file:///E|/Bureau/23967.gif" width="149" height="160" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="91,76,88,76,68,51,60,12,19,23,17,60,5,76,27,85,45,102" href="Hautevienne.htm" />
<area shape="poly" coords="45,102,58,140,101,147,131,105,129,75,93,76" href="coreze" />
<area shape="poly" coords="61,13,65,50,88,76,130,74,137,46,125,8" href="creuse.html" />
</map>

----------
˜šššš˜''°º^v^^v^-= SpectromS =-^v^^v^º°''˜šššš˜
Auvergnat de Paris

03/09-2007 à 08:24Bonjour,
Au départ je n’ai pas dreamwaver, je travaille sous SPIP et j’utilise FrontPage, également notepad++, quand au modèle envoyé par spectroms, je n’ai pas réussi à le faire fonctionner, bien sûr en modifiant l’adresse de l’image pour la bonne.
Merci

----------

l'informatique, c'est comme les champignons, pour trouver il faut chercher.

14/11-2007 à 16:12Bonjour spectroms,
Suite à la réponse plus haut, j'ai créé le logo suivant:
<img border="0" src="IMG/img002.jpg" width="155" height="171"usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="95, 83, 92, 83, 72, 58, 64, 19, 23, 30, 21, 67, 9, 83, 31, 92, 49, 109" href="Hautevienne.htm" />
<area shape="poly" coords="50, 115, 63, 153, 106, 160, 136, 118, 134, 88, 98, 89" href="correze" />
<area shape="poly" coords="66, 20, 70, 57, 93, 83, 135, 81, 142, 53, 130, 15" href="http://www.cgt23.fr/" />
</map><br>
Malheureusement, une fois en ligne, ou en local ça ne fonctionne pas.
De quoi cela provient-il?
Merci d'avance

----------

l'informatique, c'est comme les champignons, pour trouver il faut chercher.

14/11-2007 à 17:50Tu peux créer ce qui s'appelle une image cliquable avec n'importe quel logiciel d'édition (ou simplement le calepin de windows).
Il suffit d'attribuer des coordonnées aux zones actives (pour cela, on peut également se servir d'un logiciel comme irfanview et, à l'aide du curseur, de repérer les zones que l'on veut délimiter.

Exemple de code sur siteordo :
http://www.siteordo.online.fr: tu entres et tu cliques sur "prenez la carte"
ou bien tu regardes directement la source de cette page : http://siteordo.online.fr/plansite.htm


ton image doit être encadrée par les balises suivantes (où tu rempleras nomde... par ce qui convient :

<MAP NAME="nomdecarte">
<IMG SRC="nomdimage.jpg" WIDTH=xxx HEIGHT=xxx USEMAP="#nomdecarte">
...
</MAP>

et dans l'intervalle (...)
tu balises toutes tes zones cliquables avec la syntaxe suivante :
<area shape="yyy" coords="zz,aa,bb..." href="lien" title="titre éventuel du lien">

avec comme forme (yyy) : "circle", "poly", "rect" selon que la zone est un cercle, un polygone ou un rectangle, les coordonnées venant ensuite (coordonnées du centre du cercle et son diamètre, coordonnées des arêtes du polygone, coordonnées du rectangle).

14/11-2007 à 23:24Bonjour et merci pour la réponse,
Dans le code que j'ai posté dans mon message, il me semble bien que c'est ce code là que j'ai utilisé, dans l'éditeur (FrontPage), ça se présente bien, il n'y a qu'en ligne que ça ne fonctionne pas.

----------

l'informatique, c'est comme les champignons, pour trouver il faut chercher.

15/11-2007 à 00:07

il n'y a qu'en ligne que ça ne fonctionne pas.

Déjà, teste en local une nouvelle fois :
mais n'utilise pas la visualiseuse de FrontPage, pour en être sûr, lis les pages que tu as créées directement en tapant leur adresse dans ton navigateur (ou en faisant fichier > ouvrir et en recherchant sur ton disque dur : cela permettra déjà de t'assurer qu'il n'y a pas d'erreur de syntaxe.

La seconde vérification sera de t'assurer qu'il n'y a pas de lien cassé (puisque ça ne marche pas en ligne).
1. Vérifier les liens : ils doivent être relatifs et pas absolus (donc, pas de href="c:\mes documents\..."
ça peut paraître crétin, mais quantité d'apprentis webmestres s'y font encore prendre, il faut dire que les logiciels comme frontpage ou dreamweaver ne font rien pour éviter ce genre d'écueil de débutant)...

2. Vérifier le cheminement des liens : si tes images sont dans un sous-dossier par exemple, vérifier la syntaxe : href="images/image.jpg"

3. vérifier le bon sens des "/" (pas de "\" comme avec windows ! là aussi, piège de débutant, mais ça va mieux en le disant.

4. vérifier enfin la typographie : un lien du type href="monimage.jpg" pointant vers Monimage.jpg ou Monimage.JPG marchera en local avec windows (parce que windows est insensible à la casse) mais PAS sur le site web qui utilise un environnement unix.

5. en testant ton image cliquable en ligne, affiche la source (pour voir, déjà, si le fichier htm a bien été correctement et complètement recopié).

6. fais par ailleurs un clic droit sur l'image cliquable pour voir ses caractéristiques : si l'image que tu as envoyée n'est pas la même (ou si ses dimensions ont changé), les liens cliquables ne marcheront pas.

7. passe ta souris sur les liens cliquables : s'ils fonctionnent, avant même de cliquer, ils doivent t'afficher la mention que tu as indiquée dans le tag "title=" de tes liens (c'est pourquoi il est toujours recommandé de l'indiquer).
Si tu utilises un navigateur comme Opera (mais j'imagine qu'on peut le faire avec d'autres), un passage de la souris doit t'afficher EN CLAIR (soit en popup dans l'image, soit en bas, dans la barre d'état), l'adresse exacte de ton lien : là aussi, c'est un bon moyen de vérifier assez vite s'il n'y a pas un pb de ce côté-là...

8. Enfin, last but not least, as-tu au moins pensé à télécharger sur ton site, en plus de la page, les diverses images y afférentes... (et bien sûr les pages de lien...) parce que sinon, comme disait Bourvil, "forcément, ça marchera beaucoup moins bien"...

15/11-2007 à 06:04il y a une façon de faire toute béte

il suffit de créé un gif transparent puis de positionner le gif sur l'image a l'endrois ou l'on veut et d'y coller un lien


tu n'y vois que tu feu

c'est pratique puisque tu peut utiliser toujours la meme image qui ne sera qu'une seule fois sur ton site, la taille de l'image etant geré par le HTML

si tu na pas de GIF transparent en voila un

il ce trouve juste entre les fleches, il te suffit de faire un clic droit entre ces fleches et de choisir "enregistré l'image sous"

>>>><<<<<<

c'est normal que tu ne vois rien entre les fléches puisque le gif est transparent, mais il est bien la

----------

http://spiralbol.free.fr
http://humeur.forum-actif.net/
WINBUNTU ou UBUNDOW j'ésite....

15/11-2007 à 17:47Bonjour,
J'ai beau vérifier je ne vois pas, étant apprenti webmestre, ça c'est vrai, j'ai bobo à la tête, tant pis, je renonce, je voulais bien faire, mais même avec le gif transparent je n'y arrive pas.
Enfin, je vous remercie à tous les deux.
@+

----------

l'informatique, c'est comme les champignons, pour trouver il faut chercher.

15/11-2007 à 18:58

J'ai beau vérifier je ne vois pas,

Dans ce cas, le plus simple : donne-nous l'adresse de la page qui te pose problème.
En épluchant son code, on devrait assez vite découvrir où ça cloche.

15/11-2007 à 19:32Merci,
voilà la page, le site est en construction, il n'est officiel.
http://www.cgt23.fr/CRlimousin/

----------

l'informatique, c'est comme les champignons, pour trouver il faut chercher.