Create a Web mouse style with Dreamweaver mx

dreamweaver| Mouse | Mouse Style | Web page

Do friends who surf the web once noticed that some websites are not the shape of a regular diagonal arrow, but a cross, or a left arrow, or a question mark, and so on. When you want to have the mouse display different shapes in different places on the Web page to reflect the different functional areas; When you want your site to reflect a different style, think about the mouse style. In fact, the use of the mouse style is very wide, then how to implement the different styles of the mouse? Start Dreamweaver, open the page you want to apply the mouse style to, select the text Drop-down menu in the main window, and then select the new Style command in the CSS style submenu to create a new stylesheet. (Note: If you already have a style sheet in your Web page, you can choose CSS Styles Edit style sheet to edit the stylesheet.) This time, the new Style dialog box pops up. The type item has three radio buttons: Make Custom Style, Redefine HTML Tag, use CSS Selector. Where make custom style is a custom style whose name begins with a dot; Use CSS selector is a CSS selector that contains four hyperlink styles a:active/a:hover/a:link/a:visited; Redefine HTML tag is a style that defines HTML system tags, such as ABODYBR, and so on. Let's say we only set the mouse style on the hyperlink for the page, and here we select the a tag in the Redefine HTML tag option. The following define items Select this Document only. Click the OK button. pops up the style definition for dialog box and goes to hyperlink style settings. The category on the left is the style category, and there is no explanation for the other items, we select the Extentions item. You can see the cursor item in the right visual effect, which is the key to setting the mouse style. Click the Drop-down menu on the right to select the mouse style you want, and click the OK button. Let's talk about the general meaning of each style.

Hand: Is familiar with the hand-type.
Crosshair: is a ten-font, is the small turtle home used style.
Text: Is the style that the mouse moves to the text at ordinary times.
Wait: is the effect of waiting.
Default: This is the effect that defaults to.
Help: is a mouse style with a question mark.
E-resize: Is the arrow to the right.
Ne-resize: Is the arrow above the right.
N-resize: is the UP arrow.
Nw-resize: Is the arrow above the left.
W-resize: It's the arrow off the left.
Sw-resize: Is the arrow down the left.
S-resize: Is the downward arrow.
Se-resize: Is the arrow below the right.
Auto: Is the system's automatic effect.

Of course, depending on your needs, you can also apply a style to other tags, or simply to a paragraph of text. If the reader is not unfamiliar with CSS code, perhaps the direct handwriting code is more convenient. In particular, if you want to use different mouse styles in different locations, or different tags using different mouse styles. It's OK to write the style directly in a specific label.

The method is:< tag style=cursor:mouse_style>. Where tag is the label name, Mouse_style is the mouse style, such as hand/crosshair/text/wait and so on.

Here's a concrete example to deepen your understanding of mouse style settings.

<span style=cursor:hand> hand: Is familiar with the hand-type. </span>

< span Style=cursor:crosshair>crosshair: is a ten-font, is the Small Turtle home page of the style used. </span>

< span Style=cursor:text>text: is the normal mouse movement to the text on the style. </span>

< span style=cursor:wait>wait: is the effect of waiting. </span>

< span Style=cursor:default>default: That's the default effect. </span>

< span Style=cursor:help>help: is a mouse style with a question mark. </span>

< span style=cursor:e-resize>e-resize: is the arrow to the right. </span>

< span style=cursor:ne-resize>ne-resize: is the arrow above the right. </span>

< span Style=cursor:n-resize>n-resize: is the UP arrow. </span>

< span style=cursor:nw-resize>nw-resize: is the arrow above the left. </span>

< span style=cursor:w-resize>w-resize: is the arrow off the left. </span>

< span style=cursor:sw-resize>sw-resize: is the arrow down the left. </span>

< span Style=cursor:s-resize>s-resize: is the downward arrow. </span>

< span style=cursor:se-resize>se-resize: is the arrow below the right. </span>

< span Style=cursor:auto>auto: Is the system's automatic effect. </span>

Copy the above code to your Web page and press F12 to preview it. Move your mouse over the corresponding text to see what happens to the mouse? Is it showing up in the appropriate style?