我想制作一个响应式图像，不同的部分映射到不同的链接。为此我使用了 image-maps并编辑了我的形象。但是图像没有响应。我怎样才能做到这一点。请帮帮我好吗？
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>
我正在使用 Bootstrap 模板。
最佳答案
jQuery RWD Image Maps
Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
https://github.com/stowball/jQuery-rwdImageMaps
我没有亲自测试过。但这听起来很有希望。
关于javascript - 使图像响应哪些不同部分有不同的链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28517630/