кликабельные изображения в Raphaeljs - PullRequest
Новая
       1

кликабельные изображения в Raphaeljs

1 голос
/ 01 декабря 2011

Новичок в 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? Работает всего одним кликом.

1 Ответ

1 голос
/ 02 декабря 2011

У меня не так много времени, чтобы объяснить, что не так с вашим кодом.Но я рекомендую вам использовать методы framework для работы с объектами, которые вы создаете внутри него.

В этом конкретном случае я думаю, что лучше использовать метод 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);
   })

Таким образом, вы назначаете функцию объекту Raphael, и вам не нужно использовать if с идентификаторами.

...