--- In [email protected], "svgquestion" <[EMAIL PROTECTED]>
wrote:
>
> Dear list,
>
> thank you very much for your replies. I give you some more details.
> Please, find below my script:
>
> The script works fine:
> 1. if I move my mouse over <g id="BA> the color of the corresponding
> polygone changes from green to yellow
> 2. if I move my mouse over <g id="IR> the color of the small
> polygone changes from blue to red.
>
> I only would do one modification without modifying the structure of
> the svg file:
>
> I'm looking for a solution so that the color of the corresponding
> underlying element in the groupe <g id="BA> and the color of the
> corresponding overlaying element in the groupe <g id="IR> changes if
> I move my mouse over a small blue rectangle of the topmost <g
> id="IR> groupe. I hope there might be a solution without changing
> the groupings of the elements.
>
> Thanks a lot for your help
>
> Greetings from Paris
>
> Rainer
>
>
> <?xml version="1.0" encoding="UTF-8"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
> 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-/DTD/svg10.dtd";>
> <svg xmlns="http://www.w3.org/2000/svg"; width="100%" height="100%"
> viewBox="">
> <title>MOUSEOVER</title>
> <script type="text/ecmascript">
> <![CDATA[
>
> function IRmouseover(evt) {
> evt.target.setAttributeNS(null,"fill", "red");
> }
>
> function IRmouseout(evt) {
> evt.target.setAttributeNS(null,"fill", "blue");
> }
> function BAmouseover(evt) {
> evt.target.setAttributeNS(null,"fill", "yellow");
> }
> function BAmouseout(evt) {
> evt.target.setAttributeNS(null,"fill", "green");
> }
>
> ]]>
> </script>
>
> //FIRST LAYER (POLYGONES)
> <g id="BA" fill="green" onmouseover="BAmouseover(evt)"
> onmouseout="BAmouseout(evt)">
> <rect x="50" y="50" width="50" height="50" id="G1" />
> <rect x="100" y="50" width="50" height="50" id="G2" />
> <rect x="150" y="50" width="50" height="50" id="G3" />
> <rect x="50" y="100" width="50" height="50" id="G4" />
> <rect x="100" y="100" width="50" height="50" id="G5" />
> <rect x="150" y="100" width="50" height="50" id="G6" />
> </g>
> SECOND LAYER (SYMBOLS)
> <g id="IR" fill="blue" onmouseover="IRmouseover(evt)"
> onmouseout="IRmouseout(evt)">
> <rect x="65" y="75" width="10" height="10" id="B1" />
> <rect x="125" y="75" width="10" height="10" id="B2" />
> </g>
> </svg>
>
1) You need to remove mouseover and mouseout from the IR group and
insert them in the rect elements, and include in the parameters the id
of the elements in BA that you need to change:
<g id="IR" fill="blue">
<rect x="65" y="75" width="10" height="10" id="B1"
onmouseover="IRmouseover(evt,'G1')" onmouseout="IRmouseout(evt,'G1')"/>
<rect x="125" y="75" width="10" height="10" id="B2"
onmouseover="IRmouseover(evt,'G2')" onmouseout="IRmouseout(evt,'G2')"/>
</g>
2) modify IRmouseover and IRmouseout:
function IRmouseover(evt,id) {
evt.target.setAttributeNS(null,"fill", "red");
document.getElementById(id).setAttributeNS(null,"fill", "yellow");
}
function IRmouseout(evt,id) {
evt.target.setAttributeNS(null,"fill", "blue");
document.getElementById(id).setAttributeNS(null,"fill", "green");
}
Domenico
-----
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:
mailto:[EMAIL PROTECTED]
mailto:[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/
