clickable images in Raphaeljs

New to Raphael/JS and playing around with clikcable images. I am trying to display multiple images and based on which image is clicked to make it larger and the previously clicked image shorter.

I am using Raphael.js and the code snippet is like this.....

        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);


            }
       }

What am I doing wrong that the click is not working when I add cont1.node.onlcick? It works with just one onclick.

Answers


I don't have much time to explain what's wrong with your code. But I recommend you to use the framework methods to deal with the objects you create inside of it.

In this particular case I think is better to use the Raphael's click method.

An example using your code follows

    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);
   })

This way, you are assigning the function to the raphael object, and you don't need to use the if with the identifiers.


Need Your Help

How to select columns based on criteria in a certain row in R

r subset

I have a matrix of values with both row names and column names, as shown here.

jQuery Post Object

jquery object post

How would I go about turning the following code into an object post instead of a string post?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.