I have Multiple SVG elements when mouseover on 1 element all element must be show text hover at a same time..
How i can do this?
Here is my 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');
for (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>