Mouseover function won't work

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>

Answers


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.


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

Need Your Help

Save base64encoded image to server-side database as BLOB

php android mysql sql

I am taking a photograph from within my Android app using this code:

How to call an Url image into a single row fragment for a Listview?

java android url imageview drawable

I have this code here. At the moment I call the same stock image over and over again. What I would like to do, is for each Drawable item in the images[] array is to call different URL images if the...