2013-02-22 2 views
0

У меня есть страница PHP, которая имеет 3 функции JavaScript и использует карты изображений с «onclick», чтобы изменить изображение и координаты карты, чтобы onclick запускала следующую функцию.Использовать onclick для запуска функции

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

Это нормально, если есть ограничение по времени на когда каждая функция будет вызывать - но до этого срока OnClick можно запустить следующую функцию:

<img src=<?php echo 'image-start.jpg' ?> width="700" height="400" 
    usemap="#start" class="map" style="border-style:none; margin:0" id="imageX" /> 


    <map id="start" name="start"> 
    <area shape="poly" id="A" class="" title="Click to Start" onclick="myFunction_1()" 
     coords=<?php echo '"'; echo $coords_0; echo '"' ; ?>/> 
    <area shape="poly" id="B" class="" title="Click to Start" onclick="myFunction_1()" 
     coords=<?php echo '"'; echo $coords_0; echo '"' ; ?>/> 
    </map> 



    <script> 
    function myFunction_1() { 
     document.getElementById("imageX").src=" <?php echo 'image_1.jpg' ?> " ; 

     document.getElementById("A").coords= <?php echo '"'; echo $coords_1_a; echo '"' ; ?> ; 
     document.getElementById("A").onclick= myFunction_2() ; 

     document.getElementById("B").coords= <?php echo '"'; echo $coords_1_b; echo '"' ; ?> ; 
     document.getElementById("B").onclick= myFunction_2() ; 
     } 

    function myFunction_2() { 
     document.getElementById("imageX").src=" <?php echo 'image_2.jpg' ?> " ; 

     document.getElementById("A").coords= <?php echo '"'; echo $coords_2_a; echo '"' ; ?> ; 
     document.getElementById("A").onclick= myFunction_3() ; 

     document.getElementById("B").coords= <?php echo '"'; echo $coords_2_b; echo '"' ; ?> ; 
     document.getElementById("B").onclick= myFunction_3() ; 
     } 

    function myFunction_3() { 
     document.getElementById("imageX").src=" <?php echo 'image_end.jpg' ?> " ; 
     } 
    </script> 
+1

Подобно тому, как FYI, код ' 'можно упростить до' "" '. Это облегчит чтение. –

+1

Я стараюсь избегать кода сервера, смешанного с кодом клиента любой ценой. Трудно читать, поддерживать и масштабировать. Перемещение клиентской логики из шаблона сервера сделает новые функции более простыми для реализации и легче отлаживать. – andyzinsser

+1

@DavidKiger с использованием коротких тегов - это хорошо, но это зависит от того, есть ли у них сервер или они вообще не работают. – Sir

ответ

1

Вы можете вызвать одну функцию, чтобы вызвать другой после оттянуть с setTimeout() - например, добавив следующий код myFunction_1 заставит myFunction_2 работать в 5 секунд (5000 миллисекунд)

setTimeout(myFunction_2, 5000) 
+0

Спасибо @mike за вашу помощь, да это действительно полезно, спасибо, Тед – TedtheBear

Смежные вопросы