Javascript 使图像响应哪些不同部分有不同的链接？_Javascript_Html_Css_Twitter Bootstrap

Javascript 使图像响应哪些不同部分有不同的链接？

javascript html css twitter-bootstrap

Javascript 使图像响应哪些不同部分有不同的链接？,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我想使一个图像的不同部分映射到不同的链接。为此，我使用并编辑了我的图像。但这一形象没有反应。我怎样才能做到这一点。请帮帮我 html代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

我想使一个图像的不同部分映射到不同的链接。为此，我使用并编辑了我的图像。但这一形象没有反应。我怎样才能做到这一点。请帮帮我

html代码如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tangelo Town</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">


  </head>
  <body>

    <!--  <div class="container">
      <div class="row text-center">
        <div class="col-md-12 lfont">
            <p>Tangelo Town</p>
        </div>
      </div>
     </div> -->

         <img id="mainlogo" class="img-responsive center-block" src="image/mainlogo.png" border="0" width="3256" height="875" orgWidth="3256" orgHeight="875" usemap="#mainlogo" alt="" />

    <map name="mainlogo" id="ImageMapsCom-mainlogo">

      <area  alt="" title="main" href="http://www.image-maps.com/" shape="poly" coords="802.75,359,870.75,581,1898.75,589,1948.75,751,2517,750,2493,587,2320,537,2327,350" style="outline:none;" target="_self"     />

      <area shape="rect" coords="3254,873,3256,875" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />

      <area  alt="" title="home" href="http://www.image-maps.com/" shape="poly" coords="275,3,302,84,501,174,810,205,378,80" style="outline:none;" target="_self"     />

      <area  alt="" title="home2" href="http://www.image-maps.com/" shape="poly" coords="9,63,11,100,105,175,301,217,493,228,516,209,488,182,97,118" style="outline:none;" target="_self"     />

      <area  alt="" title="home3" href="http://www.image-maps.com/" shape="poly" coords="62,211,72,245,162,297,409,311,509,296,531,259" style="outline:none;" target="_self"     />

      <area  alt="" title="home4" href="http://www.image-maps.com/" shape="poly" coords="109,352,183,407,311,418,531,360,546,325,154,330" style="outline:none;" target="_self"     />

      <area  alt="" title="home5" href="http://www.image-maps.com/" shape="poly" coords="158,462,157,497,198,529,404,489,556,426,557,370" style="outline:none;" target="_self"     />


      <area  alt="" title="home6" href="http://www.image-maps.com/" shape="poly" coords="241,579,291,623,393,603,557,512,579,443,382,513" style="outline:none;" target="_self"     />

      <area  alt="" title="home7" href="http://www.image-maps.com/" shape="poly" coords="313,681,315,679,376,712,510,633,604,542,611,503,428,592" style="outline:none;" target="_self"     />

      <area  alt="" title="home8" href="http://www.image-maps.com/" shape="poly" coords="411,725,409,760,445,785,513,756,594,674,638,615,642,566,623,563" style="outline:none;" target="_self"     />

      <area  alt="" title="home9" href="http://www.image-maps.com/" shape="poly" coords="496,799,500,828,531,835,623,757,663,697,678,639,668,620" style="outline:none;" target="_self"     />

      <area  alt="" title="home10" href="http://www.image-maps.com/" shape="poly" coords="588,855,615,871,655,841,717,707,716,668,683,680,593,823" style="outline:none;" target="_self"     />

      <area  alt="" title="home1" href="http://www.image-maps.com/" shape="poly" coords="2450,206,2600,196,2754,177,2946,85,2978,45,2983,11,2905,77,2567,163" style="outline:none;" target="_self"     />

      <area  alt="" title="home2" href="http://www.image-maps.com/" shape="poly" coords="2744,212,2766,228,2948,220,3147,178,3241,114,3250,72,3233,67,3140,126,2843,168,2770,186" style="outline:none;" target="_self"     />

      <area  alt="" title="home3" href="http://www.image-maps.com/" shape="poly" coords="2724,258,2730,282,2761,296,2868,309,2983,310,3074,301,3145,275,3199,228,3194,209,2791,245" style="outline:none;" target="_self"     />

      <area  alt="" title="home4" href="http://www.image-maps.com/" shape="poly" coords="2715,319,2840,332,2951,328,3101,328,3152,351,3074,405,2949,419,2825,398,2731,356,2714,338" style="outline:none;" target="_self"     />

      <area  alt="" title="home5" href="http://www.image-maps.com/" shape="poly" coords="2695,377,2712,372,2865,422,3009,457,3091,460,3099,501,3057,532,2931,517,2724,433,2702,408" style="outline:none;" target="_self"     />

      <area  alt="" title="home5" href="http://www.image-maps.com/" shape="poly" coords="2701,379,2714,426,2815,474,2894,502,3039,530,3099,500,3094,457" style="outline:none;" target="_self"     />

      <area  alt="" title="home6" href="http://www.image-maps.com/" shape="poly" coords="2683,447,2677,461,2688,492,2698,502,2748,531,2853,594,2907,616,2960,630,2997,616,3017,606,3017,577,2842,502" style="outline:none;" target="_self"     />

      <area  alt="" title="home7" href="http://www.image-maps.com/" shape="poly" coords="2649,507,2653,539,2719,606,2798,658,2859,703,2920,710,2943,688,2920,653,2760,559,2673,501" style="outline:none;" target="_self"     />

      <area  alt="" title="home8" href="http://www.image-maps.com/" shape="poly" coords="2620,562,2626,613,2665,672,2722,728,2762,766,2829,782,2853,760,2850,731,2703,614" style="outline:none;" target="_self"     />

      <area  alt="" title="home9" href="http://www.image-maps.com/" shape="poly" coords="2585,619,2600,618,2649,668,2769,792,2740,836,2694,814,2631,751,2598,686" style="outline:none;" target="_self"     />

      <area  alt="" title="home10" href="http://www.image-maps.com/" shape="poly" coords="2544,670,2544,700,2573,796,2633,871,2661,866,2676,842,2580,693,2565,669" style="outline:none;" target="_self"     />
    </map>


    <!-- Image Map goes here -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
        var x = 0;
        setInterval(function(){
            x-=1;
            $('body').css('background-position', '0 ' + x + 'px');
            // $('body').css('background-position', '0 ' + x + 'px');
            // x+=1;
            // $('body').css('background-position', '0 ' + x + 'px');
        }, 5);
    })
    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


坦盖洛镇
$（函数（）{
var x=0；
setInterval（函数（）{
x-=1；
$（'body'）.css（'background-position'，'0'+x+'px'）；
//$（'body'）.css（'background-position'，'0'+x+'px'）；
//x+=1；
//$（'body'）.css（'background-position'，'0'+x+'px'）；
}, 5);
})

我正在使用引导模板

jQuery RWD图像映射

允许通过重新计算在响应设计中使用图像贴图面积坐标与加载时的实际图像大小相匹配，并且 window.resize

我没有亲自测试过。但这听起来很有希望