html - i have Multiple svg elements when mouseover on 1 element all element must be show text hover at a same time -
i have multiple svg elements when mouseover on 1 element element must show text hover @ same time..
how can this?
here code...
<html> <head> <title>conservedclusters_fraal_16</title> </head> <body> <svg width="1500" height="500" xmlns="http://www.w3.org/2000/svg" version="1.1"> <style> .tooltip{ font-size: 16px; font-family: times new roman; } .tooltip_bg{ fill: white; stroke: black; stroke-width: 1; opacity: 0.9; } </style> <script type="text/ecmascript"> <![cdata[ function init(evt) { if ( window.svgdocument == null ) { svgdocument = evt.target.ownerdocument; } tooltip = svgdocument.getelementbyid('tooltip'); tooltip_bg = svgdocument.getelementbyid('tooltip_bg'); } function showtooltip(evt, mouseovertext, xpos, ypos) { tooltip.firstchild.data = mouseovertext; length = tooltip.getcomputedtextlength(); if (length + xpos > 1500) { xpos=1500-length-10; } tooltip.setattributens(null,"x",xpos+3); tooltip.setattributens(null,"y",ypos+13); tooltip.setattributens(null,"visibility","visible"); length = tooltip.getcomputedtextlength(); tooltip_bg.setattributens(null,"width",length+8); tooltip_bg.setattributens(null,"x",xpos); tooltip_bg.setattributens(null,"y",ypos); tooltip_bg.setattributens(null,"visibility","visibile"); } function hidetooltip(evt) { tooltip.setattributens(null,"visibility","hidden"); tooltip_bg.setattributens(null,"visibility","hidden"); } function writeconsole(content,linkaddress,linktext,wintitle) { top.consoleref=window.open('','myconsole', '',//'width=350,height=250' +',menubar=0' +',toolbar=1' +',status=0' +',scrollbars=1' +',resizable=1') top.consoleref.document.writeln( '<html><head><title>'+wintitle+'</title></head>' +'<body bgcolor=white onload="self.focus()">' +'<a href="'+linkaddress+'" target="_blank">'+linktext+'</a>'+ '<p><font face="courier">'+content+'</font></p>' +'</body></html>' ) top.consoleref.document.close() } function ongenemouseover(evt,strokecolor,colorval) { var gene = evt.target; var parent = gene.parentnode; var others = parent.getelementsbytagname('path'); (var i=0,len=others.length;i<len;++i) { others[i].style.stroke=strokecolor; others[i].style.fill=colorval; //others[i].setattribute("style", "stroke-linecap: square; stroke-linejoin: miter; fill:"+colorval+"; stroke:"+strokecolor+"; stroke-width:1"); } } ]]> </script> <g class="all1303" onmouseover="ongenemouseover(evt,'red','pink')" onmouseout="ongenemouseover(evt,'black','#cf0f78')"> <path id="all" d=" m487 73l423 73l423 63l403 83l423 103l423 93l487 93 l487 73 " style="stroke-linecap: square; stroke-linejoin: miter; fill:#cf0f78; fill-opacity:1.00; stroke:black; stroke-width:1" onmousemove="showtooltip(evt, 'fraeui1c_4753, 1.00, beta-ketoacyl synthase', 492, 93)" onmouseout="hidetooltip(evt)" /> <path id="all" d=" m257 156l324 156l324 146l344 166l324 186l324 176l257 176 l257 156 " style="stroke-linecap: square; stroke-linejoin: miter; fill:#cf0f78; fill-opacity:1.00; stroke:black; stroke-width:1" onmousemove="showtooltip(evt, 'franean1_2393, 1.00, beta-ketoacyl synthase', 349, 176)" onmouseout="hidetooltip(evt)" /> </g> <rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" rx="4" ry="4" width="55" height="17" visibility="hidden"/> <text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">tooltip</text> </svg> </body> </html>
Comments
Post a Comment