1. Copyright © 2003 Pearson Education, Inc. Slide 5-1

2. Copyright © 2003 Pearson Education, Inc. Slide 5-2 Created by, Stephanie Ludi, Rochester institute of TechnologyNY Advanced Web Page Construction Chapter 5

3. Copyright © 2003 Pearson Education, Inc. Slide 5-3 Explore how to use image maps and JavaScript to create livelier Web pages. Learn how to find JavaScript programs on the Web and install them on your Web pages. Find out what Java applets can do and how to add them to your Web pages. Discover how you can customize JavaScript programs and Java applets to meet your needs. Learn how data-driven Java applets make it easier to manage frequent Web page updates. Find out what Web site maintenance tools and site construction kits can do for you. Learning Objectives

4. Copyright © 2003 Pearson Education, Inc. Slide 5-4 Its very easy to add dynamic elements to your Web pages. Ready-made JavaScripts and Java applets are available on the web for you to add to your Web page. A JavaScript is a bit of code written to enhance a Web page. A Java Applet is a small Java program that is attached to a web page. Taking Charge

5. Copyright © 2003 Pearson Education, Inc. Slide 5-5 A Script is a small computer program written in a scripting language. A scripting language is usually more limited and simpler than a full-fledged programming language. Taking Charge

6. Copyright © 2003 Pearson Education, Inc. Slide 5-6 An image map is an easy way to create hyperlinks inside graphical elements. A hotzone is an arbitrary region on a Web page that contains a hyperlink. Server-side image maps run on the Web server. Client-side image maps are run from the users browser. Client-Side Image Maps

7. Copyright © 2003 Pearson Education, Inc. Slide 5-7 Image maps can be created manually or with an image-mapping tool. If you create them manually, use ISMAP to find the x and y coordinates of the rectangular hotzone. Details of the use of the nifty ISMAP trick are outlined on p. 260. Client-Side Image Maps

8. Copyright © 2003 Pearson Education, Inc. Slide 5-8 Tools allow you to create image maps that have shapes other than rectangles. Image-mapping tools can be found on the Web Some Web page construction tools support the creation of image maps too Client-Side Image Maps

9. Copyright © 2003 Pearson Education, Inc. Slide 5-9 Client-side image maps can also be made to respond to JavaScript events such as mouseovers mouseclicks These image maps are used to create things like: Graphical buttons Menus containing a set of these buttons Links to a large image from a thumbnail version of the image Client-Side Image Maps

10. Copyright © 2003 Pearson Education, Inc. Slide 5-10 One way to make your own image maps Find the image that you want to map View the image with your Web browser using the ISMAP trick Record the coordinate pairs for each rectangular hotzone you want to define. Create an AREA element for each hotzone, and put each inside an MAP element Client-Side Image Maps

11. Copyright © 2003 Pearson Education, Inc. Slide 5-11 One way to make your own image maps Add the MAP element to the BODY element of the Web page Add a USEMAP attribute to the IMG element for the image just mapped Client-Side Image Maps

12. Copyright © 2003 Pearson Education, Inc. Slide 5-12 JavaScript and Mouseover Events JavaScript is a scripting language designed to enhance Web pages: it can be used to create client-side image maps. Each script is attached to an HTML file and must be executed by the Web browser rendering the page. Different browsers support slightly different versions of JavaScript. There are many examples of JavaScripts on the Web.

13. Copyright © 2003 Pearson Education, Inc. Slide 5-13 JavaScript and Mouseover Events It is often necessary to have two different versions of a JavaScript on a page to support both Navigator and Explorer. Test your script with both browsers.

14. Copyright © 2003 Pearson Education, Inc. Slide 5-14 Mouseover: The action of sweeping the mouse over a region on a Web page that has been programmed to respond to the mouses presence. Often a mouseover causes a graphic on the Web page to be swapped for another giving the illusion that the graphic is highlighted. JavaScript and Mouseover Events

15. Copyright © 2003 Pearson Education, Inc. Slide 5-15 JavaScript and Mouseover Events

16. Copyright © 2003 Pearson Education, Inc. Slide 5-16 JavaScript and Mouseover Events When you want to create a menu with a set of buttons, several versions of each button need to be created. The button can be pressed The button can be released The button may change when the mouse pointer is over it The images are usually swapped so fast that you would not know that the files were separate

