CODEWITHSUNDEEP
javascriptjquerysvgraphael
zac1987
zac1987

Reputation: 2777

How to prevent mouseover event lose focus on an image when cursor is on another image in Raphael?

when the mouse hover on big-girl-image, the small-edit-image (pencil image) will appear on top of big-girl-image. Then when the mouse hover the pencil image, the big-girl-image start losing focus and thus the pencil image disappear. I tried to use onmouseleave=function() but still cannot solve this problem. I tried to use css z-index also cannot fix this button. Demo at http://jsfiddle.net/zac1987/6o2g0c60/4/ . Codes :

var searchDl = 1;
var l = 0;
var r = Raphael(5, 5, 1950, 1950);
var p = r.path("M 550, 20 C 720,60 920,480 550,700").attr({stroke: "none"}),
    pt = p.getPointAtLength(l);
    e = r.image("http://2aek.com/inventory/test/1.png", pt.x, pt.y, 120, 120),

    totLen = p.getTotalLength(),

    e.node.onmouseover = function(){
        y = r.image("http://2aek.com/inventory/test/edit-button.png", pt.x, pt.y, 30, 30);
        z = r.image("http://2aek.com/inventory/test/delete-button.png", pt.x + 90, pt.y, 30, 30);
    };

    e.node.onmouseleave=function(){
        y.remove();
        z.remove();
        alert ("big-girl-image losing focus already!");
    };

The small-edit-image is on top of big-girl-image. How to make the mouse cursor remain focusing on big-girl-image when the cursor is on small-edit-image?

Upvotes: 0

Views: 1310

Answers (1)

Kaiido
Kaiido

Reputation: 136638

There would be ways with javascript and a setTimeout in the mouseleave handler, that would check if the buttons has been hovered since the event fired, but that would be really dirty.
So, I'm wondering if you really need to remove those nodes and recreate them each time ?

Instead, you could create them once, apply some css to hide them (here I used opacity : 0, but it could have been visibility:hidden as well), take advantage of the CSS :hover selector to change the opacity, and finally apply some inline style if we do hover the main <image> element : 

var l = 0;
var r = Raphael(5, 5, 1950, 1950);
var p = r.path("M 550, 20 C 720,60 920,480 550,700").attr({stroke: "none"}),
    pt = p.getPointAtLength(l),
	e = r.image("http://2aek.com/inventory/test/1.png", pt.x, pt.y, 120, 120),
    // create our buttons here
	y = r.image("http://2aek.com/inventory/test/edit-button.png", pt.x, pt.y, 30, 30);
	z = r.image("http://2aek.com/inventory/test/delete-button.png", pt.x + 90, pt.y, 30, 30);
    // apply the css class
	y.node.setAttribute('class', 'buttons');
	z.node.setAttribute('class', 'buttons');

	e.node.onmouseover = function(){
        // set inline style, this will override the class one
		y.node.style.opacity = 1;
		z.node.style.opacity = 1; 
    	};
	
	e.node.onmouseleave=function(){
        // remove the inline style
		y.node.style.opacity = '';
        z.node.style.opacity = '';
	};
	
	e.node.onmousedown=function(){
		y.node.style.opacity = '';
		z.node.style.opacity = '';
	};
.buttons{ opacity:0;}
.buttons:hover{ opacity:1;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<img src="http://2aek.com/inventory/test/handsometemp.PNG" />

Upvotes: 1

Related Questions