Карта изображений с изменяемым размером с помощью Jquery

Я работаю над созданием личного сайта, и у меня есть изображение с изменяемым размером на моем сайте. Я пытаюсь использовать плагин, ссылка на который приведена здесь, и у меня не получается заставить его работать. Я скопировал Jquery с сайта GitHub и до сих пор не могу заставить его работать. Вот 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:[email protected]?Subject=Contact%20Info%20Page" alt="emailbox">
  <area shape="rect" coords="0,0,82,126" href="mailto:[email protected]?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. Кроме того, если есть лучший способ изменить размер карты, а не то, что я делаю, дайте мне знать. Спасибо!


html jquery css resizable imagemap
person Corbin Long    schedule 02.02.2015    source источник
comment
Изменяемый размер или адаптивный? Две разные вещи.   -  person isherwood    schedule 02.02.2015
comment
Если последнее, я реализовал это с хорошими результатами. Сценарий не нужен. demosthenes.info/blog/696/   -  person isherwood    schedule 02.02.2015
comment
@isherwood Я не уверен в разнице. Я довольно новичок во всем этом. Какая разница между двумя?   -  person Corbin Long    schedule 02.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

Проблема может быть связана с порядком вызова сценариев. Я использовал его ранее, и он работает довольно хорошо. Попробуй это:

    <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/

person NewUser    schedule 11.05.2015