17. Copyright © 2003 Pearson Education, Inc. Slide 5-17 JavaScript and Mouseover Events

18. Copyright © 2003 Pearson Education, Inc. Slide 5-18 JavaScript events include: onClick ( mousedown immediately followed by mouseup) onDbClick (a fast double-click) onMouseMove (the mouse moves in the hotzone) onKeyDown (a key is pressed on the keyboard) onKeyUp (a key is released) onKeyPress (a key is hit and immediately released) JavaScript and Mouseover Events

19. Copyright © 2003 Pearson Education, Inc. Slide 5-19 JavaScript and Mouseover Events There are safeguards in JavaScript to prevent it from spreading viruses. It is possible to write a malicious JavaScript though. JavaScript can be disabled in the browser.

20. Copyright © 2003 Pearson Education, Inc. Slide 5-20 JavaScript and Mouseover Events If you are interested in using JavaScripts, you can Follow some of the steps in this text to get started Use some commercial Web page construction tools that can assist you Follow an online tutorial Use pre-made scripts found in online script libraries

21. Copyright © 2003 Pearson Education, Inc. Slide 5-21 Java Applets A Java applet is a small executable program attached to a Web page. Applets require that a JVM be installed on the client computer. A JVM (Java Virtual Machine) is a platform-specific browser add-on that makes it possible for Web browsers to execute Java applets.

22. Copyright © 2003 Pearson Education, Inc. Slide 5-22 Java Applets Java is a full-fledged programming language. Applets pose less of a risk than scripts do. Applets cant carry viruses since they cant write to the local machine.

23. Copyright © 2003 Pearson Education, Inc. Slide 5-23 Programming Java Applets will require programming skill You can find freely available applets online at applet sites As an applet is software, it will have a license too Java Applets

24. Copyright © 2003 Pearson Education, Inc. Slide 5-24 To install an applet: Download and unpack the applet (see Ch. 8 for more info) Read all available documentation Insert the required HTML snippet into your Web page Modify the PARAM values as needed Upload your Web page to the server Upload the required.class file Upload any required support files Java Applets

25. Copyright © 2003 Pearson Education, Inc. Slide 5-25 Data-driven Web page displays are used to minimize the amount of effort needed for ongoing Web page maintenance. A Java applet reads and displays the information contained in a text file. Only that text file needs to be updated. These applets are often highly customizable Data-Driven Web Pages

26. Copyright © 2003 Pearson Education, Inc. Slide 5-26 Data-Driven Web Pages

27. Copyright © 2003 Pearson Education, Inc. Slide 5-27 Data-Driven Web Pages Data-driven displays are not limited to text. They can accept data from the user. Applets that do this are freely available on the Web.

28. Copyright © 2003 Pearson Education, Inc. Slide 5-28 As Web sites become larger and more complex, they become harder to maintain. There are utilities that can help you with your Web site maintenance tasks. These utilities include Link checkers Site mappers Web Site Maintenance Tools

29. Copyright © 2003 Pearson Education, Inc. Slide 5-29 Pages come and go on the Web Your site likely has several links to pages all over the Web Making sure that the links on your site are not obsolete can take a lot of time You should check that the links are valid on a regular basis as part of you sites maintenance Web Site Maintenance Tools

30. Copyright © 2003 Pearson Education, Inc. Slide 5-30 An automated link checker, quickly checks that whether all of the links on your site exist. Other link problems can also be detected. It can either be a service you subscribe to a utility you purchase A link checker provides a report that lists all the links that may need to be fixed. Web Site Maintenance Tools

31. Copyright © 2003 Pearson Education, Inc. Slide 5-31 Web Site Maintenance Tools

32. Copyright © 2003 Pearson Education, Inc. Slide 5-32 A site map is helpful to first-time visitors to your site. A site mapper is a utility that will help you keep your site map up-to-date. Every time you reorganize your sites structure, you can run a site mapper The newly generated site map presents the updated structure to visitors Freeware and commercial programs exist to assist you. Web Site Maintenance Tools

33. Copyright © 2003 Pearson Education, Inc. Slide 5-33 Web Site Maintenance Tools

34. Copyright © 2003 Pearson Education, Inc. Slide 5-34 Web site construction kits are packages designed to help you customize sophisticated sites including: E-stores Informational sites that are updated regularly There are many options at all price levels. Some service providers will help you set up an e-store that they will host. Site Construction Kits