The making method of a kind of exquisite navigation effect

   Everybody was familiar with general navigation effect very much, give navigation text setting to go up with CSS for example, color of underline, setting or displacement. There is a netizen to mention Http://www.tonta.com.cn/ in the card in front this website, the navigation result in discovering its home page occasionally is right, although Flash is done not very the effect of bewildered, but more exquisite, look very comfortable.
Idle will do not have a thing, the attempt achieves similar navigation result in Dw. The effect is shown as follows: Http://vip.5d.cn/flood/daohang/1.htm.
Analyse the composition of the effect above all, the setting when the mouse is passed produces change, little picture is rotational. Ok! The Swap Image in considering to use Dw (retroflexion graph) + background picture changes (CSS is defined) should OK implementation effect.
Prepare image of 4 pieces of Gif to be respectively:
Picture of background of mouse cl assics antiquated (in Fw Nimate of 胊 of A Chinese-style unlined garment is OK effect of very simple implementation gradual change, this image diaphaneity arrives by 0% gradual change 100% )
[Img]/conimages/web/2003-06/bg0604.gif[/img]
The background picture when mouse lay off (this image diaphaneity arrives by 100% gradual change 0% )
[Img]/conimages/web/2003-06/b0604.gif[/img]
Dynamic little picture
[Img]/conimages/web/2003-06/20604.gif[/img]
Dormant little picture (save after format of image of the setting in Fw is Gif can)
[Img]/conimages/web/2003-06/2a0604.gif[/img]

1. Setting effect comes true
Use CSS defines two kind:

.style1 {Background-image: Url(bg.gif)}
.style2 {Background-image: Url(b.gif)}

Use at the background picture when mouse course and lay off respectively
Add following code in unit case next:

Onmouseover="this.className='style1' "Onmouseout="this.className='style2' "

Can realize gradual change of the setting when the mouse is passed to appear, the effect that gradual change of the setting after removeding disappears.
2. Retroflexion plan result comes true
Dormant little picture is inserted in unit case, use behavior adds Swap Image effect, setting mouse is dynamic little picture via retroflexioning afterwards.
For more effect of press close to, need retroflexion plan result applies to unit case, following code cut in code of dormant little picture:

OnMouseOver="MM_swapImage('Image2' , '' , '2.GIF' , 1) "OnMouseOut="MM_swapImgRestore() "

Stickup in label of Td of unit case code.
Can realize the image when the mouse passes unit case to retroflexion, produce dynamic result.
Can achieve overall effect so far.
In this example, the result that the result that use Dw achieves can make with Flash almost is rivalled, a bit better even (the effect that gradual change of the setting when we realized division of unit of mouse lay off disappears) .
Nodular:
1. The background picture that makes gradual change meticulously in Fw (I just made picture of two gradual change casually) + unit to navigation case is decorated can make the effect more exquisite, outstanding;
2. When using this method to make navigation result, need uses many unit standard, notice Swap effect cannot be copied, the need after copying code amends two place code:

OnMouseOver="MM_swapImage('Image3' , '' , '2.GIF' , 1) "
<img Src="2a.gif" Name="Image3" Width="15" Height="15" Border="0" Id="Image3 ">

Revise retroflexion the Name of the graph is worth for what differ can.
3. The technical content of this example is not very tall; And not be very familiar Flash occasionally, do not know to be made which are planted with Dw or Flash a few simpler, here puts forward to just provide a kind of means that solves a problem to everybody.
4. The overlay of two simple effects can make the result that compares cruel, the hope is right everybody can somewhat enlightenment
A bit more compensatory: When picture of background of the animation that make, to achieve the result, the loop that needs to install Gif animation is No Looping (do not circulate)
:)