Question

I have the following basic code, here is the jsfiddle: http://jsfiddle.net/fLZKc/

<div id="menu">
    <ul>
        <li>
            <a href="#" class="chat"><span>Chat</span></a>
        </li>
        <li>
            <a href="#" class="heart"><span>Heart</span></a>
        </li>
        <li>
            <a href="#" class="documentation"><span>Documentation</span></a>
        </li>
    </ul>
</div>

And this javascript:

var bubble = "M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z", 
    heart = "M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z", 
    documentation = "M26.679,7.858c-0.176-0.138-0.404-0.17-0.606-0.083l-9.66,4.183c-0.42,0.183-0.946,0.271-1.486,0.271c-0.753,0.002-1.532-0.173-2.075-0.412c-0.194-0.083-0.356-0.176-0.471-0.259c0.042-0.021,0.09-0.042,0.146-0.064l8.786-3.804l1.31,0.561V6.612c0-0.244-0.106-0.475-0.283-0.612c-0.176-0.138-0.406-0.17-0.605-0.083l-9.66,4.183c-0.298,0.121-0.554,0.268-0.771,0.483c-0.213,0.208-0.397,0.552-0.394,0.934c0,0.01,0.003,0.027,0.003,0.027v14.73c0,0.006-0.002,0.012-0.002,0.019c0,0.005,0.002,0.007,0.002,0.012v0.015h0.002c0.021,0.515,0.28,0.843,0.528,1.075c0.781,0.688,2.091,1.073,3.484,1.093c0.66,0,1.33-0.1,1.951-0.366l9.662-4.184c0.255-0.109,0.422-0.383,0.422-0.692V8.471C26.961,8.227,26.855,7.996,26.679,7.858zM20.553,5.058c-0.017-0.221-0.108-0.429-0.271-0.556c-0.176-0.138-0.404-0.17-0.606-0.083l-9.66,4.183C9.596,8.784,9.069,8.873,8.53,8.873C7.777,8.874,6.998,8.699,6.455,8.46C6.262,8.378,6.099,8.285,5.984,8.202C6.026,8.181,6.075,8.16,6.13,8.138l8.787-3.804l1.309,0.561V3.256c0-0.244-0.106-0.475-0.283-0.612c-0.176-0.138-0.407-0.17-0.606-0.083l-9.66,4.183C5.379,6.864,5.124,7.011,4.907,7.227C4.693,7.435,4.51,7.779,4.513,8.161c0,0.011,0.003,0.027,0.003,0.027v14.73c0,0.006-0.001,0.013-0.001,0.019c0,0.005,0.001,0.007,0.001,0.012v0.016h0.002c0.021,0.515,0.28,0.843,0.528,1.075c0.781,0.688,2.091,1.072,3.485,1.092c0.376,0,0.754-0.045,1.126-0.122V11.544c-0.01-0.7,0.27-1.372,0.762-1.856c0.319-0.315,0.708-0.564,1.19-0.756L20.553,5.058z";

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40)
    chat.path(bubble).attr({
        "fill" : "#333"
    })
})

$('.heart').each(function(i) {
    paper = Raphael($(this)[0], 40, 40)
    paper.path(heart).attr({
        "fill" : "#333"
    })
})
$('.documentation').each(function(i) {
    paper = Raphael($(this)[0], 40, 40)
    paper.path(documentation).attr({
        "fill" : "#333"
    })
})

I am trying to attach a hover action on each icon, so that if the user hovers over a menu item, the icon changes color.

If I add a mouseover, like:

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40);
    chat.path(bubble).attr({
        "fill" : "#333"
    })
    chat.mouseover(function() {
        $(this).attr({
            "fill" : "#fff"
        });
    });
})

I get an error, ‘Uncaught TypeError: Object # has no method ‘mouseover’ ‘

What will be the correct way to do this? Also can the code be simplified?

Answer 1

Several issues here:

1. mouseover is being added to the Raphael paper (canvas). It should be added to the shape instead.
2. The code mixes Raphael shape references and jQuery element references. $(this) should be replaced with this in some cases to refer to the event’s owner (the Raphael shape).
3. Assuming you’re going for the opposite behavior on mouse out, Raphael’s hover should be used to tie both handlers to the shape.

Let’s recap these by a code snippet example:

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40);
    var shape = chat.path(bubble).attr({
        "fill": "#333"
    });
    shape.hover(function() {
        this.attr({
            "fill": "#fff"
        });
    }, function() {
        this.attr({
            "fill": "#333"
        });
    });
})

You can refer to the updated jsFiddle to further manipulate it.