CODEWITHSUNDEEP
jqueryraphael
kavita
kavita

Reputation: 845

Raphael set event

I have a Raphael paper containing multiple sets. Each set has a rect, a path above the rect and two texts one of which is invisible and the other is inside the rect. I wanted to change the cursor when mouse hovers over the entire rect (including the text). If I use different event handlers for text and rect and change the cursor in both to the same value, it shows a flicker for mouseout of text. This flickering makes the mouseover not so smooth.

I want to make the cursor change to hand when mouse is over the entire set.once in the cursor changes and does not flicker till the rect bounday is crossed again.

Please help me if you have any solutions Kavita

Upvotes: 1

Views: 2225

Answers (2)

Michael Klenk
Michael Klenk

Reputation: 3242

To avoid the flicker when moving the mouse from the text to the surrounding box, I suggest to use an overlay element on which the mouseover event is handled.

When you already have a set with all the elements, you could easily create a new overlaying element with the information from the getBBox from the set.

Here is a little snippet how this can work.

<script type="text/javascript">
        function drawPreview(){
            var preview = Raphael("preview", 200, 100);
            var box1 = preview.rect(20,20,160,40);
            box1.attr({'fill':'#ccc','stroke-opacity' : 0, 'opacity':0.5});
            var box2 = preview.rect(50,10,30,80);
            box2.attr({'fill':'#999','stroke-opacity' : 0, 'opacity':0.5});
            var line = preview.text(100, 30, "My Text");

            var mySet = preview.set();
            mySet.push(box1,box2,line);

            var bb = mySet.getBBox();
            var overlay = preview.rect(bb.x,bb.y,bb.width,bb.height);
            overlay.attr({'fill':'#fff','stroke-opacity' : 0, 'opacity':0});
            overlay.mouseover(function(){
                this.attr({'cursor':'pointer'});
            });
            overlay.mouseout(function(){
                this.attr({'cursor':'default'});
            });
        }
</script>

enter image description here

Upvotes: 2

Aukhan
Aukhan

Reputation: 481

Assuming you want the hover affect over the entire set which includes your rect, your path above the rect and the two texts...

var container = $(id to your Raphael container);
var yourSet = paper.set();  //assuming you have pushed all four elements into your set....
yourSet.mouseover(function(){
        container.css('cursor','pointer');
}
yourSet.mouseout(function(){
        container.css('cursor','default');
}

Hope it helps you out ....

Upvotes: 3

Related Questions