rendre une carte cliquable ?

**razily** · 27/04/2012, 16h44

Bonjour à tous ;
voila je tente de suivre un tuto trouvé sur un autre site.

j'ai suivi et travaillé sur photoshop pour les images sauf que voilà j'ai quelque problème , c'est qu'après mis des fonds (background) l'image n'est plus cliquable et je ne pourrai pas avoir l'index , alors je ne sais pas ce qui se passe est ce dû à des images qui ne sont pas transparent etc ?????
d'abord voici mes images avec le tuto :

dans mon dossier :
j'ai :

map.png une carte avec étendue où il y a chaque province : image map avec les provinces
http://hpics.li/11788d9

image void ou je me base pour l'image cliquable :

http://hpics.li/bb1b77d

voici le code qui va avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>mappin</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
 
	 <script type="text/javascript">
 
		 jQuery(function($){
 
 
    /* on rajoute une classe overlay */
     $('.map').append('<div class="overlay">');
 
 
 
 
       /*on detecte si la souris passe */
      $('.map area').mouseover(function(){
 
 
      /* on capte l'index de la carte cliquable */
      var index = $(this).index();
        alert('je suis la' );
 
      }); 
 
 
 
 
			 });
 
	 </script>
</head>
<body>
 
 <div class="map">
 
 
 
  <img src="void.png" width="296" height="503" border="0" usemap="#map" alt=""/>
 
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
 
<area shape="poly" coords="162,426,155,422,152,425,152,429,148,433,147,430,132,415,133,395,120,379,100,386,100,394,88,389,93,370,96,370,96,356,99,352,101,350,101,345,104,345,105,343,106,336,111,331,112,315,114,313,114,304,113,291,111,288,113,281,113,273,112,265,110,264,103,251,106,234,88,231,83,236,83,238,89,251,88,255,90,264,75,267,65,262,70,272,68,280,71,293,57,314,53,325,49,338,39,338,39,344,35,355,35,366,33,372,37,387,44,395,47,403,49,406,48,436,57,447,57,455,61,455,62,463,73,466,73,469,83,470,97,479,103,478,121,468,131,465,142,464,156,455,159,439,162,428,156,423,151,424" href="tulear.png" />
<area shape="poly" coords="199,304,195,303,189,299,184,304,174,305,171,300,173,295,172,291,165,293,159,292,156,296,149,296,147,299,137,299,132,297,129,297,127,291,123,292,118,288,111,288,114,309,112,321,111,330,106,336,105,343,101,346,102,351,96,354,97,367,96,371,89,387,100,394,101,387,117,379,122,381,130,392,132,396,133,414,132,417,145,428,147,432,151,428,153,424,156,422,164,427,166,424,168,415,171,405,172,395,175,388,176,380,177,370,183,355,187,350,190,340,190,332,197,319,197,311,199,303,195,304,189,299,189,300" href="fianara.png" />
<area shape="poly" coords="179,221,171,223,165,221,160,215,155,217,151,218,146,216,136,215,126,220,119,218,113,232,107,233,105,240,104,252,108,264,112,266,114,277,114,286,123,291,126,292,129,297,146,299,151,297,157,296,160,291,165,294,169,292,178,286,178,276,180,270,181,269,180,263,181,246,183,227,180,222,174,222,171,222" href="tana.png" />
<area shape="poly" coords="187,92,190,90,192,95,201,97,209,99,218,99,223,103,228,109,231,115,235,122,235,125,232,125,230,131,228,132,219,137,217,137,219,144,218,152,218,156,217,161,222,168,213,182,209,180,206,183,204,183,203,174,195,168,187,166,181,168,181,181,188,194,189,201,181,221,172,222,161,216,159,216,154,219,150,218,137,215,125,220,120,217,114,230,110,233,104,233,90,231,83,235,87,247,88,253,91,260,90,265,79,267,70,263,65,262,62,261,62,249,57,233,56,228,55,215,51,205,68,178,66,165,80,166,85,159,94,154,95,158,103,158,105,159,106,149,117,150,124,148,126,156,130,157,131,149,128,146,129,142,145,131,146,132,146,140,146,144,157,139,152,128,158,123,159,121,162,128,165,126,175,109,173,102,174,98,180,97,180,94,185,94,189,91,190,90,192,94,195,95,196,95" href="mahajanga.png" />
<area shape="poly" coords="199,304,206,293,211,271,222,243,227,221,227,200,234,186,241,162,236,158,233,140,242,134,246,134,247,144,250,142,249,133,250,131,246,128,241,127,235,125,232,125,231,126,228,131,223,135,217,138,218,156,216,162,222,166,220,174,214,181,209,181,206,184,203,182,203,175,197,169,188,167,181,168,181,183,188,196,186,210,180,222,182,226,182,242,181,255,181,272,177,280,173,292,173,296,172,304,182,305,189,299,198,304,203,299,206,293,206,289" href="tamatave.png" />
<area shape="poly" coords="257,146,262,134,261,128,253,109,250,103,253,99,248,71,244,60,238,48,236,49,232,43,224,23,221,29,215,34,212,38,212,43,214,47,212,58,209,60,209,65,205,70,198,71,196,74,195,75,196,79,192,82,187,79,182,73,179,77,177,83,183,86,184,91,185,94,190,90,193,95,203,95,210,99,217,99,228,107,229,112,234,120,239,127,247,128,250,133,249,142,247,145,253,153,258,151,257,146,260,139,262,134" href="antsiranana.png" />
</map>
 
 
 
 
 
 </div>
 
 
 
 
</body>
</html>

le résultat c'est que j'ai pas l'alert('je suis la ') ni meme la zone cliquable

est ce que quelqu'un a une idée ???

voici le css qui va avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 
.map
{
 width: 296px;
 height: 503px;
 
 background: url(map.png)left top no-repeat;
 position: relative;
 
}
 
 
 
 .map .overlay{
 
 width: 296px;
 height: 503px;
 
 background : url(map.png)296px top no-repeat;
 
 position: absolute;
 top: 0;
 left: 0;
 
}

merci

**SpaceFrog** · 27/04/2012, 16h46

http://www.developpez.net/forums/d12...ive-cliquable/

**razily** · 27/04/2012, 16h59

Bonjour ;

si j'ai déjà parcouru çà sauf que voilà ; je ne sais pas comment changer l'url pour chaque province en javascript
alors que dans le tuto on pourra le changer facilement via css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
.overlay{
 
 width: 296px;
 height: 503px;
 
/* on mettant par exemple -296px i-e on décale de 296px */
 background : url(map.png)296px top no-repeat;
 
 position: absolute;
 top: 0;
 left: 0;
 
}

Non c'est réglé ; c'est l'image de fond qui n'est pas transparent !!

rendre une carte cliquable ?

jQuery

Discussions similaires

Partager

Partager