Changer le contenu d'une div en fonction du clic sur une map

**linBlinG** · 21/02/2014, 18h58

Bonsoir !

J'aimerais votre aide, j'ai une image map dans une div, et j'aimerais changer le contenu d'une autre div (dans la meme page) en fonction du clic à tel ou tel endroit en chargeant le contenu d'une div qui se trouve sur une autre page (que l'on affiche pas, mais elle existe au cas ou js n'est pas activé, et on serait donc redirigé vers cette page).
Le contenu à ramener est une image.

Je pense qu'il faut utiliser javascript, j'ai trouvé ça :

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
<script>
          $(document).ready(function () {
 
              /* Au clic sur un élément de menu... */
              $('#menu li a').click(function (event) {
 
                  /* On récupère l'url du lien sur lequel on vient de cliquer. */
                  var url = $(this).attr('href');
 
                  /*
                   * Dans notre bloc #content, on injecte le contenu
                   * de la page ciblée (par le href) en se limitant
                   * à ce qui est dans le bloc #content.
                   */
                  $('#content').load(url + " #content");
 
                  /*
                   * On évite le comportement par défaut qui est de 
                   * nous envoyer sur la page donnée dans le href).
                   */
                  event.preventDefault();
              });
 
          });
    </script>

que j'ai essayé d'adapter en changeant le #menu li a par 'map area href' mais ca ne fonctionne pas.
J'aimerais surtout savoir si quelque chose de ce genre marche sur une map, si elle peut etre considerée comme un menu.

Voici le code html,

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
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery/jquery.imagemapster.js"></script>
    <link href="crewaccstyle.css" rel="stylesheet" />
    <link href="CSS/ligneH.css" rel="stylesheet" />
 
        <!--<script src="jquery/jquery-1.11.0.js"></script>-->
    <script src="jquery.fittext.js"></script>
    <script src="jquery.lettering.js"></script>
    <script src="jquery.textillate.js"></script>
    <link href="animate.css" rel="stylesheet" />
    <title></title>
</head>
<body>
      <script type="text/javascript">
          $(function () {
              $('.tlt').textillate();
          })</script> 
    <h1 class="tlt" data-in-effect="shake" > ALL STYLES CREW </h1>
    <div class="ligne1"></div>
<div class="content"><div/>
<div class="contain">
    <img class="crew" src="images/frontcrew.jpg" width="960" height="652" border="0" usemap="#map" />
 
