我正在创建个人网站,我的网站上有一张可调整大小的图片。我正在尝试使用一个插件,已链接 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 也很陌生。另外,如果有更好的方法来调整 map 大小而不是我正在做的,请告诉我。谢谢!
最佳答案
问题可能与您调用脚本的顺序有关。我以前用过它,效果很好。试试这个:
<script src="jquery.rwdImageMaps.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
关于jquery - 使用 Jquery 调整大小的图像映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28281091/