Everyone is familiar with general navigation effects, such as using CSS to set up, underline, background color or displacement for navigation text. In the previous post, some netizens mentioned the website http://www.tonta.com.cn/ , and I found that the navigation effect on its homepage is good. Although the flash does not have a very dazzling effect, it is relatively delicate and looks very good. Comfortable.
I have nothing to do and try to achieve the same navigation effect in dw. The effect is as follows: http://vip.5d.cn/flood/daohang/1.htm .
First, analyze the composition of the effect. When the mouse passes over, the background changes and the small image rotates. Ok! Consider using swap image (flip image) + background image change (CSS definition) in dw, which should be able to achieve the effect.
Prepare 4 gif images:
The background image when the mouse passes over (in FW, Nimate can easily achieve the gradient effect. The transparency of this image gradually changes from 0% to 100%)
[img]/conimages/web/2003-06/bg0604.gif[/img]
The background image when the mouse is drawn out (the transparency of this image gradually changes from 100% to 0%)
[img]/conimages/web/2003-06/b0604.gif[/img]
dynamic small image
[img]/conimages/web/2003-06/20604.gif[/img]
Small still image (set the image format to gif in fw and save it)
[img]/conimages/web/2003-06/2a0604.gif[/img]
1. The background effect is implemented using CSS to define two classes:
.style1 { background-image: url(bg.gif)}
.style2 {background-image: url(b.gif)}
is used for the background image when the mouse passes over and when the mouse is drawn out. Then add the following code in the cell:
onmouseover="this.className='style1'"
onmouseout="this.className='style2'"
can achieve the effect of the background gradient appearing when the mouse passes by, and disappearing after the mouse is moved away.
2. The flip image effect allows you to insert a small static image into a cell, use a behavior to add a swap image effect, and set it to flip to a dynamic small image after the mouse passes over it.
In order to achieve a closer effect, you need to apply the flip image effect to the cell, and cut the following code in the static small image code:
onMouseOver="MM_swapImage('Image2','','2.GIF',1)"
onMouseOut="MM_swapImgRestore()"
is pasted into the cell code td tag.
You can achieve image flipping when the mouse passes over the cell, producing a dynamic effect.
At this point all effects can be achieved.
In this example, the effect achieved using dw is almost comparable to the effect produced by flash, or even better (we achieved the effect of the background gradient disappearing when the mouse draws out the cell).
Section:
1. Carefully making gradient background images in fw (I just made two random gradient images) + modifying the navigation cells can make the effect more delicate and outstanding;
2. When using this method to create navigation effects, you need to use multiple cells. Note that the swap effect cannot be copied. After copying the code, you need to modify two codes:
onMouseOver="MM_swapImage('Image3','','2.GIF' ,1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">
Just modify the name of the flip image to a different value.
3． The technical content of this example is not very high; and I am not very familiar with flash, so I don’t know which one is easier to use, dw or flash, but I only mention it here to provide you with a way to solve the problem.
4. The superposition of two simple effects can create a cooler effect. I hope it can be enlightening for everyone. One more point: when making animated background images, in order to achieve the effect, you need to set the looping of the gif animation to no looping (not looping)
:)