The real recommendation here would be to nest the inner rectangles
inside groups that contain the outer rectangles so that you can catch
the mouseover events as the bubble.
But since you have stated that you do not want to change the structure
of your SVG document, then modifying your two JS functions like so
will do what you want:
function IRmouseover(evt) {
evt.target.setAttributeNS(null,"fill", "red");
var outerId = "G" + evt.target.id.substr(1);
var ele = document.getElementById(outerId);
if(ele) ele.setAttributeNS(null, "fill", "yellow");
}
function IRmouseout(evt) {
evt.target.setAttributeNS(null,"fill", "blue");
var outerId = "G" + evt.target.id.substr(1);
var ele = document.getElementById(outerId);
if(ele) ele.setAttributeNS(null, "fill", "green");
}
Note that this solution is ugly because it depends on the ids of the
various entities to be related and that you'll be able to extract the
"id number" and figure out the outer element. It also requires you to
duplicate some code.
Regards,
Jeff
--- 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-20010904/DTD/svg10.dtd";>
> <svg xmlns="http://www.w3.org/2000/svg"; width="100%" height="100%"
> viewBox="0 0 450 250">
> <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>
>
-----
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/
