How to make a drag-and-drop puzzle on a Web page

Source: Internet
Author: User
Tags insert split dreamweaver
The Web page behaviors drag layer instructions.

How do I do a jigsaw puzzle on a Web page?

In fact, it is not difficult to do this, only need to use the Dreamweaver a simple instruction.

Step one: Find a picture that is complete and brightly coloured. This is easy for others to identify.

Step Two: Use some software to split them evenly, and name them as *.jpg or *.gif pictures respectively. I recommend using Friework or Photoshop.

Step three: Enter Dreamweaver to open a corresponding file.

Step Four: Click the Layer (Layer) in the object's toolbar to drag a layer off the page.

Step five: Fixed the mouse in the Layer box, and click on the tool bar in the picture Insert button, insert a picture of your previous split.

Step Six: Press the keyboard "F8", pop-up "behaviors" panel, in events for:. Choose IE 4.0.

Step Seven: Select the layer in the page, and then click the "+" key in the panel, the System pop-up list, select the drag Layer.

Step eight: At this time the pop-up frame, select the layer (Layer) when the time must select the current layer. (If not very clear, press F11). Other settings can not move his default. Press ok.

Step nine: Then click the lower black arrow on the right side of the event and select "OnMouseOver" in the pop-up list.

Such a drag-and-drop image is built, you can save it. Open the corresponding HTML file in the browser and try it. :) Other pictures will be repeated in this way several times.

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.