onMouseOver, onMouseOut not working

nulik

unread,

Mar 3, 2011, 10:29:22 AM3/3/11

to canviz

Hi,
I have achieved to show the diagram and the 'href' tags are working
ok. But the events onMouseOver and onMouseOut are not.(when I pass the
mouse over, nothing happens, no error reported)
What could be the problem?
Here are my files, the .html and the dot & xdot file. Will appriciate
any suggestions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Diagram</title>
<link rel="stylesheet" type="text/css" href="/3rd_lib/canviz/
canviz.css" />



<script type="text/javascript" src="/3rd_lib/canviz/prototype/
prototype.js"></script>
<script type="text/javascript" src="/3rd_lib/canviz/path/path.js"></
script>
<script type="text/javascript" src="/3rd_lib/canviz/canviz.js"></
script>
<script type="text/javascript" src="/3rd_lib/canviz/x11colors.js"></
script>
<script type="text/javascript" src="/3rd_lib/canviz/graphs/
graphlist.js"></script>
<script type="text/javascript" src="/3rd_lib/canviz/graphs/
layoutlist.js"></script>

<script type="text/javascript"></script>
</head>
<body>

<div id="page_container">
<div id="graph_container"></div>
<div id="debug_output"></div>
</div>

</body>
</html>
===================== dot file ==================
digraph diagram {
URL="javascript: map_clicked(this)"

subgraph cluster_r5 {
label="SHAREHOLDERS";
0[label="0"];
}

subgraph cluster_r6 {
label="CEO";
8[label="8" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
14[label="14" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
15[label="15" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
16[label="16" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
17[label="17" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
18[label="18" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
}

subgraph cluster_r7 {
label="CTO";
9[label="9" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
10[label="10" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
11[label="11" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
12[label="12" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
}

subgraph cluster_r8 {
label="SalesDir";
13[label="13" href="javascript: alert(\N)" onMouseOut="javascript:
mover(\N)"];
}

0->8;
8->9;
8->10;
8->11;
8->12;
8->13;
13->12;
0->14;
0->15;
0->16;
0->17;
0->18;
}

================== xdot file ======================
digraph diagram {
graph [URL="javascript: map_clicked(this)"];
node [label="\N"];
graph [bb="0,0,539,392",
_draw_="c 9 -#ffffffff C 9 -#ffffffff P 4 0 -1 0 392 540 392 540 -1
",
xdotversion="1.2"];
subgraph cluster_r5 {
graph [label=SHAREHOLDERS,
bb="158,296,287,384",
_draw_="c 9 -#000000ff p 4 158 296 158 384 287 384 287 296 ",
_ldraw_="F 14.000000 11 -Times-Roman c 9 -#000000ff T 223 366 0 113
12 -SHAREHOLDERS ",
xdotversion=""];
0 [label=0, pos="223,325", width="0.75", height="0.58333", _draw_="c
9 -#000000ff e 223 325 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c
9 -#000000ff T 223 322 0 8 1 -0 "];
}
subgraph cluster_r6 {
graph [label=CEO,
bb="8,200,438,288",
_draw_="c 9 -#000000ff p 4 8 200 8 288 438 288 438 200 ",
_ldraw_="F 14.000000 11 -Times-Roman c 9 -#000000ff T 223 270 0 31
3 -CEO ",
xdotversion=""];
8 [label=8, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="403,229", width="0.75", height="0.58333", _draw_="c 9
-#000000ff e 403 229 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9
-#000000ff T 403 226 0 8 1 -8 "];
14 [label=14, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="331,229", width="0.75", height="0.58333", _draw_="c 9
-#000000ff e 331 229 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9
-#000000ff T 331 226 0 16 2 -14 "];
15 [label=15, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="259,229", width="0.75", height="0.58333", _draw_="c 9
-#000000ff e 259 229 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9
-#000000ff T 259 226 0 16 2 -15 "];
16 [label=16, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="187,229", width="0.75", height="0.58333", _draw_="c 9
-#000000ff e 187 229 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9
-#000000ff T 187 226 0 16 2 -16 "];
17 [label=17, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="115,229", width="0.75", height="0.58333", _draw_="c 9
-#000000ff e 115 229 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9
-#000000ff T 115 226 0 16 2 -17 "];
18 [label=18, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="43,229", width="0.75", height="0.58333", _draw_="c 9 -
#000000ff e 43 229 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9 -
#000000ff T 43 226 0 16 2 -18 "];
}
subgraph cluster_r7 {
graph [label=CTO,
bb="245,8,531,96",
_draw_="c 9 -#000000ff p 4 245 8 245 96 531 96 531 8 ",
_ldraw_="F 14.000000 11 -Times-Roman c 9 -#000000ff T 388 78 0 30 3
-CTO ",
xdotversion=""];
9 [label=9, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="280,37", width="0.75", height="0.58333", _draw_="c 9 -
#000000ff e 280 37 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9 -
#000000ff T 280 34 0 8 1 -9 "];
10 [label=10, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="352,37", width="0.75", height="0.58333", _draw_="c 9 -
#000000ff e 352 37 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9 -
#000000ff T 352 34 0 16 2 -10 "];
11 [label=11, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="424,37", width="0.75", height="0.58333", _draw_="c 9 -
#000000ff e 424 37 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9 -
#000000ff T 424 34 0 16 2 -11 "];
12 [label=12, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="496,37", width="0.75", height="0.58333", _draw_="c 9 -
#000000ff e 496 37 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9 -
#000000ff T 496 34 0 16 2 -12 "];
}
subgraph cluster_r8 {
graph [label=SalesDir,
bb="461,104,531,192",
_draw_="c 9 -#000000ff p 4 461 104 461 192 531 192 531 104 ",
_ldraw_="F 14.000000 11 -Times-Roman c 9 -#000000ff T 496 174 0 52
8 -SalesDir ",
xdotversion=""];
13 [label=13, href="javascript: alert(\N)", onMouseOut="javascript:
mover(\N)", pos="496,133", width="0.75", height="0.58333", _draw_="c 9
-#000000ff e 496 133 27 21 ", _ldraw_="F 14.000000 11 -Times-Roman c 9
-#000000ff T 496 130 0 16 2 -13 "];
}
0 -> 8 [pos="e,395.33,249.34 249.51,320.65 285.78,314.29
348.48,301.71 367,288 377.14,280.49 385.03,269.19 390.8,258.48",
_draw_="c 9 -#000000ff B 7 250 321 286 314 348 302 367 288 377 280 385
269 391 258 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3
394 260 395 249 388 257 "];
8 -> 9 [pos="e,288.61,56.969 384.85,213.42 378.16,207.16 370.8,199.62
365,192 334.27,151.6 307.77,98.704 292.86,66.323", _draw_="c 9 -
#000000ff B 7 385 213 378 207 371 200 365 192 334 152 308 99 293 66 ",
_hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3 296 65 289 57
290 68 "];
8 -> 10 [pos="e,357.47,57.596 397.45,208.09 388.42,174.09
370.52,106.71 360.08,67.414", _draw_="c 9 -#000000ff B 4 397 208 388
174 371 107 360 67 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -
#000000ff P 3 363 66 357 58 357 68 "];
8 -> 11 [pos="e,421.69,58.084 405.33,207.72 409.04,173.82 416.3,107.4
420.59,68.149", _draw_="c 9 -#000000ff B 4 405 208 409 174 416 107 421
68 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3 424 68 422
58 417 68 "];
8 -> 12 [pos="e,483.75,55.836 415.76,210.25 419.34,204.53
423.05,198.14 426,192 443.94,154.62 439.6,141.64 457,104 463.21,90.565
471.28,76.309\
478.47,64.416", _draw_="c 9 -#000000ff B 10 416 210 419 205 423 198
426 192 444 155 440 142 457 104 463 91 471 76 478 64 ", _hdraw_="S 5 -
solid c 9 -#000000ff C 9 -#000000ff P 3 481 66 484 56 476 63 "];
8 -> 13 [pos="e,484.95,152.33 424.54,216.11 434.44,209.59
445.96,201.14 455,192 464.09,182.81 472.54,171.39 479.38,161.05",
_draw_="c 9 -#000000ff B 7 425 216 434 210 446 201 455 192 464 183 473
171 479 161 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3
483 163 485 152 477 159 "];
13 -> 12 [pos="e,496,58.246 496,111.69 496,99.017 496,82.697
496,68.547", _draw_="c 9 -#000000ff B 4 496 112 496 99 496 83 496 69
", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3 500 68 496 58
493 68 "];
0 -> 14 [pos="e,322.29,248.97 247.75,316.26 262.69,310.07
281.41,300.63 295,288 304.11,279.53 311.74,268.25 317.6,257.82",
_draw_="c 9 -#000000ff B 7 248 316 263 310 281 301 295 288 304 280 312
268 318 258 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3
321 259 322 249 315 256 "];
0 -> 15 [pos="e,251.38,249.33 230.63,304.64 235.6,291.4 242.16,273.91
247.72,259.08", _draw_="c 9 -#000000ff B 4 231 305 236 291 242 274 248
259 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3 251 260
251 249 245 257 "];
0 -> 16 [pos="e,194.62,249.33 215.37,304.64 210.4,291.4 203.84,273.91
198.28,259.08", _draw_="c 9 -#000000ff B 4 215 305 210 291 204 274 198
259 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3 201 257
195 249 195 260 "];
0 -> 17 [pos="e,123.71,248.97 198.25,316.26 183.31,310.07
164.59,300.63 151,288 141.89,279.53 134.26,268.25 128.4,257.82",
_draw_="c 9 -#000000ff B 7 198 316 183 310 165 301 151 288 142 280 134
268 128 258 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3
131 256 124 249 125 259 "];
0 -> 18 [pos="e,50.669,249.34 196.49,320.65 160.22,314.29
97.516,301.71 79,288 68.855,280.49 60.969,269.19 55.199,258.48",
_draw_="c 9 -#000000ff B 7 196 321 160 314 98 302 79 288 69 280 61 269
55 258 ", _hdraw_="S 5 -solid c 9 -#000000ff C 9 -#000000ff P 3 58 257
51 249 52 260 "];
}

Ryan Schmidt

unread,

Mar 3, 2011, 11:39:57 AM3/3/11

to can...@googlegroups.com

On Mar 3, 2011, at 09:29, nulik wrote:

> 8[label="8" href="javascript: alert(\N)" onMouseOut="javascript:
> mover(\N)"];

Remove "javascript:" from your onMouseOver / onMouseOut attributes. The only attribute where the prefix "javascript:" is applicable is the href attribute.

nulik

unread,

Mar 3, 2011, 3:45:47 PM3/3/11

to canviz

thanks for quick reply!
I removed the jascript word but it didn't work.
I added code to test if the alert shows up and it does:
<div onMouseOver="mover(1)" >onclicktest</div>

I opened the DOM Inspector and I can see the 'mover(1)' as a nodeValue
for nodeName property in the test div i added above.
But when I inspect the properties of the divs that are created in the
CANVAS div I don't find any reference to mover() function.

How should I debug this?

Thanks

nulik

unread,

Mar 3, 2011, 4:06:12 PM3/3/11

to canviz

I should correct one thing, it is not a div, it is a SPAN object that
should contain the onmouseover property but I can't see it with the
DOM inspector in my Firefox 2.0.0.12

> > Remove "javascript:" from your onMouseOver / onMouseOut attributes. The only attribute where the prefix "javascript:" is applicable is the href attribute.- Hide quoted text -
>
> - Show quoted text -

nulik

unread,

Mar 3, 2011, 4:31:49 PM3/3/11

to canviz

I found some very weird stuff. When I add
href="javascript: s(\N)"
the onMouseOver starts working, and I even don't make any clcks.
if I remove the value of href, i..e , leave it empty:
href=""
the onMouseOver stops working
if again, I put a any function to it, onMouseOver starts working
again.
the xdot file looks fine, like:

14 [label=14, href="uno()", onmouseover="mover('aja')",
pos="331,229", width="0.75", .............

weird...

> > - Show quoted text -- Hide quoted text -

Ryan Schmidt

unread,

Mar 3, 2011, 5:18:50 PM3/3/11

to can...@googlegroups.com

Looks like you're right. Tooltips and the six mouse events (onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout) get totally ignored by Canviz unless there is an href attribute. I think we could call that a bug; thanks for finding it. Seems I didn't think that through properly when I wrote this code:

http://code.google.com/p/canviz/source/browse/canviz/trunk/canviz.js?r=265#207

In my testing I didn't notice it because out of habit I would always set the href to "#". As a workaround for now, you could do that, or better yet, set href to "javascript:void(0)".

Note, by the way, that if you want to put JavaScript into href, you do need to prefix it with "javascript:", because otherwise it expects a valid URL. In the six mouse event attributes, you do not prefix with "javascript:", because JavaScript code is the only thing that can go into those attributes.

nulik

unread,

Mar 3, 2011, 8:19:48 PM3/3/11

to canviz

oh, I get it all now.
yes, it would be good to add more if()s to that code, but i don't
think that's a bug, if we know how it behaves, that's enough.
thanks for helping!

On Mar 3, 4:18 pm, Ryan Schmidt <google-2...@ryandesign.com> wrote:
> Looks like you're right. Tooltips and the six mouse events (onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout) get totally ignored by Canviz unless there is an href attribute. I think we could call that a bug; thanks for finding it. Seems I didn't think that through properly when I wrote this code:
>

> http://code.google.com/p/canviz/source/browse/canviz/trunk/canviz.js?...

Ryan Schmidt

unread,

Mar 19, 2011, 7:34:27 PM3/19/11

to can...@googlegroups.com

On Mar 3, 2011, at 16:18, Ryan Schmidt wrote:

> Tooltips and the six mouse events (onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout) get totally ignored by Canviz unless there is an href attribute. I think we could call that a bug;

Upon further consideration, I think I was probably just copying the behavior of Graphviz. If you use "dot -Tcmap" to generate an image map, Graphviz will only generate areas for shapes that have an href attribute. My intention with Canviz is that it should be a drop-in replacement for png+cmap output, so that's probably why I did this. Except of course that Graphviz cmap output does not include the six mouse events in its output; if it did, perhaps it would remove the necessity for having an href attribute...

Reply all

Reply to author

Forward