In this example a rollover is created using a background animated gif. The animated gif is created using the Rubbr Clouds dialog. When the mouse is hovering above the menu item the animated gif apear in its background.
The CSS a:hover Paseudo-Class is used to create this effect.
Here is the CSS ID selector for this menu:
a#menu1{
Color: black;
background-image: url();
padding: 1px;
font-weight: bold;
}
a#menu1:hover{
Color: white;
background-image: url(menu1.gif);
padding: 1px;
font-weight: bold;
}
In the HTML body the hyperlink tags will look like this:
<p align="left"><a id="menu1" href="menu1.html">Menu Item 1</a></p>
<p align="left"><a id="menu1" href="menu1.html">Menu Item 2</a></p>
<p align="left"><a id="menu1" href="menu1.html">Menu Item 3</a></p>
In this example the animated gif was created using the Rotating Stripes dialog and a Rounded Rectangle Cell Pattern.
Here is the CSS ID selector for this menu:
a#menu2{
font-size: 16px;
font-weight: bold;
text-decoration: none;
Color: black;
background-image: url();
padding: 1px;
}
a#menu2:hover{
font-size: 16px;
font-weight: bold;
Color: white;
background-image: url(menu2.gif);
padding: 1px;
background-repeat: no-repeat;
}
In the HTML body the hyperlink tags will look like this:
<p align="left"><a id="menu2" href="menu1.html">Menu Item 1</a></p>
<p align="left"><a id="menu2" href="menu1.html">Menu Item 2</a></p>
<p align="left"><a id="menu2" href="menu1.html">Menu Item 3</a></p>
In this example the animated gif was created using the Moving Stripes dialog with the following bitmap Cell Pattern.
Here is the CSS ID selector for this menu:
a#menu3{
font-size: 16px;
font-weight: bold;
text-decoration: none;
Color: black;
background-image: url();
padding: 1px;
}
a#menu3:hover{
font-size: 16px;
font-weight: bold;
Color: white;
background-image: url(menu3.gif);
padding: 1px;
background-repeat: no-repeat;
}
In the HTML body the hyperlink tags will look like this:
<p align="left"><a id="menu3" href="menu1.html">Menu Item 1</a></p>
<p align="left"><a id="menu3" href="menu1.html">Menu Item 2</a></p>
<p align="left"><a id="menu3" href="menu1.html">Menu Item 3</a></p>
In this example the animated gif was created using the Moving Stripes dialog with the following bitmap Cell Pattern. 
Here is the CSS ID selector for this menu:
a#menu4{
font-size: 16px;
font-weight: bold;
text-decoration: none;
Color: black;
background-image: url();
padding: 1px;
}
a#menu4:hover{
font-size: 16px;
font-weight: bold;
Color: white;
background-image: url(menu4.gif);
padding: 1px;
background-repeat: repeat-x;
}
In the HTML body the hyperlink tags will look like this:
<p align="left"><a id="menu4" href="menu1.html">Menu Item 1</a></p>
<p align="left"><a id="menu4" href="menu1.html">Menu Item 2</a></p>
<p align="left"><a id="menu4" href="menu1.html">Menu Item 3</a></p>
|
