--- In [email protected], "~:'' ãããã¨ãã"ããã¾ããã" <[EMAIL PROTECTED]> wrote: > > Rainer, > > had you considered using CSS, rather than script or declarative > animation? > > http://www.peepo.co.uk is one example. > > where only the presentation attributes are changing, on action such > as hover, this method is preferable, provided CSS is supported. > > regards > > Jonathan Chetwynd
Jonathan, I'm curious, how can he change two classes with no script while keeping the structure that he has, like he says he wishes? 'Cause when he hovers the rect in the topmost layer he'll be hovering out of the other... Domenico > > > > On 9 May 2007, at 21:54, svgquestion 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> > ----- 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/
