Raphaeljs中的可點擊圖片

Question

Raphael/JS的新手，並且可以播放清晰圖像。我試圖顯示多個圖像，並基於哪個圖像被點擊以使其更大並且之前點擊的圖像更短。

我使用Raphael.js和代碼片段是這樣的.....

 var loc1 = paper.image("location.png",100, 160, 80, 80); 
     var cont1 = paper.image("contacts_1.png", 50,150, 42,42); 

     loc1.node.onclick = function() { 
       clicked("location"); 

     } 

     cont1.node.onclick = function() { 
       clicked("contacts"); 

     } 
     function clicked(img) { 
      clicked = img; 
      //alert("clicked "+clicked); 
      //loc1.scale(.5,.5); 
      if(clicked == "location") { 
       loc1.animate({width: 80, height: 80}, 1000); 
       cont1.animate({width: 42, height: 42}, 1000); 

      } 
      else if(clicked == "contacts") { 
       loc1.animate({width: 42, height: 42}, 1000); 
       cont1.animate({width: 80, height: 80}, 1000); 


      } 
     } 

我在做什麼錯了，當我添加cont1.node.onlcick點擊不工作？它只需一個onclick。

Answer 1

我沒有太多時間來解釋你的代碼有什麼問題。但我建議您使用框架方法來處理您在其中創建的對象。

在這種特殊情況下，我認爲最好使用Raphael的click方法。

使用您的代碼示例如下

var loc1 = paper.image("location.png", 100, 160, 80, 80); 
    var cont1 = paper.image("contacts_1.png", 50,150, 42,42); 


    loc1.click(function(){ 
     loc1.animate({width: 80, height: 80}, 1000); 
     cont1.animate({width: 42, height: 42}, 1000); 
    }) 

    cont1.click(function(){ 
      loc1.animate({width: 42, height: 42}, 1000); 
      cont1.animate({width: 80, height: 80}, 1000); 
    }) 

這樣，你要分配的功能，拉斐爾對象，你不需要與標識符使用if。