Mouseover function won't work

Question

I am using Raphael graphics and animations which is a javascript library. I want the user to mouseover the blue square in the bottom row, middle column. When they mouseover I want the blue box to glow(Raphael function) black. I am trying to use this function on rec8, but I don't think I'm doing it correctly. Can someone please correct my code or help me. Thanks. :) Live Long and Prosper.

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>

<style type="text/css"> 
#input
{
margin-top:-200px;

}
</style>

</head>

<body>

<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>

<div id="input" style="z-index:99;" >
  <input type="text" value="0"; style="text-align:right;" /><br />
</form> 
  </div>

<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rec = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});

    $("rect").mouseover(function(e) {
        $(this).attr({"fill": "red"});
        });
    $("rect").mouseout(function(e) {
        $(this).attr({"fill": "#fbb"});
    }); 
    //first column
    rec2 = r.rect(30, 80, 50, 40, 5).attr({"fill": "blue"});
    rec3 = r.rect(30, 130, 50, 40, 5).attr({"fill": "blue"});
    rec4 = r.rect(30, 180, 50, 40, 5).attr({"fill": "blue"});
    rec5 = r.rect(30, 240, 50, 40, 5).attr({"fill": "blue"});
    //second column
    rec6 = r.rect(90, 80, 50, 40, 5).attr({"fill": "blue"});
    rec2 = r.rect(90, 130, 50, 40, 5).attr({"fill": "blue"});
    rec7 = r.rect(90, 180, 50, 40, 5).attr({"fill": "blue"});
    rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
        $("rec8").mouseover(function(e) {
        $(this).glow({width:10});
        });
    $("rec8").mouseout(function(e) {
        $(this).glow({width:0});
    }); 
    //third column
    rec9 = r.rect(150, 80, 50, 40, 5).attr({"fill": "blue"});
    rec10 = r.rect(150, 130, 50, 40, 5).attr({"fill": "blue"});
    rec11 = r.rect(150, 180, 50, 40, 5).attr({"fill": "blue"});
    rec12 = r.rect(150, 240, 50, 40, 5).attr({"fill": "blue"});
});

</script>

</body>
</html>

have you tried moueseenter/mouseleave instead of mouseover/mouseout? That works in most cases far better. — Sven Bieder, Jul 16 '12 at 15:05
@SvenBieder Raphael has it's own mouseout / mouseover. Raphael doesn't have a moueseenter/mouseleave. — vcsjones, Jul 16 '12 at 15:08

vcsjones · Accepted Answer · 2012-07-16T15:18:30.330

2

This selector:

$("rec8")

Is a jQuery selector for any <rec8 /> tags. Those probably don't exist. You should attach your mouse events to the returned raphael elements:

rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
rec8.mouseover(function(e) {
    this.glow({width:10});
    });
rec8.mouseout(function(e) {
    this.glow({width:0});
});

but for some reason when I mouseout it doesn't go away

That's because glow returns a new set that represents the glow, so you need to remove it. From the Raphael documentation:

Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself.

You need to track the returned set that Raphael gives you as part of the glow, and remove it. Perhaps like this:

var rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
var rect8glow;
rec8.mouseover(function(e) {
    rect8glow = this.glow({width:10});
    });
rec8.mouseout(function(e) {
    rect8glow.remove();
});

You can see a working demo of that here.

edited Jul 16 '12 at 15:18

answered Jul 16 '12 at 15:04

vcsjones

138,677
31
291
286

Impressive. That almost worked, but for some reason when I mouseout it doesn't go away. And when I keep going back in that square the glow keeps getting darker. Do you know how to fix this?? – John Doe Jul 16 '12 at 15:10
Never mind. I figured it out. I used the remove method. Please +1 my question and I will approve your answer as soon as I can. :) – John Doe Jul 16 '12 at 15:15
There's also a solution here. [How to add and remove glow for Raphael element?](http://stackoverflow.com/a/8434080/1331430) – Fabrício Matté Jul 16 '12 at 15:17
@StackOverflow Glad you figured it out. I updated my answer to include a solution for that. – vcsjones Jul 16 '12 at 15:20
Very cool that jsfiddle is pretty neat. I will have to play around with it. :) – John Doe Jul 16 '12 at 15:22

score 1 · Answer 2 · answered Jul 16 '12 at 15:16

See this fiddle for a live solution : http://jsfiddle.net/zhj2r/3/
As vcsjones stated, you were combining jquery and raphael, but they are not related.
By $(this) you wrap the raphael object in a jquery function call, which is wrong, and $('rec4') is not a valid jquery selector.
Moreover, the glow function returns a set of svg paths that show a conture of the targeted object, so by calling glow({width : 0}), you are not modifying the actual glow's width, but generatingg another glow element with the width 0.
Here are the things that I modified in order for your code to work :

rec.mouseover(function(e) {
    this.attr({"fill": "red"});
});
rec.mouseout(function(e) {
    this.attr({"fill": "#fbb"});
}); 
// ...
rec8.mouseover(function(e) {
    // keep a reference to the glow object so you can remove it later
    this.theGlow = this.glow({width:10});
});
rec8.mouseout(function(e) {
    this.theGlow.remove();
});

Mouseover function won't work

2 Answers2