<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 -->
<!-- #$AUTHOR:Li Na -->
<area alt="Snoop" data-name="Snoop" shape="poly" coords="394,111,404,98,407,93,396,74,394,64,407,69,413,68,407,41,407,27,410,19,427,15,473,15,485,23,482,33,484,65,493,63,500,68,501,76,496,86,493,92,489,98,499,108,510,117,514,121,504,127,499,128,506,136,504,143,497,155,498,160,517,170,535,180,545,188,550,203,563,235,572,328,569,336,565,347,560,356,554,377,550,389,545,403,533,419,524,421,521,419,512,428,446,442,390,441,371,431,368,424,361,422,346,376,338,341,337,308,339,234,346,205,362,186,409,163,412,154,406,147,406,137,406,133,398,135,394,112,395,112" onclick="" href="snoop.html" />
<area alt="Wesley" shape="poly" coords="547,186,543,174,547,165,546,154,545,144,542,138,534,134,528,130,525,130,529,122,538,116,539,106,544,83,552,73,562,71,569,71,580,68,594,70,609,94,616,103,629,111,632,117,630,121,621,124,619,130,617,142,620,150,612,157,610,166,610,176,615,185,641,195,666,207,673,212,682,237,686,255,688,292,688,317,686,346,683,367,678,383,665,398,665,410,661,418,659,424,668,443,652,458,618,462,608,462,594,465,588,460,586,465,550,461,541,460,537,451,528,432,527,427,545,407,564,355,575,330,572,303,566,238,560,218,548,187" href="http://wesley" />
<area alt="David" shape="poly" coords="250,241,268,224,301,205,304,204,300,195,304,182,304,160,301,136,301,122,316,99,323,94,321,90,326,87,332,85,339,90,341,84,345,91,348,91,358,97,367,103,372,111,378,131,387,150,391,169,389,170,366,184,347,202,338,241,336,318,344,380,360,424,364,427,369,432,364,442,347,446,336,450,322,449,312,447,292,443,270,433,267,428,271,413,261,404,257,371,248,356,240,331,236,288,243,244,243,245" href="http://david" />
<area alt="Bene" shape="poly" coords="264,445,264,457,257,466,240,472,219,476,211,471,203,462,198,454,194,469,196,478,179,477,156,469,140,454,140,433,140,428,135,413,133,402,119,397,110,380,112,351,112,318,118,283,133,260,150,246,170,239,181,233,185,226,187,220,186,209,177,201,180,191,180,179,186,160,188,150,201,143,222,142,229,148,236,154,239,168,242,185,240,196,246,193,248,197,245,206,241,213,235,211,233,219,234,231,239,237,243,240,238,268,233,293,235,305,236,325,243,351,248,365,255,369,266,414,264,448" href="http://bene" />
<area alt="Mixay" shape="poly" coords="136,256,113,243,108,231,105,222,105,216,108,212,115,208,118,199,118,191,118,186,118,183,116,180,115,167,109,156,99,149,91,146,88,145,79,142,79,145,60,149,55,160,48,180,50,194,50,204,58,214,64,223,61,240,55,242,14,277,8,312,8,354,18,383,24,407,28,414,27,441,26,455,58,460,59,464,75,468,95,463,101,457,128,453,138,449,140,433,135,419,133,402,117,399,109,376,110,329,114,287,135,255,126,248" href="http://mixay" />
<area alt="Joce" shape="poly" coords="672,210,676,203,682,197,686,193,686,178,685,175,677,169,673,161,671,155,674,150,673,134,673,122,683,109,687,103,693,97,696,97,699,92,705,92,711,94,721,97,728,95,728,101,738,104,748,115,747,134,747,145,749,150,746,163,743,172,737,181,731,188,733,200,740,204,743,212,754,212,789,236,796,247,800,258,804,315,803,351,798,371,787,399,784,407,779,423,776,439,778,447,698,458,699,453,691,459,674,455,668,449,663,433,660,426,667,411,664,401,683,379,690,337,692,302,690,265,688,248,684,236" href="http://joce" />
<area alt="Ibra" shape="poly" coords="796,241,820,227,828,225,834,217,838,211,838,200,833,193,832,196,828,191,828,181,826,200,823,195,826,178,828,171,830,152,832,138,861,122,878,126,896,137,904,150,899,184,895,209,890,212,892,222,898,224,922,237,945,251,950,256,951,286,945,354,933,376,933,401,935,440,925,465,924,479,891,488,855,485,840,483,807,479,786,473,787,449,780,435,785,423,782,420,805,354,805,336,805,296,803,269,798,242" href="http://ibra" />
</map>  </div>
      <script type="text/javascript">
          $('.crew').mapster({
              fill:false,
              stroke: true,
              strokeWidth: 2,
              strokeColor: 'ffffff',
              singleSelect: true
          });
 
 
 
<!--<script>
          $(document).ready(function () {
 
              /* Au clic sur un élément de menu... */
              $('#map area').click(function (event) {
 
                  /* On récupère l'url du lien sur lequel on vient de cliquer. */
                  var url = $(this).attr('href');
 
                  /*
                   * Dans notre bloc #content, on inject le contenu
                   * de la page ciblée (par le href) en se limitant
                   * à ce qui est dans le bloc #content.
                   */
                  $('#content').load(url + " #contain");
 
                  /*
                   * On évite le comportement par défaut qui est de 
                   * nous envoyer sur la page donnée dans le href).
                   */
                  event.preventDefault();
              });
 
          });
    </script>-->
 
</body>
</html>

Merci beaucoup !

**linBlinG** · 21/02/2014, 19h02

Ou est-ce qu'il ne vaudrait mieux pas que je fasse un simple slider fixe avec plusieurs images miniatures pour faire uen sorte de menu et que j'oublie la map ?

Changer le contenu d'une div en fonction du clic sur une map

jQuery

Vue hybride

Discussions similaires

Partager

Partager