1 click = 1 zone en surbrillance : comment ?
Utilisateur anonyme -
21 réponses
- 1
- 2
La problématique porte sur faire en sorte que, lorsqu'on clique sur le nom d'une commune affichée à côté d'une carte géographique, celle-ci se mette en surbrillance sur la carte. Des solutions techniques ont été proposées, notamment l'emploi de HTML/JavaScript pour changer l'image ou afficher une version en surbrillance lors d'un clic, et la nécessité de découper la carte en images distinctes. D'autres approches évoquent l'utilisation d'événements simples comme onmouseover et onmouseout pour échanger les sources des images, ou la construction d'overlays et de zones cliquables calquées sur la carte. En pratique, les exemples montrent que placer carte et code dans le même répertoire et créer une version surbrillante pour chaque commune, puis déclencher le changement via des liens, simplifie l'implémentation.
Regarde en haut à gauche sur cette page. Lorsque la souris passe au dessus de l'image de la maison, ou celle de l'imprimante etc... l'image se met soudain à changer.
A l'évènement onMouseover la page affiche telle image, avec onMouseout c'en est une autre.
Tu as juste à faire un peu la même chose avec onClick.Mais il faut pour ça que ton image soit découpée en plusieurs images. Et il faut que ces images possèdent leur double en surbrillance dans d'autres fichiers image....
Exemple tu affiches une image de commune comme ceci:
<img src="./commune.jpg" name="Nom_de_commune">
Puis plus loin, tu crées un lien avec le nom de ta commune:
<a href="/" onClick="document.Nom_de_commune.src='./commune_surbrillance.jpg'";>La commune que tu veux</a>
Voilà, c'est assez inspiré de la source de la page où nous sommes, je pense que ça devrait marcher... C'est une solution comme une autre bien sûr....
je vais donc tenter de me rattraper en proposant un truc plus simple (pas d'inquiétude j'aime bien cezs petits bouts de code html !)
en attendant Franck je suis d'accord tu devrais aussi regarder des cours d'html
.
tu dois placer ta carte dans le même répertoire que ton fichier.html, dont le nom est donné avec <img src="nom de la carte"
ainsi la carte sera chargée et affichée.
http://www.kidiwi.com/edoc/tout/zonedetest/2.php
fais affichage->afficher la source pour le code.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionhier j'étais pressé.
alors si tu veux trouver les coordonnées d'une ville, cela dépend du type d'image que tu veux utiliser :
.bmp : paint doit te les fournir quand tu déplaces la souris sur l'image (en bas à droite)
.jpeg Microsoft photo editor sous win98,2000
ou un logiciel de retouche d'images pour tous avec "GIMP 2" (ce que j'ai fait) . téléchargeable =>sur www.gimp.org
attention les coordonnées que tu donnes sont celles du texte mais le Coin HAUT-GAUCHE.
voilà et n'hésite pas, les forums sont là pour aider !
- j'ai repris exactement la source de la carte de france où il y avait paris et dijon;
- j'ai rajouté toutes les communes en fin de texte là où tu l'avais indiqué;
- j'ai mis toutes les cotes de chaque communes indiquées sur paint;
a présent que dois remplacer dans ce meme texte pour insérer ma carte ?
Puis comment créer le tableau où tu marque toutes tes villes ?
a+ merci
franck
- j'ai repris exactement la source de la carte de france où il y avait paris et dijon;
- j'ai rajouté toutes les communes en fin de texte là où tu l'avais indiqué;
- j'ai mis toutes les cotes de chaque communes indiquées sur paint;
a présent que dois remplacer dans ce meme texte pour insérer ma carte ?
Puis comment créer le tableau où tu marque toutes tes villes ?
a+ merci
franck
alors en bref : une fonction sert à répéter un même traitement ;
moi je l'appelle pour insérer une ville (ajout_ville est une fonction). je lui passe des parametres qui sont les coordonnées (x et y) et le nom de la ville.
Cette fonction est définie au début du code, tu n'es pas obligé de t'en occuper, je l'ai faite moi-m^me.
Elle te permet d'ajouter "automatiquement" des villes dans la liste.
De meme le changement de couleur se fait tou seul.
----
ex:
si tu veux insérer une autre ville (Nantes de coordonnées 280,188)
tu écris dans la partie <script ... script> ton appel à la fonction, soit:
ajout_ville(280,188,"Nantes");
C'est tout, la liste sera remplie toute seule et tu n'as rien d'autre à toucher ;-)
pour insérer ta carte,
remplace:
<img border=0 src="france2.gif" alt="carte" name="MonImage">
(france2.gif)
par
<img border=0 src="TA_CARTE" alt="carte" name="MonImage">
(TA_CARTE)
<html>
<head>
<script language=javascript>
var villePred = "";
function ajout_ville(x, y, NomVille)
{
villePred = NomVille;
//calcul de la position de la ville (x et y)
var imgtmp=document.getElementById("MonImage");
x = x+imgtmp.style.left;
y = y+imgtmp.style.top;
//ajout de la ville sur la carte
document.write("<div id='"+NomVille+"' style='position:absolute; top:"+x+"px; left:"+y+"px; background-color:none; border:1px;'>"+NomVille+"</div>");
nouvElt = new Option(NomVille,NomVille,false,true);
document.all.selectVille.options[document.all.selectVille.length] = nouvElt;
}
function change(NomVille)
{
var idVilletmp=document.getElementById(NomVille);
if(villePred != "")
{
document.getElementById(villePred).style.background='none';
}
idVilletmp.style.background='red';<!--couleur à changer-->
villePred = NomVille;
}
</script>
</head>
<body>
<table><tr>
<td>
<img border=0 src=Communes_du_Var.gif" alt="carte" name="MonImage">(Communes_du_var.gif)
</td>
<td>
<select id="MonImage" name="selectVille" size="15" onChange="javascript:change(document.all.selectVille[document.all.selectVille.selectedIndex].text);">
</select>
</td></tr></table>
<!--ici on ajoute les villes avec la fonction ajout_ville, autant qu'on veut-->
<script language=javascript>
ajout_ville(477,388,"Adrets");
ajout_ville(254,289,"Aiguines");
ajout_ville(286,344,"Ampus");
ajout_ville(341,434,"Arcs s/Argent");
ajout_ville(179,312,"Artignosc");
ajout_ville(53,385,"Artigues");
ajout_ville(299,348,"Aups");
ajout_ville(423,392,"Bagnol en foret");
ajout_ville(37,649,"Bandol");
ajout_ville(364,282,"Bargème");
ajout_ville(258,341,"Bargemon");
ajout_ville(126,390,"Barjols");
ajout_ville(401,268,"Bastide");
ajout_ville(187,294,"Baudinard s/Verdon");
ajout_ville(215,297,"Bauduen");
ajout_ville(73,598,"Beausset");
ajout_ville(147,570,"Belgentier");
ajout_ville(215,513,"Besse s/Issole");
ajout_ville(288,601,"Bormes les mimosas");
ajout_ville(336,241,"Bourguet");
ajout_ville(123,444,"Bras");
ajout_ville(359,262,"Brenon");
ajout_ville(168,476,"Brignoles");
ajout_ville(109,411,"Brue-Auriac");
ajout_ville(233,462,"Cabasse");
ajout_ville(9,590,"Cadière d'Azur");
ajout_ville(374,377,"Callas");
ajout_ville(448,342,"Callian");
ajout_ville(182,495,"Camps la Source");
ajout_ville(284,491,"Cannet des Maures");
ajout_ville(234,409,"Carcès");
ajout_ville(219,542,"Carnoules");
ajout_ville(176,667,"Carqueiranne");
ajout_ville(37,578,"Castellet");
ajout_ville(369,608,"Cavalaire s/mer");
ajout_ville(143,492,"Celle");
ajout_ville(312,360,"Chateaudouble");
ajout_ville(134,421,"Chateauvert");
ajout_ville(373,246,"Chateauvieux");
ajout_ville(377,358,"Claviers");
ajout_ville(361,560,"Cogolin");
ajout_ville(273,566,"Collobrières");
ajout_ville(334,300,"Comps s/Artuby");
ajout_ville(169,434,"Correns");
ajout_ville(194,409,"Cotignac");
ajout_ville(192,622,"Crau");
ajout_ville(380,589,"Croix-Valmer");
ajout_ville(175,573,"Cuers");
ajout_ville(323,397,"Draguignan");
ajout_ville(229,412,"Entrecasteaux");
ajout_ville(67,383,"Esparon s/Verdon");
ajout_ville(93,607,"Evenos");
ajout_ville(163,620,"Farlède");
ajout_ville(416,355,"Fayence");
ajout_ville(338,379,"Figuanières");
ajout_ville(224,490,"Flassans s/Issole");
ajout_ville(284,396,"Flayosc");
ajout_ville(174,515,"Forcalqueiret");
ajout_ville(176,368,"Fox-Amphoux");
ajout_ville(449,420,"Fréjus");
ajout_ville(155,639,"Garde");
ajout_ville(330,522,"Garde-Freinet");
ajout_ville(159,520,"Garéoult");
ajout_ville(388,564,"Gassin");
ajout_ville(58,336,"Ginasservis");
ajout_ville(263,518,"Gonfaron");
ajout_ville(365,537,"Grimaud");
ajout_ville(206,642,"Hyères");
ajout_ville(312,627,"Lavandou");
ajout_ville(233,601,"Londe les Maures");
ajout_ville(282,428,"Lorgues");
ajout_ville(262,493,"Luc en Pce.");
ajout_ville(376,262,"Martre");
ajout_ville(297,531,"Mayons");
ajout_ville(90,515,"Mazaugues");
ajout_ville(117,554,"Méounes lès Montrieux");
ajout_ville(196,338,"Moissac-Bellevue");
ajout_ville(351,583,"Molle");
ajout_ville(427,300,"Mons");
ajout_ville(465,351,"Montauroux");
ajout_ville(157,340,"Montmeyan");
ajout_ville(326,335,"Montferrat");
ajout_ville(187,432,"Montfort s/Argent");
ajout_ville(370,410,"Motte");
ajout_ville(378,434,"Muy");
ajout_ville(47,502,"Nans les Pins");
ajout_ville(156,541,"Néoules");
ajout_ville(59,419,"Ollières");
ajout_ville(84,635,"Ollioules");
ajout_ville(211,570,"Pierrefeu du Var");
ajout_ville(248,537,"Pignan");
ajout_ville(5,523,"Plan d'Aups");
ajout_ville(363,503,"Plan de la tour")
ajout_ville(161,394,"Pontevès");
ajout_ville(47,453,"Pourcieux");
ajout_ville(13,424,"Pourrières");
ajout_ville(154,659,"Pradet");
ajout_ville(198,550,"Puget ville");
ajout_ville(417,431,"Puget s/Argent");
ajout_ville(414,576,"Ramatuelle");
ajout_ville(179,330,"Régusse");
ajout_ville(118,609,"Revest les eaux");
ajout_ville(24,366,"Rians");
ajout_ville(36,546,"Riboux");
ajout_ville(178,535,"Rocbaron");
ajout_ville(390,288,"Roque-Esclapon");
ajout_ville(393,457,"Roquebrunne /Argent");
ajout_ville(125,524,"Roquebrussanne");
ajout_ville(343,628,"Royol-Canadel s/mer");
ajout_ville(78,497,"Rougiers");
ajout_ville(192,516,"Saint-Anastasie");
ajout_ville(254,416,"Saint-Antonin du Var");
ajout_ville(5,620,"Saint-Cyr s/mer");
ajout_ville(91,310,"Saint-Julien");
ajout_ville(121,681,"Saint-Mandrier");
ajout_ville(88,389,"Saint-Martin");
ajout_ville(486,431,"Saint-Raphael");
ajout_ville(5,496,"Saint-Zacharie");
ajout_ville(425,542,"Saint-Tropez");
ajout_ville(400,514,"Sainte-Maxime");
ajout_ville(409,375,"saint-Paul en foret");
ajout_ville(232,390,"Salernes");
ajout_ville(195,258,"Salles s/Verdon");
ajout_ville(58,639,"Sanary s/mer");
ajout_ville(75,447,"Saint-Maximin");
ajout_ville(381,317,"Seillans");
ajout_ville(81,422,"Seillons-Source Ag");
ajout_ville(98,659,"Seyne s/mer");
ajout_ville(78,550,"Signes");
ajout_ville(193,384,"Sillans la Cascade");
ajout_ville(47,674,"Six-Four les plages");
ajout_ville(170,598,"Solliès-Pont");
ajout_ville(131,588,"Solliès-Toucas");
ajout_ville(147,606,"Solliès-Ville");
ajout_ville(490,361,"Tanneron");
ajout_ville(337,415,"Taradeau");
ajout_ville(117,633,"Toulon");
ajout_ville(431,336,"Tourrette");
ajout_ville(264,363,"Tourtour");
ajout_ville(107,478,"Tourves");
ajout_ville(253,440,"Thoronet");
ajout_ville(335,414,"Trans en Pce.");
ajout_ville(307,270,"Trigance");
ajout_ville(142,369,"Tavernes");
ajout_ville(163,457,"Val");
ajout_ville(135,624,"Vallette du Var");
ajout_ville(112,369,"Varages");
ajout_ville(116,342,"Verdière");
ajout_ville(245,321,"Vérignon");
ajout_ville(330,476,"Vidauban");
ajout_ville(29,296,"Vinon s/Verdon");
ajout_ville(192,458,"Vins s/Caramy");
ajout_ville(254,386,"Villecroze");
</script>
</body></html>
il ne fallait pas mettre ce qui est entre parenthèses:
<img border=0 src=Communes_du_Var.gif" alt="carte" name="MonImage">(Communes_du_var.gif)
le " (Communes_du_var.gif) ", je l'ai rajouté pour préciser, là il sera affiché sur la page, ce qui n'est pas nécessaires. D plus,
fais attention tu as oublié un apostrophe (") => src="Communes_du_Var.gif"
la source de ton image(son nom ici) est entre " ".
Pour comprendre l'HTML:
le texte écrit simplement est affiché dans la page.
le texte écrit entre <> est interprété = traduit pour l'affichage (ce sont des balises)
donc pour cette image IMG on spécifie son nom, pas de bordures la source et le texte affiché quand la souris passe dessus.
a+
oui :précisément,sous le bloc-notes,
1)tu choisis "tous les fichiers" (ou un truc comme ca) dans "Type de fichier" au lieu de "*.txt".
2)tu fais Sauvegarder Sous, et dans le nom du fichier tu mets ton fichier avec l'extension .html (comme l'a dit killian)
ca devrait aller!
Dans Type de fichier, il y a deux choix
-un qui ressemeble à"*.txt"
-et tu prens l'autre : cela te permettra de donner l'extension que tu veux ;-)
à ce moment tu peux écrire le nom de ton fichier ommunes_du_Var.html
essaie !
si il te dit que le fichier existe déjà ça veut dire que
j'ai une autre idée. Peut-etre que ta carte n'a pas l'eextension .GIF comme la mienne.
Si ton image vient de paint, alors elle a peut etre été enregistrée en .BMP
->sous windows, pour voir les extensions (tous les fichiers ont une extension pour différencier leurs types, et elles n'apparaissent peut-etre pas par défaut chez toi), dans un répertoire, tu cliques sur
Affichage=>Options des dossiers=>affichage=> tu décoches la ligne "afficher les extensions dont le type est connu". Ainsi toutes les extensions seront visibles dans le futur.
Même manip' pour les cacher ,en cochant la case.
---------
maintenant tu dois pouvoir voir l'extension de ton image (son nom complet) avec un .BMP (ou autre) dans son nom.
C'est ce nom-là que tu écris à la place de "Communes_du_Var.gif".
j'espère que tu vas y parvenir ;-)
ps: une question comme ça: dans quel cadre dois-tu réaliser cette carte ? (perso, boulot, études?)
Quel navigateur possèdes-tu?
Internet explorer => peut-être que tu as une ancienne version qui ne comprend pas le "code". =>aujourd'hui on est à la version 6 , tu peux vérifier ta version en lancant Internet explorer puis "?" dans le menu suivi de "A propos de Internet Explorer" :
la version est écrite comme cela :"Version : ...".
Pour avoir la version 6, va sur http://www.microsoft.com/france/internet/produits/ie/default.mspx
--------
ou alors tu peux installer Firefox, un navigateur à la mode en ce moment (que j'utilise): http://www.firefox.fr/windows.htm
Allez Courage !
eh bien le code c'est toutes les lignes (de code) que j'ai écrites, ce qui fait le programme si tu veux.
donc ca ne vient pas de ton navigateur, et ça ne fonctionne tjs pas ?
peux tu reécrire tout ton code afin que je le teste ?
merci !
<html>
<head>
<script language=javascript>
var villePred = "";
function ajout_ville(x, y, NomVille)
{
villePred = NomVille;
//calcul de la position de la ville (x et y)
var imgtmp=document.getElementById("MonImage");
x = x+imgtmp.style.left;
y = y+imgtmp.style.top;
//ajout de la ville sur la carte
document.write("<div id='"+NomVille+"' style='position:absolute; top:"+x+"px; left:"+y+"px; background-color:none; border:1px;'>"+NomVille+"</div>");
nouvElt = new Option(NomVille,NomVille,false,true);
document.all.selectVille.options[document.all.selectVille.length] = nouvElt;
}
function change(NomVille)
{
var idVilletmp=document.getElementById(NomVille);
if(villePred != "")
{
document.getElementById(villePred).style.background='none';
}
idVilletmp.style.background='red';<!--couleur à changer-->
villePred = NomVille;
}
</script>
</head>
<body>
<table><tr>
<td>
<img border=0 src="Communes_du_Var.gif" alt="carte" name="MonImage"><!-- tout/zonedetest/ -->
</td>
<td>
<select id="MonImage" name="selectVille" size="15" onChange="javascript:change(document.all.selectVille[document.all.selectVille.selectedIndex].text);">
</select>
</td></tr></table>
<!--ici on ajoute les villes avec la fonction ajout_ville, autant qu'on veut-->
<script language=javascript>
ajout_ville(477,388,"Les Adrets");
ajout_ville(254,289,"Aiguines");
ajout_ville(286,344,"Ampus");
ajout_ville(341,434,"Les Arcs s/Argent");
ajout_ville(179,312,"Artignosc");
ajout_ville(53,385,"Artigues");
ajout_ville(299,348,"Aups");
ajout_ville(423,392,"Bagnol-en-foret");
ajout_ville(37,649,"Bandol");
ajout_ville(364,282,"Bargème");
ajout_ville(258,341,"Bargemon");
ajout_ville(126,390,"Barjols");
ajout_ville(401,268,"La Bastide");
ajout_ville(187,294,"Baudinard s/Verdon");
ajout_ville(215,297,"Bauduen");
ajout_ville(73,598,"Le Beausset");
ajout_ville(147,570,"Belgentier");
ajout_ville(215,513,"Besse s/Issole");
ajout_ville(288,601,"Bormes-les Mimosas");
ajout_ville(336,241,"Le Bourguet");
ajout_ville(123,444,"Bras");
ajout_ville(359,262,"Brenon");
ajout_ville(168,476,"Brignoles");
ajout_ville(109,411,"Brue-Auriac");
ajout_ville(233,462,"Cabasse");
ajout_ville(9,590,"La Cadière d'Azur");
ajout_ville(374,377,"Callas");
ajout_ville(448,342,"Callian");
ajout_ville(182,495,"Camps-la-Source");
ajout_ville(284,491,"Le Cannet des Maures");
ajout_ville(234,409,"Carcès");
ajout_ville(219,542,"Carnoules");
ajout_ville(176,667,"Carqueiranne");
ajout_ville(37,578,"Le Castellet");
ajout_ville(369,608,"Cavalaire s/mer");
ajout_ville(143,492,"La Celle");
ajout_ville(312,360,"Chateaudouble");
ajout_ville(134,421,"Chateauvert");
ajout_ville(373,246,"Chateauvieux");
ajout_ville(377,358,"Claviers");
ajout_ville(361,560,"Cogolin");
ajout_ville(273,566,"Collobrières");
ajout_ville(334,300,"Comps s/Artuby");
ajout_ville(169,434,"Correns");
ajout_ville(194,409,"Cotignac");
ajout_ville(192,622,"La Crau");
ajout_ville(380,589,"La Croix-Valmer");
ajout_ville(175,573,"Cuers");
ajout_ville(323,397,"Draguignan");
ajout_ville(229,412,"Entrecasteaux");
ajout_ville(67,383,"Esparon s/Verdon");
ajout_ville(93,607,"Evenos");
ajout_ville(163,620,"La Farlède");
ajout_ville(416,355,"Fayence");
ajout_ville(338,379,"Figuanières");
ajout_ville(224,490,"Flassans s/Issole");
ajout_ville(284,396,"Flayosc");
ajout_ville(174,515,"Forcalqueiret");
ajout_ville(176,368,"Fox-Amphoux");
ajout_ville(449,420,"Fréjus");
ajout_ville(155,639,"La Garde");
ajout_ville(330,522,"La Garde-Freinet");
ajout_ville(159,520,"Garéoult");
ajout_ville(388,564,"Gassin");
ajout_ville(58,336,"Ginasservis");
ajout_ville(263,518,"Gonfaron");
ajout_ville(365,537,"Grimaud");
ajout_ville(206,642,"Hyères");
ajout_ville(312,627,"Lavandou");
ajout_ville(233,601,"La Londe-les Maures");
ajout_ville(282,428,"Lorgues");
ajout_ville(262,493,"La Luc en Pce.");
ajout_ville(376,262,"La Martre");
ajout_ville(297,531,"Les Mayons");
ajout_ville(90,515,"Mazaugues");
ajout_ville(117,554,"Méounes-lès Montrieux");
ajout_ville(196,338,"Moissac-Bellevue");
ajout_ville(351,583,"La Molle");
ajout_ville(427,300,"Mons");
ajout_ville(465,351,"Montauroux");
ajout_ville(157,340,"Montmeyan");
ajout_ville(326,335,"Montferrat");
ajout_ville(187,432,"Montfort s/Argent");
ajout_ville(370,410,"La Motte");
ajout_ville(378,434,"Le Muy");
ajout_ville(47,502,"Nans-les Pins");
ajout_ville(156,541,"Néoules");
ajout_ville(59,419,"Ollières");
ajout_ville(84,635,"Ollioules");
ajout_ville(211,570,"Pierrefeu du Var");
ajout_ville(248,537,"Pignan");
ajout_ville(5,523,"Plan d'Aups");
ajout_ville(363,503,"Plan de la tour")
ajout_ville(161,394,"Pontevès");
ajout_ville(47,453,"Pourcieux");
ajout_ville(13,424,"Pourrières");
ajout_ville(154,659,"Le Pradet");
ajout_ville(198,550,"Puget ville");
ajout_ville(417,431,"Puget s/Argent");
ajout_ville(414,576,"Ramatuelle");
ajout_ville(179,330,"Régusse");
ajout_ville(118,609,"Revest-les eaux");
ajout_ville(24,366,"Rians");
ajout_ville(36,546,"Riboux");
ajout_ville(178,535,"Rocbaron");
ajout_ville(390,288,"La Roque-Esclapon");
ajout_ville(393,457,"Roquebrunne s/Argent");
ajout_ville(125,524,"Roquebrussanne");
ajout_ville(343,628,"Le Royol-Canadel s/mer");
ajout_ville(78,497,"Rougiers");
ajout_ville(192,516,"Saint-Anastasie");
ajout_ville(254,416,"Saint-Antonin du Var");
ajout_ville(5,620,"Saint-Cyr s/mer");
ajout_ville(91,310,"Saint-Julien");
ajout_ville(121,681,"Saint-Mandrier");
ajout_ville(88,389,"Saint-Martin");
ajout_ville(486,431,"Saint-Raphael");
ajout_ville(5,496,"Saint-Zacharie");
ajout_ville(425,542,"Saint-Tropez");
ajout_ville(400,514,"Sainte-Maxime");
ajout_ville(409,375,"saint-Paul en foret");
ajout_ville(232,390,"Salernes");
ajout_ville(195,258,"Les Salles s/Verdon");
ajout_ville(58,639,"Sanary s/mer");
ajout_ville(75,447,"Saint-Maximin");
ajout_ville(381,317,"Seillans");
ajout_ville(81,422,"Seillons-Source d'Argens");
ajout_ville(98,659,"La Seyne s/mer");
ajout_ville(78,550,"Signes");
ajout_ville(193,384,"Sillans-la Cascade");
ajout_ville(47,674,"Six-Four-les plages");
ajout_ville(170,598,"Solliès-Pont");
ajout_ville(131,588,"Solliès-Toucas");
ajout_ville(147,606,"Solliès-Ville");
ajout_ville(490,361,"Tanneron");
ajout_ville(337,415,"Taradeau");
ajout_ville(117,633,"Toulon");
ajout_ville(431,336,"Tourrette");
ajout_ville(264,363,"Tourtour");
ajout_ville(107,478,"Tourves");
ajout_ville(253,440,"Le Thoronet");
ajout_ville(335,414,"Trans en Pce.");
ajout_ville(307,270,"Trigance");
ajout_ville(142,369,"Tavernes");
ajout_ville(163,457,"Le Val");
ajout_ville(135,624,"La Vallette du Var");
ajout_ville(112,369,"Varages");
ajout_ville(116,342,"Verdière");
ajout_ville(245,321,"Vérignon");
ajout_ville(330,476,"Vidauban");
ajout_ville(29,296,"Vinon s/Verdon");
ajout_ville(192,458,"Vins s/Caramy");
ajout_ville(254,386,"Villecroze");
</script>
</body></html>
- 1
- 2
A partir de cette carte globale tu crées plein de petites images, une pour chaque region... Il faudra découper ta carte avec un logiciel de tratement d'image. Et pour chacune de ces images-region, tu en crées une nouvelle avec des tons plus rouges ou..comme tu veux, ce sera tes images de surbrillance, il faut qu'elles soient de même taille que les originales).
Sur une page html tu reconstruis ta carte à partir de toutes ces images (celles qui ne sont pas en surbrillance), comme avec un puzzle. Ce sera peut être un peu fastidieux de faire ça directement en code html, essaie avec un logiciel comme dreamweaver (ou n'importe quel logiciel de ce genre).
Après tu retravaille le code html, par exemple pour
Le name sera en quelque sorte le référent de ton image.
Une fois que tu as donné un name à toutes tes images-regions, tu peux t'occuper des liens, par exemple pour le lien qui va vers l'image d'ile de france ça donne:
Je t'explique ce que ça donne: une fois que tu cliques sur ce lien, la page cherche un truc qui a pour nom (notre fameux name) ile_de_france, il trouvera cet endroit, et en changera l'argument "src" pour lui dire de pointer vers une autre image.
Toutes les images seront ensemble dans un coin, et les liens seront ensemble dans un autre coin.
Tu devrais te retrouver avec un paragraphe d'insertion d'image, et un autre paragraphe d'insertion de liens. L'emplacement des liens et des images, ça c'est à toi de choisir. Tu peux, comme je le précisais avant, faire ta mise en page avec un logiciel comme nvu ou deamweaver, puis retoucher le code html après...
Recherche s'il n'existe pas une solution un peu moins lourde, personnelement je ne suis pas spécialiste en la matière.... et je ne voudrais pas te faire découper ta carte pour rien :-)
Je viens de tester ce que je t'ai proposé, apparemment il faut changer:
En:
Dixit la source de cette page :-)
https://www.commentcamarche.net/contents/573-javascript-les-evenements
Désolé, je ne connais pas d'autre methode :-(
- les prendre 1 à1 et leur faire correspondre une meme image d'une couleur différente ;
- les prendre 1 à 1 et leur faire correspondre un lien correspondant à leur nom dont la liste est disposée à coté ;
ok
mais sur quel support dois inscrire tout celà ... ?
je vous rappelle que mon dessin est sur paint.
Merci !