Question

我正致力于创建个人网站，并且我的网站上有可调整大小的图片。我试图使用一个链接here的插件，而我似乎无法使其正常工作。我复制从GitHub网站粘贴Jquery仍然无法使其工作。这是我的主页HTML代码。

<img src="contact.png" id="contact" height="862" width="1299" usemap="map1" alt="" />

<map name="map1">
  <area shape="rect" coords="178,268,285,373" href="http://twitter.com/TheCorbinLong" alt="twitterbox">
  <area shape="rect" coords="294,296,571,338" href="" alt="twittertext">
  <area shape="rect" coords="174,493,284,604" href="sun.htm" alt="instagrambox">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="instagramtext">
  <area shape="rect" coords="0,0,82,126" href="http://youtube.com/gamersgearreviews" alt="ytbox">
  <area shape="rect" coords="0,0,82,126" href="ttp://youtube.com/gamersgearreviews" alt="yttext">
  <area shape="rect" coords="173,721,283,832" href="http://medium.com/@TheCorbinLong" alt="blogbox">
  <area shape="rect" coords="0,0,82,126" href="http://medium.com/@TheCorbinLong" alt="blogtext">
  <area shape="rect" coords="0,0,82,126" href="mailto:corbin@long-family.org?Subject=Contact%20Info%20Page" alt="emailbox">
  <area shape="rect" coords="0,0,82,126" href="mailto:corbin@long-family.org?Subject=Contact%20Info%20Page" alt="emailtext">
</map>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
  $(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();

  });
</script>

我在控制台中也收到一条错误消息，说......

[Error] TypeError: undefined is not a function (evaluating '$('img[usemap]').rwdImageMaps()')
    (anonymous function) (homepage.html, line 50)
    c (jquery.min.js, line 4)
    fireWith (jquery.min.js, line 4)
    ready (jquery.min.js, line 4)
    q (jquery.min.js, line 4)

另外，我有这个代码调整图像大小。

display: none;
position: absolute;
padding-top: 15px;
top:18%;
left: 20%;
right: 20%;
height: auto;
width: 60%;
overflow: scroll;

我似乎无法弄清楚如何调整图片地图大小并且无法理解错误消息。我对Jquery也很新。此外，如果有更好的方法让地图调整大小而不是我在做什么，请告诉我。谢谢！

Answer 1

问题可能与您调用脚本的顺序有关。我以前用过它，效果很好。试试这个：

    <script src="jquery.rwdImageMaps.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

或https://jsfiddle.net/

使用Jquery调整大小的图像映射

1 个答案: