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

Re: [svg-developers] SVG ecmascript - setting style attribute using onmouseover/onmouseout

Expand Messages
  • Erik Dahlström
    ... I d be surprised if something like this didn t work: #123:hover { fill: green; } Cheers /Erik -- Erik Dahlstrom, Core
    Message 1 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 2 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 3 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 4 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.