Возможно ли отловить событие на area от программного клика/наведения на мап-карте ?
Желателен пример кода или ссылка... (нужно реализовать демонструшку движения объекта по дороге с отсканированных карт аэрофотосъемки.
|
Deff, ты никогда не пользовался addEventListener ? Ему без разницы, настоящее ли событие, или фэйковое, обрабочтик вызывается в любом случае.
|
danik.js,
мало пользовался - напиши вариацию ? Вот код для мап сегодняшний: Программный клик регистрируется только на img, а если кликнуть руками - то на всех уровнях
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var onlineUserList=[]; // Cписок Юзеров и их локаций
//$(document).ready(function(){ });
function Funk (){ //Функция, исполняемая по загрузке карты
var Areas=[], ArrSpan=[]
$("#karta-00 area").each(function(i){
$(this).wrap('<span id="Span'+i+'" style="display:inline:block;bopder:red solid 1px;z-index:100;display:inline-block;position:relative" onclick="alert('+i+'Span)"></span>');
$(this).get(0).setAttribute('onclick','alert(\''+i+'X\')');
var a=$(this).parent();//
var a=$(this).parents('#karta-00')
});
alert('top Карта:'+$("img").position().top+' Left Карта:'+$("img").position().left+'\n Высота'+$("img").height()+' Ширина: '+$("img").width());
//alert(document.elementFromPoint(247,214).length)
$(document.elementFromPoint(247,214)).click()//alert(alert(click();
$( 'map' ).on( 'click', 'area', function( e ) {
alert( e.target.title );
});
}
</script>
<div id="div" style="z-index:99;position:absolute width:100%;height:100%;bopder:red solid 1px;" onclick="alert('Клик по #div')">
<map style="z-index:100;position:relative" id="karta-00" name="karta" style="z-index:100;position:relative" >
<area href="/" shape="rect" coords="0,0,250,150" title="В оглавлении форума">
<area href="/f1-forum" shape="rect" coords="250,0,500,150" title="Ваш первый форум">
<area href="/viewonline" shape="rect" coords="0,150,500,300" title="Просматривает «Кто сейчас на форуме»" onclick="alert('Клик по «Кто сейчас на форуме»')">
</map>
<img src="http://s017.radikal.ru/i416/1302/69/20132fd94fd6.jpg" style="z-index:0;position:relative" usemap="#karta" border="0" onload="Funk()" onclick="alert('Увидел, что был Клик по img usemap')/**/">
</div>
</body>
</html>
Суть в том, что document.elementFromPoint(247,214) генерит событие на img usemap, которое не завязано на тег map при программном клике(кроме Хрома), в отличие от клика руками |
Deff, если честно, я тебя не понимаю. document.elementFromPoint не генерит ничего. Помимо click() есть еще и dispatchEvent.
При запуске твоего скрипта появляются какие-то непонятные цифры и знаки. Если объяснишь более ясно что к чему - буду рад помочь. |
Может можно кликать программно иначе, чем через document.elementFromPoint(X,Y)
|
Цитата:
(Можно программное наведение курсором, вместо клика |
Чем тебе не нравится document.elementFromPoint(X,Y) ?
|
danik.js,
Да пофег что - ну не работает, как заставить, не знаю, вот спрашиваю.. |
Как это не работает? Ты как новичек. Почему не работает?
|
я хз, то или не то ты хотел
http://gmoryes.bplaced.net/event.html Смысл: нажимаешь на кнопку и при клике на див, в котором есть 4 картинки, всегда будет находиться только та картинка, которую ты выбрал |
Цитата:
Есть код карты: <div id="div"> <map id="karta-00" name="karta > <area href="/" shape="rect" coords="0,0,250,150" title="В оглавлении форума"> <area href="/f1-forum" shape="rect" coords="250,0,500,150" title="Ваш первый форум"> <area href="/viewonline" shape="rect" coords="0,150,500,300" title="Просматривает «Кто сейчас на форуме»"> </map> <img src="http://s017.radikal.ru/i416/1302/69/20132fd94fd6.jpg" style="z-index:0;position:relative" usemap="#karta" border="0" onload="LoadFunk()"> </div> Покажи как "дедушка" ... |
9xakep,
CПС, но нужно имхо через тег <map>, ибо позиционировать img на каждую аэрофотосъемку - не айс(да и при кривой дороге их нужно несколько) - а оцифровка регионов в геодезии - автомат Нужно показать как объект движется по дороге,я позиционирую драг - программно и смотрю не упираюсь ли в край региона текущего ареа, т.е нужно отслеживать программное наведение или клик на конкретную точку 1. Есть MaП-карта, Нужно: Задать координаты программно(вводим координаты в инпут) и программно кликнуть по данным координатам на карте и получить href из area |
Deff,
так а в чем проблема собрать координаты в массив например: var coords = [[0,0,250,150], [250,0,500,150], [0,150,500,300], 0] Последний элемент массива - это то куда нужно "тыкнуть" В обработчике просто сделать проверку, если последний элемент равен "-1", например, тогда х,у взять из event, иначе взять координаты элемента с индексом coords[coords.length-1], и тыкнуть по нему |
9xakep,
Сотни карт, координаты могут быть круговыми, сотни регионов на карте Нун делать всю ту же задачу, что браузер уже выполнил, для клика наведения по ареа есть точка и полсотни area cо сложными регионами (не квадраты - и не прямоугольники) ( этот эскиз просто с форум поддержки (По координатам имхо сделал, но не Айс) |
хм... странно, я наконец-то понял, что ты хочешь) Попробовал сделать, почему-то он при клике находит img у которой z-index = 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var map = document.getElementById('map');
var c = [214,37]
map.addEventListener('click', function (e) {
alert(document.elementFromPoint(c[0],c[1]).title)
},false)
}
</script>
<div id="div" style="z-index:99;position:absolute width:100%;height:100%;bopder:red solid 1px;">
<map style="z-index:100;position:relative" id="map" name="karta" style="z-index:100;position:relative" >
<area style='z-index:101;' href="/" shape="rect" coords="0,0,250,150" title="В оглавлении форума">
<area href="/f1-forum" shape="rect" coords="250,0,500,150" title="Ваш первый форум">
<area href="/viewonline" shape="rect" coords="0,150,500,300" title="Просматривает «Кто сейчас на форуме»" />
</map>
<img src="http://s017.radikal.ru/i416/1302/69/20132fd94fd6.jpg" style="z-index:0;position:relative" usemap="#karta" border="0" onclick="alert('Увидел, что был Клик по img usemap')/**/">
</div>
</body>
</html>
Ан, нет, такая шняга работает только в хроме, в мозиле, как уже было сказано ранее, она почему-то первой находит img |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Придется тебе вычислять нужную арею перебирая все, основываясь на shape и coords ... |
nerv_,
Как определить к какому area принадлежит? Area не прямоугольники Двигаюсь по дороге на карте (серпантин для верности) пытаюсь тестить следующую точку - в пределах ли она дороги, нет возвращаюсь, чуть меняю вектор и снова тестирую |
Цитата:
Ну я и пытался Выяснить это, Опера ИЕ и FF - пока не катят, пока только в хроме работает. |
Цитата:
Буду рад если я ошибаюсь, и к FF можно найти некий подход. Дык оно нигде кроме вебкита не роботает? Ну значит хреново дело) |
danik.js,
Да математика юзается, но жаль что уже отрендированое браузером и быстрее и проще и гугол хром примером, нет взяли и спрятали |
Думаю что хром как раз таки некорректно работает :)
Вобще, эти map'ы как-то магически работают. Скорее всего спецификация умалчивает касаемые тут моменты. |
Н
Цитата:
|
Deff, HTML-обработчики пробовал?
я помню, что я когда-то делал подобную карту и таким же вопросом задавался... но я её сделал :) |
Цитата:
Описанная проблема скорей всего возникала при наведении руками в Ие и контроле onmouseover/onmouseout без addEventListener там она решается через обертку area в span и обработчике в теге span |
| Часовой пояс GMT +3, время: 11:04. |