steve
05-18-2005, 03:01 AM
Would anyone know how i could get this java script working in a external java script file
interacting with svg rectangle elements. I need the user to get a tool tip when the user moves there mouse onto the element...
This is the java script...
function GetTrueCoords(evt) {
newScale = SVGRoot.currentScale;
translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x)/newScale;
TrueCoords.y = (evt.clientY - translation.y)/newScale;
}
function ShowTooltip(evt, turnOn, text) {
try {
if (!evt || !turnOn) {
var node = SVGDocument.getElementById('tooltip')
var nodeText = SVGDocument.getElementById('tooltipText')
SVGRoot.removeChild(node)
SVGRoot.removeChild(nodeText)
} else {
GetTrueCoords(evt);
var xRectPos = TrueCoords.x - 50;
var yRectPos = TrueCoords.y - 35;
var xTextPos = xRectPos + 8;
var yTextPos = yRectPos + 15;
// Create rect node
var myRect = evt.target.ownerDocument.createElementNS(null,"rect");
myRect.setAttributeNS(null,"id","tooltip");
myRect.setAttributeNS(null,"x",xRectPos);
myRect.setAttributeNS(null,"y",yRectPos);
myRect.setAttributeNS(null,"rx","3");
myRect.setAttributeNS(null,"ry","3");
myRect.setAttributeNS(null,"fill-opacity", "0.7");
myRect.setAttributeNS(null,"width",text.length*Cool;
myRect.setAttributeNS(null,"height","20");
myRect.setAttributeNS(null,"fill","white");
myRect.setAttributeNS(null,"stroke","blue");
SVGRoot.appendChild(myRect);
// Create text node to insert
var textNode = evt.target.ownerDocument.createElementNS(null,"text");
textNode.setAttributeNS(null,"id","tooltipText");
textNode.setAttributeNS(null,"x",xTextPos);
textNode.setAttributeNS(null,"y",yTextPos);
textNode.setAttributeNS(null,"style","fill:blue;font-size:13;text-anchor:start;");
textNode.appendChild(evt.target.ownerDocument.crea teTextNode(text));
SVGRoot.appendChild(textNode);
}
} catch(er){}
}
could someone tell me how i would set my svg file to call all these functions so the tool tips would work thanks...
interacting with svg rectangle elements. I need the user to get a tool tip when the user moves there mouse onto the element...
This is the java script...
function GetTrueCoords(evt) {
newScale = SVGRoot.currentScale;
translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x)/newScale;
TrueCoords.y = (evt.clientY - translation.y)/newScale;
}
function ShowTooltip(evt, turnOn, text) {
try {
if (!evt || !turnOn) {
var node = SVGDocument.getElementById('tooltip')
var nodeText = SVGDocument.getElementById('tooltipText')
SVGRoot.removeChild(node)
SVGRoot.removeChild(nodeText)
} else {
GetTrueCoords(evt);
var xRectPos = TrueCoords.x - 50;
var yRectPos = TrueCoords.y - 35;
var xTextPos = xRectPos + 8;
var yTextPos = yRectPos + 15;
// Create rect node
var myRect = evt.target.ownerDocument.createElementNS(null,"rect");
myRect.setAttributeNS(null,"id","tooltip");
myRect.setAttributeNS(null,"x",xRectPos);
myRect.setAttributeNS(null,"y",yRectPos);
myRect.setAttributeNS(null,"rx","3");
myRect.setAttributeNS(null,"ry","3");
myRect.setAttributeNS(null,"fill-opacity", "0.7");
myRect.setAttributeNS(null,"width",text.length*Cool;
myRect.setAttributeNS(null,"height","20");
myRect.setAttributeNS(null,"fill","white");
myRect.setAttributeNS(null,"stroke","blue");
SVGRoot.appendChild(myRect);
// Create text node to insert
var textNode = evt.target.ownerDocument.createElementNS(null,"text");
textNode.setAttributeNS(null,"id","tooltipText");
textNode.setAttributeNS(null,"x",xTextPos);
textNode.setAttributeNS(null,"y",yTextPos);
textNode.setAttributeNS(null,"style","fill:blue;font-size:13;text-anchor:start;");
textNode.appendChild(evt.target.ownerDocument.crea teTextNode(text));
SVGRoot.appendChild(textNode);
}
} catch(er){}
}
could someone tell me how i would set my svg file to call all these functions so the tool tips would work thanks...