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

view info on mouse over?

Expand Messages
  • csorba_edith
    Hi, I was trying to implement a mouseover effect on my SVG map - to view the name of the feature the mouse points at on a line - and I was using the following
    Message 1 of 4 , Aug 1, 2006
    • 0 Attachment
      Hi,
      I was trying to implement a mouseover effect on my SVG map - to view
      the name of the feature the mouse points at on a line - and I was
      using the following .js code:
      function viewInfo(evt) {
      var infoLine = document.getElementById("infoNote");
      text= infoLine.getFirstChild;
      var note= evt.getTarget.getAttributeNS(null,"name");
      text.setData(note);
      }
      It functions OK in IE, but Opera/Firefox does not read this function
      and Batik gives me an error:
      "viewinfo is not defined"
      The same is the situation with the .js code I use to check the
      visibility of a layer (so it can be turned on/off):
      function viewLayer(name) {
      theLayer = document.getElementById(name);
      theVisibility = theLayer.getAttributeNS(null,"visibility");
      if (theVisibility == "visible") {
      theLayer.setAttributeNS(null,"visibility", "hidden");
      }
      else if (theVisibility == "hidden") {
      theLayer.setAttributeNS(null,"visibility", "visible");
      }
      }
      The error message in Batik is the same:
      "viewLayer is not defined"
      Can anyone help me out what is the problem with these .js functions?
      Thank you very much.
      Csorba
    • Andreas Neumann
      Hi Edith, ... evt.getTarget.... is wrong and should be evt.target.... and it should be infoLine.firstChild and not infoLine.getFirstChild() - note that you
      Message 2 of 4 , Aug 1, 2006
      • 0 Attachment
        Hi Edith,

        --- In svg-developers@yahoogroups.com, "csorba_edith" <csorba_edith@...> wrote:
        >
        > Hi,
        > I was trying to implement a mouseover effect on my SVG map - to view
        > the name of the feature the mouse points at on a line - and I was
        > using the following .js code:
        > function viewInfo(evt) {
        > var infoLine = document.getElementById("infoNote");
        > text= infoLine.getFirstChild;
        > var note= evt.getTarget.getAttributeNS(null,"name");
        > text.setData(note);
        > }

        evt.getTarget.... is wrong and should be evt.target....
        and it should be infoLine.firstChild and not infoLine.getFirstChild() - note that you omitted
        the (), as this is a method. I am surprised that it works at all in ASV. Are you sure it doesn't
        give any error messages?

        That way it works in all viewers and browsers.

        See also http://jwatt.org/svg/authoring/

        > It functions OK in IE, but Opera/Firefox does not read this function
        > and Batik gives me an error:
        > "viewinfo is not defined"
        > The same is the situation with the .js code I use to check the
        > visibility of a layer (so it can be turned on/off):
        > function viewLayer(name) {
        > theLayer = document.getElementById(name);
        > theVisibility = theLayer.getAttributeNS(null,"visibility");
        > if (theVisibility == "visible") {
        > theLayer.setAttributeNS(null,"visibility", "hidden");
        > }
        > else if (theVisibility == "hidden") {
        > theLayer.setAttributeNS(null,"visibility", "visible");
        > }
        > }

        I don't see what's wrong here.

        In case you want to display your attributes as tooltips, I provide a tooltip script at
        http://www.carto.net/papers/svg/gui/mapApp/ , see example at
        http://www.carto.net/papers/svg/gui/tooltips/

        Andreas
      • csorba_edith
        Hi, Thanks you for the help. Have one further question. I managed to change the .js for the viewInfo function, so now Opera and Firefox view it (although Batik
        Message 3 of 4 , Aug 2, 2006
        • 0 Attachment
          Hi,
          Thanks you for the help. Have one further question.
          I managed to change the .js for the viewInfo function, so now Opera
          and Firefox view it (although Batik still gives an error). But it
          works only for the ID, not for the Name:

          function viewInfoName(evt) {
          var infoLine = document.getElementById("infoName").firstChild;
          var note= evt.target.getAttributeNS(null,"name");
          infoLine.nodeValue = note;
          }

          function viewInfoID(evt) {
          var infoLine = document.getElementById("infoID").firstChild;
          var note= evt.target.getAttributeNS(null,"id");
          infoLine.nodeValue = note;
          }

          Maybe I have not defined the name of my features correctly? (i.e.
          name="rectangle") Can somebody give me a quick reminder about the
          syntax that should be used for this?
          Thank you.
          Csorba



          --- In svg-developers@yahoogroups.com, "Andreas
          Neumann" <neumann@...> wrote:
          >
          > Hi Edith,
          >
          > --- In svg-developers@yahoogroups.com,
          "csorba_edith" <csorba_edith@> wrote:
          > >
          > > Hi,
          > > I was trying to implement a mouseover effect on my SVG map - to
          view
          > > the name of the feature the mouse points at on a line - and I was
          > > using the following .js code:
          > > function viewInfo(evt) {
          > > var infoLine = document.getElementById("infoNote");
          > > text= infoLine.getFirstChild;
          > > var note= evt.getTarget.getAttributeNS(null,"name");
          > > text.setData(note);
          > > }
          >
          > evt.getTarget.... is wrong and should be evt.target....
          > and it should be infoLine.firstChild and not
          infoLine.getFirstChild() - note that you omitted
          > the (), as this is a method. I am surprised that it works at all in
          ASV. Are you sure it doesn't
          > give any error messages?
          >
          > That way it works in all viewers and browsers.
          >
          > See also http://jwatt.org/svg/authoring/
          >
          > > It functions OK in IE, but Opera/Firefox does not read this
          function
          > > and Batik gives me an error:
          > > "viewinfo is not defined"
          > > The same is the situation with the .js code I use to check the
          > > visibility of a layer (so it can be turned on/off):
          > > function viewLayer(name) {
          > > theLayer = document.getElementById(name);
          > > theVisibility = theLayer.getAttributeNS(null,"visibility");
          > > if (theVisibility == "visible") {
          > > theLayer.setAttributeNS(null,"visibility", "hidden");
          > > }
          > > else if (theVisibility == "hidden") {
          > > theLayer.setAttributeNS(null,"visibility", "visible");
          > > }
          > > }
          >
          > I don't see what's wrong here.
          >
          > In case you want to display your attributes as tooltips, I provide
          a tooltip script at
          > http://www.carto.net/papers/svg/gui/mapApp/ , see example at
          > http://www.carto.net/papers/svg/gui/tooltips/
          >
          > Andreas
          >
        • Andreas Neumann
          Hi Edith, name is not a known attribute in the SVG namespace. You can define name in your own namespace however and prefix the attribute. You can say use
          Message 4 of 4 , Aug 2, 2006
          • 0 Attachment
            Hi Edith,

            "name" is not a known attribute in the SVG namespace.

            You can define "name" in your own namespace however and prefix the
            attribute.

            You can say use attributes in a foreign namespace as follows:

            <svg width="100%" height="100%" viewBox="-188.1064 -72.7411 376.8677
            56.4095" xmlns="http://www.w3.org/2000/svg" xmlns:attrib="http://
            www.carto.net/attrib">
            <g id="states" style="fill:none;stroke:black;stroke-
            width:0.1884;stroke-linecap:round;stroke-linejoin:round;">
            <g id="states_Alabama">
            <path attrib:state="Alabama" attrib:state_fips="01"
            d="M-88.1996 -34.9978l-.00....." />
            </g>
            </g>
            </svg>

            note the additional namespace definition (xmlns:attrib="http://
            www.carto.net/attrib") in the svg root element and the attrib: prefix
            in the <path /> element, e.g. for the state or state_fips attribute.

            If you want to extract the attributes you can do the following:

            var attribNS = "http://www.carto.net/attrib";
            var state = myElement.getAttributeNS(attribNS,"state");
            alert(state);

            where "myElement" is a node reference that you can get with
            .getElementById() or evt.target, or other mechanisms.

            Note that you have to use the namespace now instead of "null" in the
            .getAttributeNS() method.

            Hope this helps,
            Andreas


            --- In svg-developers@yahoogroups.com,
            "csorba_edith" <csorba_edith@...> wrote:
            >
            > Hi,
            > Thanks you for the help. Have one further question.
            > I managed to change the .js for the viewInfo function, so now Opera
            > and Firefox view it (although Batik still gives an error). But it
            > works only for the ID, not for the Name:
            >
            > function viewInfoName(evt) {
            > var infoLine = document.getElementById("infoName").firstChild;
            > var note= evt.target.getAttributeNS(null,"name");
            > infoLine.nodeValue = note;
            > }
            >
            > function viewInfoID(evt) {
            > var infoLine = document.getElementById("infoID").firstChild;
            > var note= evt.target.getAttributeNS(null,"id");
            > infoLine.nodeValue = note;
            > }
            >
            > Maybe I have not defined the name of my features correctly? (i.e.
            > name="rectangle") Can somebody give me a quick reminder about the
            > syntax that should be used for this?
            > Thank you.
            > Csorba
            >
            >
            >
            > --- In svg-developers@yahoogroups.com, "Andreas
            > Neumann" <neumann@> wrote:
            > >
            > > Hi Edith,
            > >
            > > --- In svg-developers@yahoogroups.com,
            > "csorba_edith" <csorba_edith@> wrote:
            > > >
            > > > Hi,
            > > > I was trying to implement a mouseover effect on my SVG map - to
            > view
            > > > the name of the feature the mouse points at on a line - and I
            was
            > > > using the following .js code:
            > > > function viewInfo(evt) {
            > > > var infoLine = document.getElementById("infoNote");
            > > > text= infoLine.getFirstChild;
            > > > var note= evt.getTarget.getAttributeNS(null,"name");
            > > > text.setData(note);
            > > > }
            > >
            > > evt.getTarget.... is wrong and should be evt.target....
            > > and it should be infoLine.firstChild and not
            > infoLine.getFirstChild() - note that you omitted
            > > the (), as this is a method. I am surprised that it works at all
            in
            > ASV. Are you sure it doesn't
            > > give any error messages?
            > >
            > > That way it works in all viewers and browsers.
            > >
            > > See also http://jwatt.org/svg/authoring/
            > >
            > > > It functions OK in IE, but Opera/Firefox does not read this
            > function
            > > > and Batik gives me an error:
            > > > "viewinfo is not defined"
            > > > The same is the situation with the .js code I use to check the
            > > > visibility of a layer (so it can be turned on/off):
            > > > function viewLayer(name) {
            > > > theLayer = document.getElementById(name);
            > > > theVisibility =
            theLayer.getAttributeNS(null,"visibility");
            > > > if (theVisibility == "visible") {
            > > > theLayer.setAttributeNS(null,"visibility",
            "hidden");
            > > > }
            > > > else if (theVisibility == "hidden") {
            > > > theLayer.setAttributeNS(null,"visibility",
            "visible");
            > > > }
            > > > }
            > >
            > > I don't see what's wrong here.
            > >
            > > In case you want to display your attributes as tooltips, I
            provide
            > a tooltip script at
            > > http://www.carto.net/papers/svg/gui/mapApp/ , see example at
            > > http://www.carto.net/papers/svg/gui/tooltips/
            > >
            > > Andreas
            > >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.