Đang chuẩn bị liên kết để tải về tài liệu:
beginning html xhtml css and javascript phần 8

Các kịch bản chúng ta sẽ được xem xét trong phần này được gọi là Lightbox2, và được viết bởi Lokesh Dhakar. Nó dựa trên thử nghiệm và các thư viện Scriptaculous vì vậy chúng tôi sẽ bao gồm họ cũng như các lightbox script. Vì vậy, để tạo ra một lightbox, đầu tiên bạn thêm vào trong ba kịch bản sau đây | Chapter 12 Working with JavaScript The script we will be looking at in this section is called Lightbox2 and was written by Lokesh Dhakar. It is based on the Prototype and Scriptaculous libraries so we will include them as well as the lightbox script. So to create a lightbox first you add in the following three scripts ch12_eg2 0.html script type text javascript src scripts scriptaculous prototype.js script script type text javascript src scripts scriptaculous scriptaculous.js load effects builder script script type text javascript src scripts lightbox.js script There are also some CSS styles that are used in the lightbox so you can either link to this style sheet or include the rules from it in your own style sheet link rel stylesheet href css lightbox.css type text css media screen Finally you create a link to each of the images in the lightbox here you can see a lightbox that contains three images a href images image-1.jpg rel lightbox Japan Picture 1 a a href images image-2.jpg rel lightbox Japan Picture 2 a a href images image-3.jpg rel lightbox Japan Picture 3 a Note the use of the rel attribute on the links this uses the keyword lightbox followed by a name for the lightbox in square brackets. This lightbox is called Japan. Inside the link you can have anything. There is just some simple text in this example although you could include a thumbnail image to represent each of the larger images. You do not have to indicate the size of the image as the script will automatically determine this and resize the lightbox to fit the image. You can also have multiple lightboxes on the same page as long as you give each lightbox a different name here you can see a second lightbox added with photographs from Paris h1 Images from Japan h1 a href images Japan1.jpg a href images Japan2.jpg a href images Japan3.jpg h1 Images from Paris h1 a href images Paris1.jpg a href images Paris2.jpg a href images Paris3.jpg rel lightbox Japan Picture 1 a rel lightbox Japan Picture 2 a rel