Thanks very much for your help Yannick! That change fixed the problem for me.
Donna --- In [email protected], yannick.bochatay@... wrote: > > Hi, > your variables are declared as global, so when you call the init function a > second time, they are overwritten. > Just move these variables and functions inside the Init constructor and it > will be fine (see below). > Yannick > > function Init(anchor) { > > var SVGRoot = null; > var viewBox = null; > var TrueCoords = null; > var singleTip = null; > var singleBox = null; > var singleText = null; > var tiptspan = null; > > function GetTrueCoords(evt) > { > var p1 = SVGRoot.createSVGPoint(); > var p2; > var m = SVGRoot.getScreenCTM(); > p1.x = evt.clientX; > p1.y = evt.clientY; > p2 = p1.matrixTransform(m.inverse()); > > TrueCoords.x = Math.round(p2.x*100) / 100; > TrueCoords.y = Math.round(p2.y*100) / 100; > } > > function HideTooltip( evt ) > { > tiptspan.firstChild.nodeValue = null; > singleTip.setAttributeNS(null, 'visibility', 'hidden'); > } > > function ShowTooltip( evt ) > { > GetTrueCoords( evt ); > var targetElement = evt.target; > > var targetTspan = > targetElement.getElementsByTagName('desc').item(0); > > if ( targetTspan) { > if (targetTspan.firstChild != null) > tiptspan.firstChild.nodeValue = > targetTspan.firstChild.nodeValue; } > > if ( '' != tiptspan.firstChild.nodeValue ) > { > var outline = singleText.getBBox(); > > singleTip.setAttributeNS(null, 'visibility', 'visible'); > > xPos = TrueCoords.x; > yPos = TrueCoords.y-20; > > singleBox.setAttributeNS(null, 'height', outline.height > + 10); > singleTip.setAttributeNS(null, 'transform', > 'translate(' + xPos + ',' + yPos + ')'); > } > } > > SVGRoot = document.getElementById(anchor); > TrueCoords = SVGRoot.createSVGPoint(); > > singleTip = document.getElementById(anchor + '_singleTip'); > > singleBox = document.getElementById(anchor + '_singlebox'); > > singleText = document.getElementById(anchor + '_singleText'); > tiptspan = document.getElementById(anchor + '_tiptspan'); > > SVGRoot.addEventListener('mousemove', ShowTooltip, false); > SVGRoot.addEventListener('mouseout', HideTooltip, false); > > if (navigator.appName == 'Microsoft Internet Explorer') { > if (singleText != null) {singleText.setAttributeNS(null, > 'class', 'ietiptext' ); } > } > } > > > ----- Mail original ----- > De: "Donna Antle" <Donna.Antle@...> > Ã: [email protected] > Envoyé: Mercredi 25 Janvier 2012 20:30:59 > Objet: [svg-developers] problem adding multiple SVG's containing event > listeners in HTML5 > > > > > > > Hi all, > > I've got some SVG files that contain mousemove event listeners to invoke a > script to display a tooltip. If I try to add multiple SVG's to an HTML5 doc, > only the last page shows the tooltips when I run in most browsers. In IE9, I > get the tooltips across all the SVG's. This is my sample HTML file containing > the script and 2 child SVG elements. Any idea what I need to do to get each > SVG to display their unique tooltips? > > Thanks! > > > <!DOCTYPE html > > <html> > <head> > <meta charset="windows-1252"/> > <meta name="generator" content="SAS 9.4"/> > <title>SVG Inlined in HTML5</title> > > <script type="text/ecmascript"> > var SVGRoot = null; > var viewBox = null; > var TrueCoords = null; > var singleTip = null; > var singleBox = null; > var singleText = null; > var tiptspan = null; > function Init(anchor) { > SVGRoot = document.getElementById(anchor); > TrueCoords = SVGRoot.createSVGPoint(); > > singleTip = document.getElementById(anchor + '_singleTip'); > > singleBox = document.getElementById(anchor + '_singlebox'); > > singleText = document.getElementById(anchor + '_singleText'); > tiptspan = document.getElementById(anchor + '_tiptspan'); > > SVGRoot.addEventListener('mousemove', ShowTooltip, false); > SVGRoot.addEventListener('mouseout', HideTooltip, false); > > if (navigator.appName == 'Microsoft Internet Explorer') { > if (singleText != null) > singleText.setAttributeNS(null, 'class', 'ietiptext' ); > } > } > > function GetTrueCoords(evt) > { > var p1 = SVGRoot.createSVGPoint(); > var p2; > var m = SVGRoot.getScreenCTM(); > p1.x = evt.clientX; > p1.y = evt.clientY; > p2 = p1.matrixTransform(m.inverse()); > > TrueCoords.x = Math.round(p2.x*100) / 100; > TrueCoords.y = Math.round(p2.y*100) / 100; > } > > function HideTooltip( evt ) > { > tiptspan.firstChild.nodeValue = null; > singleTip.setAttributeNS(null, 'visibility', 'hidden'); > } > > function ShowTooltip( evt ) > { > GetTrueCoords( evt ); > var targetElement = evt.target; > > var targetTspan = targetElement.getElementsByTagName('desc').item(0); > > if ( targetTspan) { > if (targetTspan.firstChild != null) > tiptspan.firstChild.nodeValue = targetTspan.firstChild.nodeValue; } > > if ( '' != tiptspan.firstChild.nodeValue ) > { > > var outline = singleText.getBBox(); > > singleTip.setAttributeNS(null, 'visibility', 'visible'); > > xPos = TrueCoords.x; > yPos = TrueCoords.y-20; > > singleBox.setAttributeNS(null, 'height', outline.height + 10); > singleTip.setAttributeNS(null, 'transform', 'translate(' + xPos + ',' + yPos > + ')'); > } > } > </script> > > > <svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink=" > http://www.w3.org/1999/xlink " > width="801" height="601" > xml:space="preserve" baseProfile="full" version="1.1" id="SVGMain1" > onload='Init("SVGMain1")' > > <desc></desc> > <defs> > <clipPath id="SVGMain_clipPage1"> > <rect x="-1" y="-1" width="801" height="601"/> > </clipPath> > </defs> > <g id="SVGMain1_Page1"> > <rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; > fill-opacity: 0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0; > stroke-linejoin: round; "/> > <rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke: > #FFFFFF; stroke-width: 1; stroke-linejoin: round; "/> > <path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; > stroke-width: 1; fill: none; stroke-linejoin: round; "/> > <text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif; > font-size: 19px; font-weight: bold; ">SVG1</text> > <rect id='rect1' x="0" y="0" width="800" height="600" fill="#FFFFFF" > fill-opacity="0"> > <desc>Graphics text slide 1</desc> > </rect> > </g> > <g id="SVGMain1_singleTip" visibility="hidden" pointer-events="none"> > <rect id="SVGMain1_singlebox" x="0" y="0" width="88" height="20" rx="2" > ry="2" fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/> > <text id="SVGMain1_singleText" x="5" y="10" font-family="'Arial', sans-serif" > font-size="8" class="tiptext"> > <tspan id="SVGMain1_tiptspan" x="5"><![CDATA[ ]]></tspan> > </text> > </g> > <defs> > <style type="text/css"><![CDATA[ > text { white-space: pre } > text.ietiptext { white-space: normal } > text.tiptext { white-space: pre } > ]]></style> > </defs> > > </svg> > > <svg xmlns=" http://www.w3.org/2000/svg " xmlns:xlink=" > http://www.w3.org/1999/xlink " > width="801" height="601" xml:space="preserve" baseProfile="full" > version="1.1" id="SVGMain2" onload='Init("SVGMain2")' viewBox="-1 -1 801 > 601"> > <desc></desc> > <defs> > <clipPath id="SVGMain2_clipPage1"> > <rect x="-1" y="-1" width="801" height="601"/> > </clipPath> > </defs> > <g id="SVGMain2_Page1"> > <rect x="0" y="0" width="800" height="600" style="fill: #FFFFFF; > fill-opacity: 0.0; stroke: #FFFFFF; stroke-width: 1; stroke-opacity: 0.0; > stroke-linejoin: round; "/> > <rect x="0" y="0" width="799" height="599" style="fill: #FFFFFF; stroke: > #FFFFFF; stroke-width: 1; stroke-linejoin: round; "/> > <path d="M0 599L0 0L799 0L799 599L0 599" style="stroke: #000000; > stroke-width: 1; fill: none; stroke-linejoin: round; "/> > <text x="374" y="16" style="fill: #000000; font-family: 'Arial', sans-serif; > font-size: 19px; font-weight: bold; ">SVG2</text> > <rect id='rect2' x="0" y="0" width="800" height="600" fill="#FFFFFF" > fill-opacity="0"> > <desc>Graphics text slide 2</desc> > </rect> > </g> > <g id="SVGMain2_singleTip" visibility="hidden" pointer-events="none"> > <rect id="SVGMain2_singlebox" x="0" y="0" width="88" height="20" rx="2" > ry="2" fill="white" stroke="black" stroke-width="1.0" opacity="0.8"/> > <text id="SVGMain2_singleText" x="5" y="10" font-family="'Arial', sans-serif" > font-size="8" class="tiptext"> > <tspan id="SVGMain2_tiptspan" x="5"><![CDATA[ ]]></tspan> > </text> > </g> > > </svg> > > </body> > </html> > ------------------------------------ ----- 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/
