Вопросы Теги

HTML-карта, отображающая текст вместо ссылки на URL-адрес [дубликат]

Это одно из мест, с помощью которого привязка данных, используемая во многих новых фреймворках JavaScript, будет очень полезна для вас ...

Итак, если вы используете Angular, React или любые другие фреймворки, которые делают два способа связывания данных, эта проблема просто исправлена ​​для вас, поэтому простым языком ваш результат undefined на первом этапе, поэтому вы получили result = undefined до получения данных, а затем, как только вы получите результат , он будет обновляться и присваиваться новому значению, которое отвечает на ваш вызов Ajax ...

Но как вы можете сделать это в чистом javascript или jQuery, например, как вы задали этот вопрос?

Вы можете использовать обратный вызов, обещание и недавно наблюдаемое, чтобы обрабатывать его для вас, например, в обещаниях мы имеем некоторые функции, такие как success () или then (), которые будут выполняться, когда ваши данные будут готовы для вас, с функцией обратного вызова или подписки на наблюдаемые.

Например, в вашем случае, в котором вы используете jQuery, вы можете сделать что-то вроде этого: 

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});

Для получения дополнительной информации n изучение обещаний и наблюдаемых, которые являются новыми способами для создания асинхронных материалов.

19
задан danyo 28 April 2015 в 14:15
поделиться

7 ответов

Обратите внимание:

  1. Атрибут href является обязательным, без него тег области ничего не делает!
  2. Чтобы добавить событие click, вам нужно заблокировать значение по умолчанию href.

Ваш код должен начинаться следующим образом: 

$(".blue").on("click", function(e){
    e.preventDefault();
    /*
       your code here
    */
});

Здесь показан живой пример.

25
ответ дан user 27 August 2018 в 02:45
поделиться

Попробуйте: 

<img  src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map">

<map name="map">
 <area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile">
</map>

Вы не хотите добавлять onClick события в область, документация:

Тег определяет область внутри изображения, map (изображение-карта - это изображение с интерактивными областями).

Редактирование: ваши координаты немного странны с тех пор, как предполагается, что пары каждой вершины (так что теперь ваш многоугольник строка)

1
ответ дан Jules 27 August 2018 в 02:45
поделиться

Я нашел этот вопрос с помощью @TimorEranAV HTML-карты, которая отображает текст вместо ссылки на URL и была отмечена как дубликат, но я думаю, что он ожидал это, 

<html>
<head>
 <title> Program - Image Map</title>
</head>
<body>


 <img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" title = "Sun">
  <area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">

</map>

</body>
</html>

Здесь тег title дает возможность добавить текст изображения (подсказка) к карте изображения.

0
ответ дан MLPJ 27 August 2018 в 02:45
поделиться

На основании ваших комментариев вам просто нужно: 

$("#image").click( function(){
 alert("clicked");
//your code here
});

Демонстрация:

http://codepen.io/tuga/pen/ waBQBZ

2
ответ дан Pedro Lobito 27 August 2018 в 02:45
поделиться

Это простой: 

<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">
Или для любого другого кода: 

<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">

0
ответ дан TimorEranAV 27 August 2018 в 02:45
поделиться

Его форма является проблемой. Ваш код имеет форму, равную полигону, но имеет только 4 точки в атрибуте координат. Вместо этого вам нужно установить форму на прямоугольник.

Установите shape = "rect" следующим образом:

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" > <map name="Map"> <area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#"> </map>

0
ответ дан treeFan 27 August 2018 в 02:45
поделиться

Используйте класс для всех элементов, которые вы хотите прослушать, и необязательно атрибут для поведения: 

<map name="primary">
  <area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
  <area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
<div class='popup hidden'></div>

Затем добавьте слушателей событий ко всем элементам в классе: 

const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;

popable.forEach(elem => elem.addEventListener('click', togglePopup));

function togglePopup(e) {
  popup.innerText = e.target.dataset.text;

  // If  clicking something else, first restore '.hidden' to popup so that toggle will remove it.
  if (lastClicked !== e.target) {
    popup.classList.add('hidden');
  }
  popup.classList.toggle('hidden');
  lastClicked = e.target;  // remember the target
}

Демо: https://codepen.io/weird_error/pen/xXPNOK

0
ответ дан weird_error 27 August 2018 в 02:45
поделиться
Другие вопросы по тегам:

Похожие вопросы: