Wednesday, October 21, 2009

Make dynamic caption with Behaviors opportunely

In the process that we develop in the website, need to make the webpage of picture collect sometimes, can deserve to explain with the character again to every pieces of picture of course, that is the thing that perfect truly. But if a paragraph of character matchs below a picture,explain, so the page appears certainly very allow is long. If can make all caption show in a place, and move between the picture as the mouse, demonstrative character changes dynamicly also subsequently, so page with respect to Jian Lian much. The movement of Set Text Of Layer of Behaviors can help us achieve this kind of dynamic result. Ask the effect figure below.

Graph 1 mouse is not on the picture

Graph 2 mouses are on the first piece of picture

Saw! Go up in the first piece of picture when the mouse when, the demonstrative character of the picture also revised the specification of the first piece of picture. Is the result right still? This kind of result is done with Jav ascript so, another act that uses Behaviors " Show-Hide Layers " also can come true, I am in " the vivid layer that use a figure " ever had introduced in concerned article, but the operation wants a bit some more complex. Good, let us read the specific means that make.
1, because movement of Set Text Of Layer is actually,write text version toward layer of a graph, because this wants to insert layer of a graph first, the name that the attention wants to write down graph layer (go up in the attribute face plate of graph layer) , write on graph layer commonly a few about the picture lumped specification, lest at the beginning when a blank. If want to make graph layer a bit markedder, add setting color to it, note the relative position of graph layer and picture appropriately additionally;
2, insert a piece of picture, choose it next, press face plate of F8 v Behaviors again, press on face plate " + " icon, in the list that draws, be in the mouse " Set Text " go up bit, pull in its child movement of Set Text Of Layer of the choice in list, shoot the dialog box that gives following plan institute to show instantly:

Graph 3 Set Text Of Layer touchs oppose word draw a frame round

3, go up in dialog box of movement of graph Set Text Of Layer, "Layer " the choice casing of the right side is name of option plan layer, choose you to want to keep information toward that graph layer namely, this is the purpose seat that why I want you to remember graph layer name in the first pace. In the webpage of this exemple, wanting the graph layer that keeps information is " Layer6 " , so I chose it, you should choose proper graph layer name when make (also can choose the right side that triangle pushbutton, the list of the name of all graph layer that it will draw current page to go up chooses for you) ; That big circle keeps information for you below, but Dreamweaver3 has here small " Bug " , it supports English only, do not support Chinese, i f you are written,go up Chinese, when writing normal, random code is however when browsing. The question is not big nevertheless, you are here whats are written, wrote actually also no use. The pushbutton that press OK returns Behaviors face plate;
4, go up in Behaviors face plate spark incident instead OnMouseOver, make its effect is namely: Go up to graph layer when the mouse moves to go up to this picture keep information;
5, open window of source code postmortem, write in the last only quote in the code of movement of Set Text Of Layer be duped when the mouse moves to go up to this picture, should be on graph layer indication information, if you are not quite clear still,write over, so read this paragraph of next source code, the movement that is the first piece of picture in this exemple then calls the code of Javascript program:
<Img Src="image/cssp1.jpg" Width="200" Height="134" OnMouseOver="MM_setTextOfLayer('Layer6' , '' , ' this is the photograph tha t a piece of celestial being points to a road, you see that celestial being thousand all ages comes, not the scaler that demit gives each Huang Shan careladenly points to a road, its spirit is how to be worth admire! ')" >
After keeping this information, the operation of this piece of picture ended, the demonstrative information of other picture wants copy only this operation can. All and finishing hind browse by F12, can see expect the result, do not want nevertheless with joy too early, the position of graph layer (namely the position that caption information indicates) likelihood not very is ideal, a blemish that this is graph layer (the measure that avoids this kind of fixed position to forbid an appearance is to use child layer, this I am in " the vivid layer that use a figure " already had introduced in series article) , you are compiling the position that graph layer adjusts in the window according to browsing the circumstance when.
Movement of Set Text Of Layer almost but to load arrives on all mark, this provides larger creation space to us, if to load arrives on super link, move to show the specification of a paragraph of link to the link when the mouse, the person that make browse is right before the webpage that did not open a link this webpage has roughly understanding; Explain to a few more complex operations, if go to this movement to load on mark, a paragraph of more detailed help information will show when the person that should browse moves the mouse to this paragraph of character, the person that make browse feels kinder. Did not tell more, actuate your cerebra, the creativity that produces you!

No comments:

Post a Comment