Re: Simple rollover menu (text + rectangle)

ela mou,
your problem could easily be solved if we put a transparent rect in the same
size as the button. but in order to put a rect in front of the button we
should declare it after (we must first declare the button and then the
rect). in that case we have problem with the eventhandler cause when we use
the mouseover event on the transparent rect, is not declared yet.
so first we make the transparent rect and then in the g-my_menu, after the
text declaretion we use a <use> element to bring it in the front.

i made the changes only for the first button

<?xml version="1.0" encoding="us-ascii"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300px" height="300px" viewBox="0 0 300 300"
shape-rendering="crispEdges">


<!--
give an id
fill-opacity=0
stroke-opacity=0
-->
 <rect id="test_rect" x="0" y="0" width="50" height="20"
style="stroke-width: 1;
stroke: gray;stroke-opacity:0; fill: rgb(60, 60, 60);fill-opacity:0;"/>



  <a>
  <g id="my_group" transform="translate(10, 10)">
      <rect x="0" y="0" width="50" height="20" style="stroke-width: 1;
stroke: gray; fill: rgb(60, 60, 60);">
        <animateColor attributeName="fill" begin="my_group.mouseover"
dur="0.5s" from="rgb(60, 60, 60)" to="#343FD0" fill="freeze" />
        <animateColor attributeName="fill" begin="my_group.mouseout"
dur="0.5s" from="#343FD0" to="rgb(60, 60, 60)" fill="freeze" />
      </rect>
      <text id="my_text" x="25" y="15" style="text-anchor:
middle;">Home</text>

      <!--
      the use element
      -->
      <use xlink:href="#test_rect"/>

   </g>
   </a>
</svg>

i hope that this will work for you,
byeeeeee

----- Original Message -----
From: "The Snotling" <the.snotling@bigfoot.com>
To: <www-svg@w3.org>
Sent: Friday, April 19, 2002 12:57 AM
Subject: Simple rollover menu (text + rectangle)


> Hello,
> Over the past few days, I have desperately tried to create a little
> rollover menu as what we can see on
> http://www.macromedia.com/software/dreamweaver/, at the top, in Flash.
> But the problem is that the color fading effect is not well triggered and
I
> would like to make the text and the rectangle as *one* thing, one group.
> Here is the source code of my SVG :
>
> <?xml version="1.0" encoding="us-ascii"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
> "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
> <svg width="300px" height="300px" viewBox="0 0 300 300"
> shape-rendering="crispEdges">
>
>   <a>
>   <g id="my_group" transform="translate(10, 10)">
>       <rect x="0" y="0" width="50" height="20" style="stroke-width: 1;
> stroke: gray; fill: rgb(60, 60, 60);">
>         <animateColor attributeName="fill" begin="my_group.mouseover"
> dur="0.5s" from="rgb(60, 60, 60)" to="#343FD0" fill="freeze" />
>         <animateColor attributeName="fill" begin="my_group.mouseout"
> dur="0.5s" from="#343FD0" to="rgb(60, 60, 60)" fill="freeze" />
>       </rect>
>       <text id="my_text" x="25" y="15" style="text-anchor:
middle;">Home</text>
>    </g>
>    </a>
>
>   <a>
>   <g id="my_group2" transform="translate(65, 10)">
>       <rect x="0" y="0" width="60" height="20" style="stroke-width: 1;
> stroke: gray; fill: rgb(60, 60, 60);">
>         <animateColor attributeName="fill" begin="my_group2.mouseover"
> dur="0.5s" from="rgb(60, 60, 60)" to="#343FD0" fill="freeze" />
>         <animateColor attributeName="fill" begin="my_group2.mouseout"
> dur="0.5s" from="#343FD0" to="rgb(60, 60, 60)" fill="freeze" />
>       </rect>
>       <text id="my_text2" x="30" y="15" style="text-anchor:
> middle;">Products</text>
>    </g>
>    </a>
>
> </svg>
>
> This may well be very easy but I can't find the answer anywhere.
> I have got an idea how to do it with scripting but it will require quite a
> lot of programming for a very small and basic effect.
>
> Thanks in advance.
>

Received on Saturday, 20 April 2002 10:58:19 UTC