You have to deal with DOM Level 2 events so you can easily remove the mouseout
event listener.
var showLine = function() { /*show the line*/};
var hideLine = function() { /*hide the line*/};
yourElement.addEventListener('mouseover',showLine,false);
yourElement.addEventListener('mouseout',hideLine,false);
yourElement.addEventListener('click',function() {
yourElement.removeEventListener('mouseout',hideLine,false);
},false);
I hope it will help.
Cheers,
Yannick Bochatay
http://ybochatay.fr
----- Mail original -----
De: "luftikus_143" <[email protected]>
À: [email protected]
Envoyé: Mercredi 12 Octobre 2011 13:34:07
Objet: [svg-developers] Mouseover to show a line, mouseclick to leave it there.
How?
Hi there,
I have many lines (around 200) showing the evolution of some variables
over 20 years. Now, I when I hover the mouse over names of the
countries, the line for that country will show, and disappear as soon as
I move one. However, I'd like to give the possibility to click on that
name, so that the line sticks there in order to compare it with another
one.
In the moment my code looks like this:
To show/hide the lines:
function showLine(evt, node) { var svgdoc =
evt.target.ownerDocument; var obj = svgdoc.getElementById(node);
obj.setAttribute("visibility", "visible"); } function hideLine(evt,
node) { var svgdoc = evt.target.ownerDocument; var obj =
svgdoc.getElementById(node); obj.setAttribute("visibility" ,
"hidden"); }
For the text of the country:<text cursor="default"
onmouseover="showLine(evt, 'g536');" onclick="stickLine(evt, 'g536');"
onmousemove="ShowTooltip(evt)" onmouseout="HideTooltip(evt);
hideLine(evt, 'g536');" mouseovertext="Madagascar" x="60" y="261.2"
id="Madagascar_1992" style="dominant-baseline: central; text-anchor:
middle;" class="countries">Madagascar</text>
And my line: <g id='g536' visibility='hidden'> <polyline id='l536'
fill='none' points='60, 250.8, 120, 254, 180, 249.2, 240, 252.4, 300,
250.8, 360, 246, 420, 239.6, 480, 236.4, 540, 238, 600, 244.4, 660,
260.4, 720, 246, 780, 247.6, 840, 257.2, 900, 257.2, 960, 257.2, 1020,
258.8' stroke='rgb(155,0,0)' strocke-width='0.01' /> /g>
Is there any way to not only show the line on mouseover, but leave it
displayed when a user clicks? So it would need to override the
"mouseout" event?Thanks for any hints!
[Non-text portions of this message have been removed]
------------------------------------
-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
[email protected]
[email protected]
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
