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

Re: problems with mouse events

Expand Messages
  • fruc13
    Try to post a link to a working (without script errors) online example (it is hard to read code rewraped from yahoo) There are some javascript cals in this
    Message 1 of 5 , Mar 1, 2002
    • 0 Attachment
      Try to post a link to a working (without script errors) online
      example (it is hard to read code rewraped from yahoo)
      There are some javascript cals in this example but not the functions
      and a linked animation to the news5 element that does not exist.

      iztok jeras
      www.rattus.info

      --- In svg-developers@y..., "jpeyrott" <jpeyrott@y...> wrote:
      >
      > Hi, i have a svg which contains tspan elements. whrn on mouseover
      on
      > a button, my svg becomes visible with my tspan. but i want to hide
      my
      > svg and my tspan if on mouseout from my svg. The problem is when
      > pointer is on tspan, it considers that it leaves svg but i do not
      > understand because tspan is inside svg.
      >
      > i copied my code.
      >
      > Thanks.
      >
      > <svg id="svg5" x="13" y="123.1132075471698" width="450"
      height="150"
      > visibility="hidden">
      > <animate begin="News5.mouseover" dur="0.1s"
      > attributeName="visibility" from="hidden" to="visible"
      fill="freeze"/>
      > <g id="newsgroup5" onmouseout="deleteContour
      > (evt,'5')">
      > <rect id="logorect5"
      > onmouseover="deleteContour(evt,'5')" x="6.5" y="10" width="90"
      > height="20" style="fill:white; stroke:darkblue;stroke-width:2"/>
      > <image id="logoimage5"
      > onmouseover="deleteContour(evt,'5')" x="8.5" y="12" width="86"
      > height="15" xlink:href="c:/SVG/reuters.gif"/>
      > <rect id="contour5" x="0" y="20" width="450"
      > height="80" style="fill:white; stroke:darkblue; stroke-width:2"/>
      > <text id="message5">
      > <tspan x="10" y="20"
      > style="fill:darkblue; font-size:16; font-family: Arial, sans-
      serif"/>
      > <tspan
      > id="headline1013b563481nL12159899" onclick="deleteContour
      (evt,'5') "
      > x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
      > Arial, sans-serif">
      > <animate attributeName="font-
      > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
      > fill="freeze"/>
      > <animate attributeName="font-
      > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
      > fill="freeze"/>
      > <a
      > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
      > FORMAT=HTML&TEXT=1013b563481nL12159899" target="_blank">08:11
      > DANONE se désengage des activités de Galbani </a>
      > </tspan>
      > <tspan
      > id="headline101250w3481nL12159299" onclick="deleteContour
      (evt,'5') "
      > x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
      > Arial, sans-serif">
      > <animate attributeName="font-
      > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
      > fill="freeze"/>
      > <animate attributeName="font-
      > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
      > fill="freeze"/>
      > <a
      > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
      > FORMAT=HTML&TEXT=101250w3481nL12159299" target="_blank">08:08
      > Fondiaria-La proposition de fusion de SAI ne convient pas </a>
      > </tspan>
      > </text>
      > </g>
      > </svg>
    • jpeyrott
      my code runs. But its seems in svg, if i have a rectangle with tspan elements inside. tspan elements are on mouseout from rectangle . I want to hide my block
      Message 2 of 5 , Mar 1, 2002
      • 0 Attachment
        my code runs. But its seems in svg, if i have a rectangle with tspan
        elements inside. tspan elements are "on mouseout from rectangle ". I
        want to hide my block (rectangle+tspan) if my pointer is outside of
        block .
        the problem is that if my pointer is on tspan inside rectangle, it
        thinks that pointer is outside of block...



        --- In svg-developers@y..., "fruc13" <izi@d...> wrote:
        > Try to post a link to a working (without script errors) online
        > example (it is hard to read code rewraped from yahoo)
        > There are some javascript cals in this example but not the
        functions
        > and a linked animation to the news5 element that does not exist.
        >
        > iztok jeras
        > www.rattus.info
        >
        > --- In svg-developers@y..., "jpeyrott" <jpeyrott@y...> wrote:
        > >
        > > Hi, i have a svg which contains tspan elements. whrn on mouseover
        > on
        > > a button, my svg becomes visible with my tspan. but i want to
        hide
        > my
        > > svg and my tspan if on mouseout from my svg. The problem is when
        > > pointer is on tspan, it considers that it leaves svg but i do not
        > > understand because tspan is inside svg.
        > >
        > > i copied my code.
        > >
        > > Thanks.
        > >
        > > <svg id="svg5" x="13" y="123.1132075471698" width="450"
        > height="150"
        > > visibility="hidden">
        > > <animate begin="News5.mouseover" dur="0.1s"
        > > attributeName="visibility" from="hidden" to="visible"
        > fill="freeze"/>
        > > <g id="newsgroup5" onmouseout="deleteContour
        > > (evt,'5')">
        > > <rect id="logorect5"
        > > onmouseover="deleteContour(evt,'5')" x="6.5" y="10" width="90"
        > > height="20" style="fill:white; stroke:darkblue;stroke-width:2"/>
        > > <image id="logoimage5"
        > > onmouseover="deleteContour(evt,'5')" x="8.5" y="12" width="86"
        > > height="15" xlink:href="c:/SVG/reuters.gif"/>
        > > <rect id="contour5" x="0" y="20" width="450"
        > > height="80" style="fill:white; stroke:darkblue; stroke-width:2"/>
        > > <text id="message5">
        > > <tspan x="10" y="20"
        > > style="fill:darkblue; font-size:16; font-family: Arial, sans-
        > serif"/>
        > > <tspan
        > > id="headline1013b563481nL12159899" onclick="deleteContour
        > (evt,'5') "
        > > x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
        > > Arial, sans-serif">
        > > <animate attributeName="font-
        > > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
        > > fill="freeze"/>
        > > <animate attributeName="font-
        > > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
        > > fill="freeze"/>
        > > <a
        > > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
        > > FORMAT=HTML&TEXT=1013b563481nL12159899" target="_blank">08:11
        > > DANONE se désengage des activités de Galbani </a>
        > > </tspan>
        > > <tspan
        > > id="headline101250w3481nL12159299" onclick="deleteContour
        > (evt,'5') "
        > > x="10" dy="2em" style="fill:darkblue; font-size:12; font-family:
        > > Arial, sans-serif">
        > > <animate attributeName="font-
        > > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
        > > fill="freeze"/>
        > > <animate attributeName="font-
        > > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
        > > fill="freeze"/>
        > > <a
        > > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
        > > FORMAT=HTML&TEXT=101250w3481nL12159299" target="_blank">08:08
        > > Fondiaria-La proposition de fusion de SAI ne convient pas </a>
        > > </tspan>
        > > </text>
        > > </g>
        > > </svg>
      • fruc13
        Ok now I understand, solutions: 1.) put rectangle and text inside an roup and use the group for the onmouseout event triggering 2.) I you don t want to trigger
        Message 3 of 5 , Mar 1, 2002
        • 0 Attachment
          Ok now I understand, solutions:
          1.) put rectangle and text inside an roup and use the group for the
          onmouseout event triggering
          2.) I you don't want to trigger any events on the text you can put an
          attribute pointer-events="none" to the text elements

          Report you sucess on other.

          IzI

          --- In svg-developers@y..., "jpeyrott" <jpeyrott@y...> wrote:
          > my code runs. But its seems in svg, if i have a rectangle with
          tspan
          > elements inside. tspan elements are "on mouseout from rectangle ".
          I
          > want to hide my block (rectangle+tspan) if my pointer is outside of
          > block .
          > the problem is that if my pointer is on tspan inside rectangle, it
          > thinks that pointer is outside of block...
          >
          >
          >
          > --- In svg-developers@y..., "fruc13" <izi@d...> wrote:
          > > Try to post a link to a working (without script errors) online
          > > example (it is hard to read code rewraped from yahoo)
          > > There are some javascript cals in this example but not the
          > functions
          > > and a linked animation to the news5 element that does not exist.
          > >
          > > iztok jeras
          > > www.rattus.info
          > >
          > > --- In svg-developers@y..., "jpeyrott" <jpeyrott@y...> wrote:
          > > >
          > > > Hi, i have a svg which contains tspan elements. whrn on
          mouseover
          > > on
          > > > a button, my svg becomes visible with my tspan. but i want to
          > hide
          > > my
          > > > svg and my tspan if on mouseout from my svg. The problem is
          when
          > > > pointer is on tspan, it considers that it leaves svg but i do
          not
          > > > understand because tspan is inside svg.
          > > >
          > > > i copied my code.
          > > >
          > > > Thanks.
          > > >
          > > > <svg id="svg5" x="13" y="123.1132075471698" width="450"
          > > height="150"
          > > > visibility="hidden">
          > > > <animate begin="News5.mouseover" dur="0.1s"
          > > > attributeName="visibility" from="hidden" to="visible"
          > > fill="freeze"/>
          > > > <g id="newsgroup5" onmouseout="deleteContour
          > > > (evt,'5')">
          > > > <rect id="logorect5"
          > > > onmouseover="deleteContour(evt,'5')" x="6.5" y="10" width="90"
          > > > height="20" style="fill:white; stroke:darkblue;stroke-width:2"/>
          > > > <image id="logoimage5"
          > > > onmouseover="deleteContour(evt,'5')" x="8.5" y="12" width="86"
          > > > height="15" xlink:href="c:/SVG/reuters.gif"/>
          > > > <rect id="contour5" x="0" y="20" width="450"
          > > > height="80" style="fill:white; stroke:darkblue; stroke-
          width:2"/>
          > > > <text id="message5">
          > > > <tspan x="10" y="20"
          > > > style="fill:darkblue; font-size:16; font-family: Arial, sans-
          > > serif"/>
          > > > <tspan
          > > > id="headline1013b563481nL12159899" onclick="deleteContour
          > > (evt,'5') "
          > > > x="10" dy="2em" style="fill:darkblue; font-size:12; font-
          family:
          > > > Arial, sans-serif">
          > > > <animate attributeName="font-
          > > > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
          > > > fill="freeze"/>
          > > > <animate attributeName="font-
          > > > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
          > > > fill="freeze"/>
          > > > <a
          > > > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
          > > > FORMAT=HTML&TEXT=1013b563481nL12159899"
          target="_blank">08:11
          > > > DANONE se désengage des activités de Galbani </a>
          > > > </tspan>
          > > > <tspan
          > > > id="headline101250w3481nL12159299" onclick="deleteContour
          > > (evt,'5') "
          > > > x="10" dy="2em" style="fill:darkblue; font-size:12; font-
          family:
          > > > Arial, sans-serif">
          > > > <animate attributeName="font-
          > > > weight" begin="mouseover" dur="0.1s" from="none" to="bold"
          > > > fill="freeze"/>
          > > > <animate attributeName="font-
          > > > weight" begin="mouseout" dur="0.1s" from="bold" to="none"
          > > > fill="freeze"/>
          > > > <a
          > > > xlink:href="http://otf1:otf1@1.../CTIB/JGNEWS2?
          > > > FORMAT=HTML&TEXT=101250w3481nL12159299"
          target="_blank">08:08
          > > > Fondiaria-La proposition de fusion de SAI ne convient pas </a>
          > > > </tspan>
          > > > </text>
          > > > </g>
          > > > </svg>
        • honnen_martin
          The SVG spec for rect reads: so you are not
          Message 4 of 5 , Mar 1, 2002
          • 0 Attachment
            The SVG spec for rect reads:

            <!ELEMENT rect (%descTitleMetadata;,
            (animate|set|animateMotion|animateColor|animateTransform
            %geExt;%rectExt;)*) >

            so you are not allowed to put a text element inside a rect element.
            Instead, use a g element to group the rect and the text element.
            As for the scripting, you need to check evt.relatedTarget. Here is
            an example

            <svg viewBox="0 0 100 100">
            <script type="text/ecmascript"><![CDATA[
            function nodeContains (container, containee) {
            while (containee) {
            if (container == containee)
            return true;
            containee = containee.parentNode;
            }
            return false;
            }
            function mouseLeaves (node, evt) {
            return !nodeContains(node, evt.relatedTarget);
            }

            ]]></script>
            <g transform="translate(10, 10)"
            onmouseout="if (mouseLeaves(evt.currentTarget, evt))
            evt.currentTarget.style.setProperty
            ('visibility', 'hidden');">
            <rect width="40" height="40"
            style="fill: green; stroke: yellow;"
            />
            <text x="20" y="26"
            style="fill: yellow; font-size: 18; text-anchor: middle;"
            >Kibo</text>
            </g>
            <g transform="translate(60, 60)"
            onmouseout="if (mouseLeaves(evt.currentTarget, evt))
            evt.currentTarget.style.setProperty
            ('visibility', 'hidden');">
            <rect width="40" height="40"
            style="fill: lightblue; stroke: darkblue;"
            />
            <text x="20" y="10"
            style="fill: white; font-size: 8; text-anchor: middle;"
            >
            <tspan x="20" dy="1em">Kibology</tspan>
            <tspan x="20" dy="1em">for</tspan>
            <tspan x="20" dy="1em">all</tspan>
            </text>
            </g>
            </svg>


            Martin
          Your message has been successfully submitted and would be delivered to recipients shortly.