AJAX при нажатии на тег area (интерактивные карты html)?

Question

[password22]

Здравствуйте! Задумка такая: используя теги map и area сделать области картинки, по нажатию на которые будут выдаваться различные данные с помощью ajax (т. е. без перезагрузки страницы). Подскажите пожалуйста, как это сделать? Сам совсем не могу сообразить

<div class="map">
		<img src="img.png" class="map maphilighted" usemap="#simple">
	</div>

	<map name="simple">
		<area href="a.php" shape="poly" coords="78,14,75,29,71,37,96,28" >
		<area href="a.php" shape="poly" coords="73,38,50,51,50,68,43,86,54,97" >
	</map>

	<div id="data">Здесь выводимые данные ajax'ом</div>

a.php - предположительный файл с обработчиком, если он необходим

Answer 1

[password22]

Справился сам. Если кому пригодится:
html

<div class="map">
		<img src="img.png" class="map maphilighted" usemap="#simple">
	</div>

	<map name="simple">
		<area id="first" class="all" shape="poly" coords="78,14,75,29,71,3,20,96,28">
		<area id="second" class="all" shape="poly" coords="73,38,50,4,79,118,62,105,48,95,41">
	</map>

	<div class="data">
        </div>

js

$(document).ready(function(){
    $('.all').click(function() {
    	var name = ($(this).attr('id')); 
        $.ajax({
			url: 'a.php',
			method: 'post',
			dataType: 'html',
			data: {name:name},
				success: function(data){
					$('.data').html(data);
				}
		});
		return false;
    });
});

a.php

if($_POST['name'] == 'first') {
	echo 'Это первый';
} elseif($_POST['name'] == 'second') {
	echo 'Это второй';
}

Answer 2

[Дмитрий Марков]

Больше похоже на задание.

Comments

[password22]

в таком случае, любой "вопрос" на подобном сайте - это задание. Будете под каждым заданием писать что это - задание?

[Дмитрий Марков]

Я к тому , что вы даже не скинули какой нибудь пример своего кода.

[password22]

En-Tilza, у меня его нет. Я перерыл весь интернет, и я понятия не имею как из тега area передать данные в ajax. То есть как это делать из form я прекрасно понимаю и знаю, но как это сделать в данном случае я так и не понял.

[password22]

En-Tilza, если же просто переходить в какой-то файл (в моем примере это a.php), то это перезагрузка страницы, а этого я хочу избежать

[password22]

En-Tilza,

<map name="simple">

		<area id="switch" shape="poly" coords="78,14,75,29,71,37,96,36,91,20,96,28" >

		<area  shape="poly" coords="73,38,59,118,62,105,48,95,41" >

	</map>

	<div class="data"></div>

window.onload = function () {

    var a = document.getElementById('switch');

    a.onclick = function() {
        $.ajax({
		url: 'a.php',
		method: 'post',
		dataType: 'html',
		data: {text: 'Текст'},
		success: function(data){
			$('.data').html(data);
		}
	});
        return false;
    }
}

Получилось сделать так. Все работает.
Теперь буду думать как сделать это на все области картинки, а не на только одну