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 Thursday, 18 April 2002 17:49:19 UTC