Loading ...
Sorry, an error occurred while loading the content.

Re: SVG ecmascript - setting style attribute using onmouseover/onmouseout

Expand Messages
  • Francis Hemsher
    Hi Raktim, When changing text content, try: mytextElem.firstChild.setData( my new text ) Also has document been defined at the SVG document? In SVG you ll
    Message 1 of 6 , Aug 10, 2009
    • 0 Attachment
      Hi Raktim,


      When changing text content, try:
      mytextElem.firstChild.setData("my new text")


      Also has 'document' been defined at the SVG document?

      In SVG you'll find its much easier to init/access style attribute names and values rather than using 'style':
      <text fill="red" ... />

      Regards,
      Francis

      --- In svg-developers@yahoogroups.com, "raktims" <raktim.sinha@...> wrote:
      >
      > Hello,
      >
      > I am fairly inexperienced with SVG and I cant accomplish a seemingly easy task.
      >
      > I have a svg file that displays a bar plot with 1 bar. I am trying to change its color and display some text with onmouseover/onmouseout events but its not working.
      >
      > I could achieve the same effect setting the CSS attribute of the SVG rect object using mouseover/mouseout, in most browsers (*not in Firefox). This code is commented out.
      >
      > I would really appreciate if someone points out my mistake.
      > Thanks,
      > Raktim
      >
      > **** SVG Code *****
      > <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
      > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd" ><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="400" overflow="visible">
      > <script type="text/ecmascript"><![CDATA[
      > var svgNS = "http://www.w3.org/2000/svg";
      > var xlinkNS = "http://www.w3.org/1999/xlink";
      >
      > function changeText(evt, ratio, gene, probe, start)
      > {
      > //evt.target.setAttributeNS(null,"fill","red");
      > evt.target.setAttribute("fill", "red");
      >
      > targetProbetext = document.getElementById("Probe");
      > targetRatiotext = document.getElementById("Ratio");
      > targetGenetext = document.getElementById("Gene");
      > targetStarttext = document.getElementById("Start");
      >
      > var newProbeText = document.createTextNode("Probe : " + probe);
      > var newRatioText = document.createTextNode("Log Ratio : " + ratio);
      > var newGeneText = document.createTextNode("Gene : " + gene);
      > var newStartText = document.createTextNode("Start BP : " + start);
      >
      > targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
      > targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
      > targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
      > targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
      > //
      > }
      > function changeTextNotOver(evt)
      > {
      > //evt.target.setAttributeNS(null,"fill","rgb(251,159,84);");
      > evt.target.setAttribute("fill", "rgb(251,159,84);");
      >
      > targetProbetext=document.getElementById("Probe");
      > targetRatiotext=document.getElementById("Ratio");
      > targetGenetext=document.getElementById("Gene");
      > targetStarttext=document.getElementById("Start");
      >
      > var newProbeText = document.createTextNode("Probe : ");
      > var newRatioText = document.createTextNode("Log Ratio : ");
      > var newGeneText = document.createTextNode("Gene : ");
      > var newStartText = document.createTextNode("Start BP : ");
      >
      > targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
      > targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
      > targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
      > targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
      > }
      >
      > ]]></script>
      > <desc>Genome Browser</desc>
      > <g transform="translate(10,10) scale(0.28)">
      > <text id="Probe" x="200" y="50" font-size="55" style="fill:rgb(200, 150, 200)">Probe :</text>
      > <text id="Ratio" x="200" y="120" font-size="55" style="fill:rgb(200, 150, 200)">Log Ratio :</text>
      > <text id="Gene" x="200" y="190" font-size="55" style="fill:rgb(200, 150, 200)">Gene :</text>
      > <text id="Start" x="200" y="250" font-size="55" style="fill:rgb(200, 150, 200)">StartBP :</text>
      > <g style="stroke-width:5; stroke:black">
      > <path d="M 0 700 L 362 700 Z"/>
      > <path d="M 0 0 L 0 700 Z"/>
      > </g>
      >
      > <a xlink:href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=gene&cmd=search&term=NDUFV3" target="new">
      > <rect id="123" style="fill:blue;" height="700" width="70" y="0" x="100" onmouseover="changeText(evt, 3, 'NDUFV3', 'A_23_P211285',43202005)" onmouseout="changeTextNotOver(evt)">
      > <!-- <set attributeName="fill" attributeType="CSS" to="red" begin="mouseover" end="mouseout"/> -->
      > </rect>
      > </a>
      >
      > </g>
      > </svg>
      >
    • Erik Dahlström
      ... I d be surprised if something like this didn t work: #123:hover { fill: green; } Cheers /Erik -- Erik Dahlstrom, Core
      Message 2 of 6 , Aug 11, 2009
      • 0 Attachment
        On Mon, 10 Aug 2009 01:45:39 +0200, raktims <raktim.sinha@...> wrote:

        > Hello,
        >
        > I am fairly inexperienced with SVG and I cant accomplish a seemingly easy task.
        >
        > I have a svg file that displays a bar plot with 1 bar. I am trying to change its color and display some text with onmouseover/onmouseout events but its not working.
        >
        > I could achieve the same effect setting the CSS attribute of the SVG rect object using mouseover/mouseout, in most browsers (*not in Firefox). This code is commented out.
        >
        > I would really appreciate if someone points out my mistake.
        > Thanks,
        > Raktim

        I'd be surprised if something like this didn't work:

        <style type="text/css">
        #123:hover { fill: green; }
        </style>

        Cheers
        /Erik

        --
        Erik Dahlstrom, Core Technology Developer, Opera Software
        Co-Chair, W3C SVG Working Group
        Personal blog: http://my.opera.com/macdev_ed
      • Jeff Schiller
        ... Hello, The problem is that your rect has the following: and in your code you re doing: evt.target.setAttribute( fill ,
        Message 3 of 6 , Aug 17, 2009
        • 0 Attachment
          --- In svg-developers@yahoogroups.com, "raktims" <raktim.sinha@...> wrote:
          >
          > Hello,
          >
          > I am fairly inexperienced with SVG and I cant accomplish a seemingly easy task.
          >
          > I have a svg file that displays a bar plot with 1 bar. I am trying to change its color and display some text with onmouseover/onmouseout events but its not working.
          >
          > I could achieve the same effect setting the CSS attribute of the SVG rect object using mouseover/mouseout, in most browsers (*not in Firefox). This code is commented out.
          >
          > I would really appreciate if someone points out my mistake.
          > Thanks,
          > Raktim
          >
          > **** SVG Code *****
          > <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
          > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd" ><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="400" overflow="visible">
          > <script type="text/ecmascript"><![CDATA[
          > var svgNS = "http://www.w3.org/2000/svg";
          > var xlinkNS = "http://www.w3.org/1999/xlink";
          >
          > function changeText(evt, ratio, gene, probe, start)
          > {
          > //evt.target.setAttributeNS(null,"fill","red");
          > evt.target.setAttribute("fill", "red");
          >
          > targetProbetext = document.getElementById("Probe");
          > targetRatiotext = document.getElementById("Ratio");
          > targetGenetext = document.getElementById("Gene");
          > targetStarttext = document.getElementById("Start");
          >
          > var newProbeText = document.createTextNode("Probe : " + probe);
          > var newRatioText = document.createTextNode("Log Ratio : " + ratio);
          > var newGeneText = document.createTextNode("Gene : " + gene);
          > var newStartText = document.createTextNode("Start BP : " + start);
          >
          > targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
          > targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
          > targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
          > targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
          > //
          > }
          > function changeTextNotOver(evt)
          > {
          > //evt.target.setAttributeNS(null,"fill","rgb(251,159,84);");
          > evt.target.setAttribute("fill", "rgb(251,159,84);");
          >
          > targetProbetext=document.getElementById("Probe");
          > targetRatiotext=document.getElementById("Ratio");
          > targetGenetext=document.getElementById("Gene");
          > targetStarttext=document.getElementById("Start");
          >
          > var newProbeText = document.createTextNode("Probe : ");
          > var newRatioText = document.createTextNode("Log Ratio : ");
          > var newGeneText = document.createTextNode("Gene : ");
          > var newStartText = document.createTextNode("Start BP : ");
          >
          > targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
          > targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
          > targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
          > targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
          > }
          >
          > ]]></script>
          > <desc>Genome Browser</desc>
          > <g transform="translate(10,10) scale(0.28)">
          > <text id="Probe" x="200" y="50" font-size="55" style="fill:rgb(200, 150, 200)">Probe :</text>
          > <text id="Ratio" x="200" y="120" font-size="55" style="fill:rgb(200, 150, 200)">Log Ratio :</text>
          > <text id="Gene" x="200" y="190" font-size="55" style="fill:rgb(200, 150, 200)">Gene :</text>
          > <text id="Start" x="200" y="250" font-size="55" style="fill:rgb(200, 150, 200)">StartBP :</text>
          > <g style="stroke-width:5; stroke:black">
          > <path d="M 0 700 L 362 700 Z"/>
          > <path d="M 0 0 L 0 700 Z"/>
          > </g>
          >
          > <a xlink:href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=gene&cmd=search&term=NDUFV3" target="new">
          > <rect id="123" style="fill:blue;" height="700" width="70" y="0" x="100" onmouseover="changeText(evt, 3, 'NDUFV3', 'A_23_P211285',43202005)" onmouseout="changeTextNotOver(evt)">
          > <!-- <set attributeName="fill" attributeType="CSS" to="red" begin="mouseover" end="mouseout"/> -->
          > </rect>
          > </a>
          >
          > </g>
          > </svg>
          >

          Hello,

          The problem is that your rect has the following:

          <rect style="fill:blue;" ...>

          and in your code you're doing:

          evt.target.setAttribute("fill", "red");

          which changes the ATTRIBUTE 'fill'. However, the 'style' attribute overrides this so that your rect is always rendered blue. Change your SVG to this:

          <rect fill="blue" ...>

          and it works.

          You also do this in changeTextNotover():

          evt.target.setAttribute("fill", "rgb(251,159,84);");

          The semicolon in the fill attribute value is an error, you need to remove it

          Here's a tip: Learn to use Firebug (or Opera Dragonfly or Safari debugger) for stuff like this. You can watch the rect's DOM as you mouseover and mouseout and you would notice that the style attribute is present and not changing. Or you can console.log(evt.target), etc.

          Regards,
          Jeff Schiller
        • raktims
          Thanks for the help everyone. Removing the style attribute for fill as many of you pointed out solved the problem. Best, Raktim
          Message 4 of 6 , Aug 20, 2009
          • 0 Attachment
            Thanks for the help everyone. Removing the style attribute for fill as many of you pointed out solved the problem.
            Best,
            Raktim


            --- In svg-developers@yahoogroups.com, "Jeff Schiller" <jeff_schiller@...> wrote:
            >
            > --- In svg-developers@yahoogroups.com, "raktims" <raktim.sinha@> wrote:
            > >
            > > Hello,
            > >
            > > I am fairly inexperienced with SVG and I cant accomplish a seemingly easy task.
            > >
            > > I have a svg file that displays a bar plot with 1 bar. I am trying to change its color and display some text with onmouseover/onmouseout events but its not working.
            > >
            > > I could achieve the same effect setting the CSS attribute of the SVG rect object using mouseover/mouseout, in most browsers (*not in Firefox). This code is commented out.
            > >
            > > I would really appreciate if someone points out my mistake.
            > > Thanks,
            > > Raktim
            > >
            > > **** SVG Code *****
            > > <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
            > > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd" ><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="400" overflow="visible">
            > > <script type="text/ecmascript"><![CDATA[
            > > var svgNS = "http://www.w3.org/2000/svg";
            > > var xlinkNS = "http://www.w3.org/1999/xlink";
            > >
            > > function changeText(evt, ratio, gene, probe, start)
            > > {
            > > //evt.target.setAttributeNS(null,"fill","red");
            > > evt.target.setAttribute("fill", "red");
            > >
            > > targetProbetext = document.getElementById("Probe");
            > > targetRatiotext = document.getElementById("Ratio");
            > > targetGenetext = document.getElementById("Gene");
            > > targetStarttext = document.getElementById("Start");
            > >
            > > var newProbeText = document.createTextNode("Probe : " + probe);
            > > var newRatioText = document.createTextNode("Log Ratio : " + ratio);
            > > var newGeneText = document.createTextNode("Gene : " + gene);
            > > var newStartText = document.createTextNode("Start BP : " + start);
            > >
            > > targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
            > > targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
            > > targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
            > > targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
            > > //
            > > }
            > > function changeTextNotOver(evt)
            > > {
            > > //evt.target.setAttributeNS(null,"fill","rgb(251,159,84);");
            > > evt.target.setAttribute("fill", "rgb(251,159,84);");
            > >
            > > targetProbetext=document.getElementById("Probe");
            > > targetRatiotext=document.getElementById("Ratio");
            > > targetGenetext=document.getElementById("Gene");
            > > targetStarttext=document.getElementById("Start");
            > >
            > > var newProbeText = document.createTextNode("Probe : ");
            > > var newRatioText = document.createTextNode("Log Ratio : ");
            > > var newGeneText = document.createTextNode("Gene : ");
            > > var newStartText = document.createTextNode("Start BP : ");
            > >
            > > targetProbetext.replaceChild(newProbeText,targetProbetext.firstChild);
            > > targetRatiotext.replaceChild(newRatioText,targetRatiotext.firstChild);
            > > targetGenetext.replaceChild(newGeneText,targetGenetext.firstChild);
            > > targetStarttext.replaceChild(newStartText,targetStarttext.firstChild);
            > > }
            > >
            > > ]]></script>
            > > <desc>Genome Browser</desc>
            > > <g transform="translate(10,10) scale(0.28)">
            > > <text id="Probe" x="200" y="50" font-size="55" style="fill:rgb(200, 150, 200)">Probe :</text>
            > > <text id="Ratio" x="200" y="120" font-size="55" style="fill:rgb(200, 150, 200)">Log Ratio :</text>
            > > <text id="Gene" x="200" y="190" font-size="55" style="fill:rgb(200, 150, 200)">Gene :</text>
            > > <text id="Start" x="200" y="250" font-size="55" style="fill:rgb(200, 150, 200)">StartBP :</text>
            > > <g style="stroke-width:5; stroke:black">
            > > <path d="M 0 700 L 362 700 Z"/>
            > > <path d="M 0 0 L 0 700 Z"/>
            > > </g>
            > >
            > > <a xlink:href="http://www.ncbi.nlm.nih.gov/sites/entrez?db=gene&cmd=search&term=NDUFV3" target="new">
            > > <rect id="123" style="fill:blue;" height="700" width="70" y="0" x="100" onmouseover="changeText(evt, 3, 'NDUFV3', 'A_23_P211285',43202005)" onmouseout="changeTextNotOver(evt)">
            > > <!-- <set attributeName="fill" attributeType="CSS" to="red" begin="mouseover" end="mouseout"/> -->
            > > </rect>
            > > </a>
            > >
            > > </g>
            > > </svg>
            > >
            >
            > Hello,
            >
            > The problem is that your rect has the following:
            >
            > <rect style="fill:blue;" ...>
            >
            > and in your code you're doing:
            >
            > evt.target.setAttribute("fill", "red");
            >
            > which changes the ATTRIBUTE 'fill'. However, the 'style' attribute overrides this so that your rect is always rendered blue. Change your SVG to this:
            >
            > <rect fill="blue" ...>
            >
            > and it works.
            >
            > You also do this in changeTextNotover():
            >
            > evt.target.setAttribute("fill", "rgb(251,159,84);");
            >
            > The semicolon in the fill attribute value is an error, you need to remove it
            >
            > Here's a tip: Learn to use Firebug (or Opera Dragonfly or Safari debugger) for stuff like this. You can watch the rect's DOM as you mouseover and mouseout and you would notice that the style attribute is present and not changing. Or you can console.log(evt.target), etc.
            >
            > Regards,
            > Jeff Schiller
            >
          • george55bu
            If you didn t want to remove the fill attribute as Jeff suggested you could use evt.target.setAttribute( style , fill:red ); instead. If you want to go CSS all
            Message 5 of 6 , Aug 29, 2009
            • 0 Attachment
              If you didn't want to remove the fill attribute as Jeff suggested you could use evt.target.setAttribute("style","fill:red"); instead.

              If you want to go CSS all the way as Erik suggested use id='x123'
            Your message has been successfully submitted and would be delivered to recipients shortly.