Javascript и карта изображения? Как это работает? - PullRequest
Новая
       35

Javascript и карта изображения? Как это работает?

0 голосов
/ 30 марта 2011

У меня есть карта изображения и форма.В форме у меня есть три текстовых поля.Когда я нажимаю на карту изображения.Я нажимаю на номер 4. Номер 4 должен прийти в текстовое поле "regio".

Другой пример.Когда я нажимаю на карту изображения на номер 9. Номер 9 должен прийти в текстовое поле "regio".

Вот мой код: http://www.testdomeinnaam.nl/mike/

Но как я могу сделать это????Спасибо !!!

1 Ответ

9 голосов
/ 30 марта 2011

Три вещи:

1 - для каждой области необходимо прикрепить событие обстрела.Путь первый: 

<area ... href="JavaScript: regionMap(6); void(0);" >

Путь второй: 

<area ... onclick="regionMap(6); return false;">

Путь третий: 

<script>
   jQuery("#imagemap area").click( function(){ 
        var s = jQuery(this).attr("alt");
        regionMap( s.substr(s.length - 2) );
   });
</script>

Обратите внимание, что этот путь берет номер региона из alt атрибут - это не лучший способ.

Первыми двумя способами - вы должны void(0) или return false, чтобы браузер знал, что вы уже обработали событие самостоятельно, и что вы не ожидаетечтобы отослать страницу из-за щелчка пользователя.

2 - реализовать метоид regionMap

Способ первый - чистый JS 

   function regionMap(region) {
      document.getElementById("regio").value = region;
   }

Способ два - с помощью jQuery 

   function regionMap(region) {
      jQuery("#regio").val(region);
   }

3 - добавить реализацию на свою страницу

Способ первый: встроить код html-страницы 

<script>
   function regionMap(region) {
      document.getElementById("regio").value = region;
   }
</script>

Способ второй - использовать ресурс JS.Например, создайте файл - regionsform.js, и в нем: 

   function regionMap(region) {
      document.getElementById("regio").value = region;
   }

и вставьте в свой HTML-код ссылку на него.Предполагая, что HTML и region.js находятся в одной папке - это будет выглядеть так: 

<script src="regionsform.js"></script>

Веселись и удачи :)

...