HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 19—Activating Pages with Multimedia and Rollovers |
259 |
the JavaScript language. In a way, JavaScript is a language within HTML, another language. A Web page can become extremely tactile, offering feedback as the user mouses around the screen, making the Web page seem to come alive. The great thing about rollovers is that they add very little to a page’s overhead, unlike the typical multimedia elements described in the earlier parts of this session.
Therefore, you should spend a few moments learning how to produce your own rollover effects. Even though rollover effects are not strictly multimedia elements, they fit well as a closing topic for this session because of their active nature. Figure 19-4 shows a Web page that supports the rollover effect. As the user moves the mouse over a button, that button changes in color to show that, if the user clicks the mouse, that button will activate.
Rollover in effect
Evening Saturday—IV Part
19 Session
Figure 19-4
Rollover effects help add a useful, dynamic effect to items on a Web page.
260 |
Saturday Evening |
JavaScript-enabled
As you learned back in Session 1 and 4, JavaScript is a scripting language, as opposed to a programming language. Although the purists would argue the point, HTML is, in a way, a scripting language of sorts because the browser interprets the HTML commands you write as it reads the commands. Unlike a more traditional, nonscripted programming language that must be compiled to be understood by the computer, JavaScript is interpreted and acted upon line by line.
Netscape developed JavaScript a few years ago as a competitor to Microsoft’s ActiveX technology. With JavaScript, Netscape’s browsers were able to dynamically respond to the user’s actions, leading to the term DHTML or Dynamic HTML. JavaScript has grown so popular that now all the browsers, including Microsoft’s, support JavaScript commands.
A quick rollover example
Although there is not enough time in a weekend course to teach both HTML and JavaScript and anything more than raw HTML at that, you might be able to pick up enough in an example to piece together your own rollover effects if you decide to use them. Therefore, here you will look at the creation of a single rollover effect. You will take one of the buttons from Figure 19-4, which is actually nothing more than a GIF file sized to a button, and see how to create a simple Web page with only that button and the button’s rollover effect. This example will move fast and will not explain every last detail, but your appetite to learn about rollovers will be amply whetted once you reach the end of this session.
Create the Graphics
For each rollover effect in your Web page, you need to produce two separate GIF files. Figure 19-5 shows the two buttons, each saved in its own separate GIF file. The button with the white background is saved under the name button.gif, and the button with the dark background is saved under the name buttonM.gif, meaning that is the button that is to appear when the mouse points to it. This button will change colors when the mouse moves over it.
Now that you have two buttons that will represent both sides of the rollover effect, you are ready to create the Web page.
Session 19—Activating Pages with Multimedia and Rollovers |
261 |
Figure 19-5
The two buttons represent both sides of the rollover effect.
Code the Initial HTML
You can now create a Web page that is a simple page containing only the single button. Listing 19-3 contains a simple HTML program that places the regular button towards the top of the Web page, using the <img> tag, as shown in Figure 19-6. The button’s image file is named button.gif.
Listing 19-3
Creating a single Web page with one regular button
<html>
<head>
<title>Rollover Effect</title> </head>
<body bgcolor=#808080>
<!-- Create some space from the top of the screen --> <br><br><br><br>
Evening Saturday—IV Part
19 Session
Continued
262 |
Saturday Evening |
Listing 19-3 |
Continued |
<!-- Add a light background to further emphasize rollover -->
<center>
<img border=”0” src=”images/button.gif” width=119 height=23> </center>
</body>
</html>
Figure 19-6
The button will change colors when the mouse moves over it.
Writing the JavaScript
Now things get a little crazy. At least, the first time you’re exposed to JavaScript, they seem crazy. You now must write the JavaScript code, in the JavaScript language that you do not know, that will store the two versions of the button and make them available when needed — that is, when the user moves the mouse pointer over them and then off once again.
Session 19—Activating Pages with Multimedia and Rollovers |
263 |
In the header section, you must place the JavaScript that defines the two graphic images, assigns names to them, and makes the images available later in the HTML code. In the body of the page, you must name the button with the name= attribute and add two new events to the button’s hyperlink reference: ONMOUSEOVER and ONMOUSEOUT. An event is something that happens in a Windows session, usually as the result of the user clicking or moving the mouse or pressing a key. A specific event’s code triggers whenever the user performs that event. Therefore, when the user moves the mouse over the button, the ONMOUSEOVER event triggers. When the user moves the mouse away from, or out of, the button’s image, the ONMOUSEOUT event occurs. Listing 19-4 shows the complete code that enhances the button with the rollover effect.
Listing 19-4
Creating JavaScript code to store the buttons and make them available
<html>
<head>
<title>Rollover Effect</title>
<!-- JavaScript goes next --> <script language=”javascript1.1”> <!--
firstimage=new Image() firstimage.src=”images/button.gif” secondimage=new Image() secondimage.src=”images/buttonM.gif”
<!-- Add more dual images for each button on your page --> <!-- Therefore, if you have 3 buttons, you’ll have a pair
of entries for thirdimage, etc. -->
//--> </script>
<script> <!--
function changeIt(imagename,objectsrc)
{
if (document.images)
Evening Saturday—IV Part
19 Session
Continued
264 |
Saturday Evening |
Listing 19-4 Continued
{ document.images[imagename].src=eval(objectsrc+”.src”) } <!-- No change no matter how many buttons you have -->
}
//--> </script>
</head>
<body bgcolor=#808080> <!-- Sets background to gray -->
<!-- Create some space from the top of the screen --> <br><br><br><br>
<center>
<!-- Uses the button’s name to swap picture --> <a href=”somewhere.htm” ONMOUSEOVER=”changeIt(‘Interests’,’secondimage’)” ONMOUSEOUT=”changeIt(‘Interests’,’firstimage’)”>
<!-- A third is ONMOUSECLICK if you want a third effect --> <img border=”0” name=”Interests”
src=”images/button.gif” width=119 height=23></a>
</center>
</body>
</html>
Notice that the code stores each of the two images, and then the event, in the body of the code, swaps the button with its opposite image. The changeIt routine requests that the button named Interests be swapped with the other image. You might also notice that JavaScript appears completely inside comments. Therefore, any older browsers will ignore the JavaScript and will just display a regular button. Older browsers also ignore unrecognized attributes, such as the ONMOUSEOVER and
ONMOUSEOUT events.
Session 19—Activating Pages with Multimedia and Rollovers |
265 |
|
|
“How am I supposed to know what to code?” you may be asking. |
|
|
When your Web page contains ten buttons, what do you do differ- |
|
Tip |
ently? The answer is, start with this code and simply add to it. |
|
Where this code stores two button images, your code will store ten |
||
|
pairs of images. This code is the skeleton for most of the rollover |
|
|
effects in use today. Don’t expect to decipher and understand |
|
|
every line of the preceding JavaScript. It is the foundation for |
|
|
future expansion as you learn more about JavaScript and DHTML. |
|
REVIEW
Although bandwidth is increasing, limit your use of multimedia to present fast-loading Web sites.
You can add sounds with the simple hyperlink tag.
Sound and video clips should be stored in their own directories to limit the multiple loading of the same file that appears several times on a site.
Video clips can request an external player or appear inside the Web page itself.
Rollover effects help to activate your page with DHTML.
QUIZ YOURSELF
1.Name two popular audio formats for Web use. (See “Adding Sound to Web Pages.”)
2.True or False: The user can start and stop a sound you embed in a Web page using the <a> tag. (See “Sound with HTML.”)
3.What is the difference between a Web page video and a Web page streaming video? (See “Adding Video to Web Pages.”)
4.What is the difference between external video and internal video? (See “Adding Video to Web Pages.”)
5.What language supports rollover effects? (See “The Rollover Effect.”)
Evening Saturday—IV Part
19 Session
S E S S I O N
20
Be Uniform with Style Sheets
Session Checklist
Learn why style sheets are needed and their advantages and disadvantages
Learn the format of a style in a style sheet and the most popular styles
Prepare a style sheet for an individual Web page or one for an entire site
Perform advanced work with styles, such as specifying classes
In this session, you learn how to format using an approach that differs from the individual formatting you’ve learned so far. You learn how to format with style sheets. Style sheets should revolutionize the way programmers write
HTML code. In this session, you learn the why and how of style sheets. Although you won’t learn every style sheet detail, you will begin to see why style sheets promise to change the way programmers create Web pages in the future.
268 |
Saturday Evening |
Introducing Style Sheets
Perhaps you’ve used styles in word processors. When you create a style for a paragraph, for example, you specify that paragraph’s margins, fonts, and spacing, as well as any other details you want that paragraph style to achieve. You name the style for easy reference. Then any paragraphs you later write will take on that style’s requirements when you apply the paragraph style’s name to those paragraphs.
By defining a style once, you don’t have to reissue the same formatting commands every time you want that style. You only need to begin writing without regard to any formatting. When you finish, you then apply the style, and the word processor formats the paragraph properly. HTML supports style sheets as well. The HTML style sheets are called Cascading Style Sheets (or CSS), and they work in a manner similar to those in your word processor.
Before you continue . . .
Before this session continues, please understand that the analogy between word processor style sheets and HTML style sheets is an imperfect one at best. Whereas most word processors are WYSIWYG (What You See Is What You Get, which is the concept that the screen looks like the finished, printed product will look), most HTML style sheets do not represent what appears on the final user’s screen. HTML’s style sheets are merely recommendations to the end-user’s browser as to how to format the Web page. This is because of the vast array of Web viewing equipment on the market. You can create a fantastic heading style that wows the masses when your screen is the only game in town, but consider a list of just some of
the hardware that users may use to view your Web page:
A 21-inch, high-resolution, plasma, flat-panel, 1200 × 1024 pixel, 16-million color monitor
A 15-inch, 640 × 480 pixel, 256-color monitor
WebTV
Black-and-white portable Internet-ready displays, such as cell phones, that display 40 characters per line and up to 10 lines of a Web page at any one time before requiring scrolling (such screens come on devices called PDAs,
Personal Data Assistants)
With such an array of hardware, how applicable is your style that defines a paragraph as a boldfaced blue Times Roman 12-point font whose first line is indented 5 characters, with a maximum line width of 80 characters? You have