Change object property with Behaviors opportunely (2)

Go up a case that we made pass the setting that changes graph layer to change text setting, the advantage of the layer that use a figure is Dreamweaver can give each graph layer automatically to add code name (or make name a word) , because this is used,go to the lavatory quite, but the result when mixing composing with form as a result of the layer is bad, use of course child the layer can be solved, I am in its method about " the vivid layer that use a figure " already had introduced in the article, repeat no longer here. What introduce below is to need not pursue layer and go up in text directly the example of movement of to load Behaviors.

One, size of dynamic change character

Graph 1 textual word

Graph 2 mouses move to go up to this paragraph of character, the character will be magnified, the mouse removeds, the character restores original size

Graph 3 when clicking a mouse, setting color of the character was changed.

This is pla nted above the effect, added kind touch with not quite good to a few eyesight on the webpage caller? ! The specific method that make explains below:
1, a paragraph of text is inputted on the page, because Dreamweaver3 does not support Behaviors to text, so our flexible, increase number of a "span" to text, particular operation: Open window of source code postmortem, such code adds in the beginning of text: <Span Id="mytext1" > adds when text ends: </ Span > ;
2, choose a few characters to become an empty link arbitrarily on text, behaviors face plate is opened on the link, to load changes the action of literal size. Particular operation: Go up by Behaviors face plate " + " icon, choose on menu " Change Property " , choose in the Type Of Object of the dialog box " Span " ; Choose in Number Object " Span "mytext1" " ; Choose in Property " Font-size " ; Input in New Value " 16pt " . By " OK " return Behaviors face plate;
3, because Behaviors sp arks acquiescently,incident is the mouse is clicked (OnClick) , we will change, spark incident instead mouse moves to happen to the object (OnMouseOver) particular operation: The behavioral code in the window is nodded on Behaviors face plate, click code next among that pours trigonometry to receive button, choose in the list that issues those who pull " OnMouseOver " can, come here the movement that makes the character greatens is finished basically already;
4, the effect that restores original size to win the written language when proper mouse removeds, duplicate operation of the 2nd pace, the volume that just inputs original character in the New Value of the dialog box went. Next, like the 3rd pace in that way spark incident instead " OnMouseOut " .
There still is an action in this exemple is the setting color that changes a character, I think this already had been told in getting on, should be you met? ! Did not repeat here.
5, because the movement above is t o load,go up in that super link, we move it " Span " go up. Particular operation: Open window of source code postmortem, after choosing those behavioral code, procrastinate " Span " go in mark. Additional, dreamweaver3 has a "Bug" here, it did not add the name of operand, that is obliged ourselves started work, the name of operand adds in the first only quote in the bracket of each movement namely: Mytext1. Next cancel of that super link, all OK. This paragraph of source code with final webpage is such:
<Span Id="mytext1" Style=" Line-height:20pt;" OnClick="MM_changeProp('mytext1' , '' , 'style.backgroundColor' , '#ffffcc' , 'SPAN')" OnMouseOver="MM_changeProp('mytext1' , '' , 'style.fontSize' , '16pt' , 'SPAN')" OnMouseOut="MM_changeProp('mytext1' , '' , 'style.fontSize' , '9pt' , 'SPAN')" >
The mouse moves to go up to this paragraph of character, the character will be magnified; When clicking a mouse, the setting color that changes this paragraph of chara cter.
</ Span >
You may see a code still increases in above code: Style=" Line-height:20pt;" this is to also answer to increase accordingly considering the row spacing after the character increases setting. Can see expectant result by F12.

2, become angry pushbutton
　　
Graph 　 of 　 of 4 stereo pushbutton pursues 5 mouses move to change to the color on pushbutton

