[EMAIL PROTECTED] wrote:
> i try to do that you suggest me.It's work but i've one problem.
> if i've more than one rect and i want to show text on each rect,
> how i can do it.
It was an interesting problem, so I made my first try at JavaScript
applied to SVG...
Well, I was greatly helped by two files I found: keySplineTool shown how
to set the text of the debug line (which you will remove anyway, but it
was useful...), and a file named ToolTips which provided the core of the
code, namely how to make a text display the desc of a tag, how to show
and hide it, etc. The later doesn't have any information on where I got
it...
Here is my code, derivated from your code:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd";>
<svg width="400px" height="400px" viewbox="0 0 400 400"
xmlns:xlink="http://www.w3.org/1999/xlink";>
<script type="text/javascript">
<![CDATA[
var caption = document.getElementById("Caption");
var captionContent = document.getElementById("CaptionContent");
var pointedElement, peX, peY;
function Debug(d)
{
var debugText = document.getElementById("Debug");
debugText.getFirstChild().setData(d);
}
function Display()
{
caption.setAttribute("visibility", "visible");
caption.setAttribute("transform", "translate(" + peX + "," + peY + ")");
captionContent.setAttribute("xlink:href", "#" + pointedElement.id);
}
function ShowData(evt)
{
// Avoid redisplaying if already displayed
if (pointedElement != evt.target)
{
pointedElement = GetElementWithId(evt);
if (pointedElement.getAttribute('id')) // Avoid unamed elements
{
// If you want caption to be near cursor
peX = evt.clientX + 4;
peY = evt.clientY - 1;
// If you prefer to have caption below object
peX = Math.abs(pointedElement.getAttribute('x'));
peY = Math.abs(pointedElement.getAttribute('y'));
peY += Math.abs(pointedElement.getAttribute('height')) + 15;
Debug("ShowData: OK - " + pointedElement.id + ' - ' + peX + ', ' + peY);
Display();
}
}
}
function HideData(evt)
{
Debug("HideData");
document.getElementById('Caption').setAttribute('visibility','hidden');
pointedElement = null;
}
// If event is related to an element inside a complex drawing,
// search the parent element holding the ID
function GetElementWithId(evt)
{
// Get element related to event
var target = evt.getTarget();
// While the element hasn't an ID
while (target && !target.getAttribute('id'))
{
// Go up to find the parent element with the ID
target = target.getParentNode();
}
return target;
}
//]]>
</script>
<rect id="1" x="54" y="266" width="37" height="94" fill="Red"
stroke="black"
stroke-width="1" class="" onmouseover="ShowData(evt)"
onmouseout="HideData(evt)">
<desc>First Rectangle</desc>
</rect>
<rect id="2" x="194" y="173" width="37" height="187" fill="Red"
stroke="black"
stroke-width="1" class="" onmouseover="ShowData(evt)"
onmouseout="HideData(evt)">
<desc>Second Red Rectangle</desc>
</rect>
<rect id="3" x="91" y="220" width="37" height="140" fill="Blue"
stroke="black"
stroke-width="1" class="" onmouseover="ShowData(evt)"
onmouseout="HideData(evt)">
<desc>Last Rectangle (blue)</desc>
</rect>
<text id="Caption" x="0" y="0" font-size="12" visibility="hidden"
text-rendering="optimizeLegibility">
|<tref id="CaptionContent" xlink:href="#active"/>|
</text>
<text id="Debug" x="20" y="20" font-size="14"
text-rendering="optimizeLegibility">Debug</text>
</svg>
You can improve by drawing the text over a rectangle (tooltip style),
and it seems you can remove the onmouseover and onmouseout of the rects
and replace them by these two lines:
document.rootElement.addEventListener("mousemove", ShowData, false)
document.rootElement.addEventListener("mouseout", HideData, false)
This is quite elegant, but I think you must then take care that the ids
of the elements to caption follow a given pattern, otherwise you may get
false hits.
The above code works in IE and Mozilla.
HTH.
--
Philippe Lhoste
-- (near) Paris -- France
-- Professional programmer and amateur artist
-- http://Phi.Lho.free.fr
-- -- -- -- -- -- -- -- -- -- -- --
------------------------ Yahoo! Groups Sponsor --------------------~-->
Make a clean sweep of pop-up ads. Yahoo! Companion Toolbar.
Now with Pop-Up Blocker. Get it for free!
http://us.click.yahoo.com/L5YrjA/eSIIAA/yQLSAA/1U_rlB/TM
--------------------------------------------------------------------~->
-----
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/
<*> 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/
