Как Карты Google реализовали несколько обработчиков событий нажатия на одном изображении? - PullRequest
Новая
       40

Как Карты Google реализовали несколько обработчиков событий нажатия на одном изображении?

0 голосов
/ 19 июля 2011

Я обнаружил, что в Картах Google панель управления представляет собой целое изображение:
enter image description here

Но когда вы нажимаете на другое его положение, вы можете выполнять разные действия.Мне интересно, как я могу это реализовать?

Ответы [ 3 ]

1 голос
/ 19 июля 2011

это одно изображение, но есть множество объектов, которые используют его в качестве фона, но в разных позициях. Они названы спрайтами

0 голосов
/ 19 июля 2011

Вы можете использовать HTML Image Maps. Они определяют области вашего изображения, которые можно нажимать и отличать друг от друга.

Смотрите также следующие ссылки:

0 голосов
/ 19 июля 2011

Javascript onclick объект события имеет информацию о координатах клика.Вот пример того, как извлечь и использовать эту информацию:

Украдено отсюда: http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/

<html>
<head>
<script language="JavaScript">
function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
    document.getElementById("cross").style.left = (pos_x-1) ;
    document.getElementById("cross").style.top = (pos_y-15) ;
    document.getElementById("cross").style.visibility = "visible" ;
    document.pointform.form_x.value = pos_x;
    document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('sun.jpg');width:500px;height:333px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form> 
</body>
</html>
...