Above this stereo pushbutton, you do not think is made with the picture, it presses a root to did not use a picture. It is to go up actually the actual application that text setting color changes in the exemple. But super link needs as a result of pushbutton itself in this exemple, because this saved many jobs to us. Additionally I am done not have in this exemple with " Span " mark, used however " Div " mark, this is not my be deliberately mystifying, consider however firstly, we can produce when the literal be placed in the middle that goes up to pushbutton " Div " mark; S econdly, tell you to be in all number that can increase code name, it is OK to should increase previous generation number only bring to bear on to its movement. The specific making means of the pushbutton that we see this meeting become angry below.
1, the form that inserts a 1*1, if want to make many pushbutton can insert a many travel the form of much line;
2, it is the back scenery setting of form: #CCFFCC; The back scenery setting of unit case is: #CCCCFF; Boder setting is " 1 " ; Light Brdr: #00000; Dark Brdr: #FFFFFF. The end that such doing is to make pushbutton produces stereo move;
3, the name that inputs pushbutton in form, and its be placed in the middle (generation a "div" labels) , in webpage source code " Div " add a name to it: Mybottun.
4, the name make it pushbutton is super link, go up in super link the change of two Behaviors carries to load on the back the movement of the scenery, spark incident is " OnMouseOver " ; Another spark incident is " OnMouseOut " . Of the movement bring to bear on the object is " Div " " Mybottun " . Specific operation method and go up the routine is same, repeat no longer. Final pushbutton code is such
<Table Width="10%" Border="1" Bordercolorlight="#000000" Bordercolordark="#FFFFFF" Bgcolor="#CCFFCC" >
<Tr Bgcolor="#CCCCFF" >
<Td>
<Div Id="mybottun" Align="center" ><A Href="#" OnMouseOver="MM_changeProp('mybottun' , '' , 'style.backgroundColor' , '#ffffcc' , 'DIV')" OnMouseOut="MM_changeProp('mybottun' , '' , 'style.backgroundColor' , '#ccccff' , 'DIV')"> becomes angry pushbutton</ A ></ Div >
</ Td >
</ Tr >
</ Table >

How? Not difficult! Below retell the example of an image.

3, commutation picture
　　
Graph 　 of 　 of 　 of 　 of 　 of 　 of 6 original intents pursues 7 mouses moved to change a piece of picture to the picture

The result that chart shows on is when moving the mouse to the picture when you, changed a piece of picture; Removed the mouse when you when the picture, it restored original photograph again. This kind of dynamic effect is the implementation of function of Change Property movement that uses Behaviors likewise. Specific method explains below:
1, insert a piece of picture, and entitle: Myimage (why to want to name, I think you should understand! ) ;
2, the Change Property action that sums two Behaviors to the picture, because Dremweaver3 supports image to sum an action, the operation rises can go to the lavatory much. Operate measure: Choose a picture, press face plate of F8 v Behaviors, click face plate to go up " + " icon, choose in the menu that pulls " Change Property " to load movement, choose in the Type Of Object of the dialog box " Img " ; Choose in Number Object " Image "myimage" " ; Choose in Property " Src " ; Input in New Value " the file name of the picture (contain opposite way) " , be on my website " Image/cssp2.jpg " . By " OK " return Behaviors face plate, spark incident instead: OnMouseOver;
3, duplicate operation of on one pace, the method that just inputs current picture in the New Value of the dialog box can, again spark incident instead: OnMouseOut. Come here all and finishing, press F12, you will see with me here similar result. We read the source code of the webpage again, the code that the Img of final picture labels is shown as follows:
<A Href="#" OnMouseOver="MM_changeProp('myimage' , '' , 'src' , 'image/cssp2.jpg' , 'IMG')" OnMouseOut="MM_changeProp('myimage' , '' , 'src' , 'image/cssp1.jpg' , 'IMG')" ><Img Src="image/cssp1.jpg" Width="200" Height="134" Name="myimage" Border="0" Align="left" ></ A >
Ha! Original Behaviors added picture automatically to be linked for no thing, be in of course<Head > and</ the program of a paragraph of Javascript with the Alexandrine still similar example that uses between Head > . This young slippery fellow! ^_^