Big talk "The Tortoise and the Hare Race"--the special effects of the Web object hiding

Source: Internet
Author: User
Tags format object insert key window dreamweaver
Objects | Web page Everyone has heard the story of the Hare and the tortoise, you know? After the game, the story of the little White Rabbit running to the tortoise quickly spread through the forest. The animals all put this matter as a joke, the rabbits are all angry and stare, no longer pay attention to the little white Rabbit. The Little white Rabbit, then hide in the home sad, strenuously to learn a technology to name Yang at home and abroad, use their brains, enrolled in a computer training course. The little white Rabbit to the training course from the Computer Foundation began to learn, learned the Windows XP, Office XP, also learned the Web page of the Three Musketeers, he bought a computer, hardships to produce a "Rabbit Kingdom" website. Animals This can be lively, in order not to fall behind, have learned the computer. This turtle is anxious, is not still want to make a website competition, I also learn computer, make a website.

After one months of time, the Turtle's Web page was initially made, and a number of special effects such as Star background, telescopic buttons, UFO around mouse, and dancing text were made. There is still a technology--web object hidden effects can be bitter turtle. The tortoise thought of the "Rabbit Kingdom" of the owner of the small white Rabbit, it is the master of this aspect, then made some gifts to visit, greet each other, the turtle by the way to ask how to hide the objects in the Web page, the little White Rabbit seriously explained the entire operation process.

1. Use the same color as the background to hide text

Purpose: Click the text in the page and hide it immediately.

means: Take advantage of the Dynamic HTML effects in FrontPage 2000.

How to: Open FrontPage 2000 software, select the text that you want to hide, and then open the Dynamic HTML effects item on the Format menu, pop up a DHTML Effects toolbar, select the Click event, apply the format effect, and choose Select Font, as shown in Figure 1 , in the Font dialog box that pops up, sets the color of the text to match the background color of the page.

Realization Difficulty coefficient: ☆☆☆

2. Use layers to hide pictures

Objective: To move the mouse to the "hidden picture" text, the picture will be hidden

means: Using the layer behavior of Dreamweaver

How to: Open the Dreamweaver software, enter the text "Hide Picture", and then select the "Insert" menu "layer", insert a picture file in the layer. Select the Hide picture text, select the "Behavior" (or press shift+f3 key) on the Window menu, pop up a "behavior" design panel, press "+", select the display-hidden layer in the pop-up menu, and the System pop-up dialog box. Click the layer, and then click Show, and finally OK. This is a hidden event when the mouse is moved up. Come down and make a move out of the text and show this hidden layer. In the same way, press "+" to add the "Show-hide Layer" behavior, select the layer in the dialog box, press the "Hide" key, and adjust the event to onmouseout (when the mouse is moved out). As shown in Figure 2.

Realization Difficulty coefficient: ☆☆☆☆☆

3. Hide scroll bars with javascript

Purpose: To hide the scroll bar of the browsing window at any time

means: Using JavaScript code to implement

This adds two buttons to the Web page, which hides the vertical and horizontal scroll bars when you click Hide scroll bars, and click Show scroll bars to display them immediately. The effect is shown in Figure 3.

Realization Difficulty coefficient: ☆☆☆☆

Finally, the small white Rabbit and turtle together to eat a meal in the restaurant, turtle satisfied to go home to continue to improve the "Turtle Kingdom" website.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.