|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
One way to accomplish this task that has worked in Navigator since version 3 and in Internet Explorer since version 4 is to come up with GIF or JPG images of the three button “states” and to use the image object to switch them in and out in response to the appropriate mouse events. However, using Netscape Dynamic HTML, it is possible to create an animated, state-dependent button without requiring any images to be created or downloaded. Listing 25.6 shows the Dynamic HTML and JavaScript code used to implement the animated button. Two style classes are used to create the buttons; three layers nested within an outer layer hold each button; and a series of JavaScripts selects the displayed button depending on the state of various mouse events. Listing 25.6 Button.htm—Layers Enable You to Create Dynamic Content
<HTML>
<HEAD>
<SCRIPT LANGUAGE=“JavaScript”>
active=0;
function layerSet(show,hide1,hide2) {
if (active < 1) {
show.visibility=“SHOW”;
hide1.visibility=“HIDE”;
hide2.visibility=“HIDE”;
}
}
</SCRIPT>
<STYLE TYPE=“text/javascript”>
with (classes.Button.P) {
fontFamily=“Verdana”;
fontSize=“24pt”;
fontWeight=“bold”;
textAlign=“center”;
}
with (classes.Out.all) {
backgroundColor=“white”;
borderWidths(“10pt”);
borderStyle=“outset”;
color=“black”;
width=“275pt”;
}
with (classes.Over.all) {
backgroundColor=“yellow”;
borderWidths(“10pt”);
borderStyle=“outset”;
color=“black”;
width=“275pt”;
}
with (classes.Down.all) {
backgroundColor=“black”;
borderWidths(“10pt”);
borderStyle=“inset”;
color=“yellow”;
width=“275pt”;
}
</STYLE>
<TITLE>Animated Buttons without GIFs</TITLE>
</HEAD>
<BODY>
<H1>Animated Buttons without GIFs</H1>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
<HR>
<LAYER NAME=buttons
onMouseOut=“layerSet(layera,layerb,layerc)”
onMouseOver=“layerSet(layerb,layera,layerc)”
VISIBILITY=INHERIT>
<LAYER NAME=buttonOut CLASS=“Out” VISIBILITY=INHERIT>
<P CLASS=“Button”>SUBMIT</P>
</LAYER>
<LAYER NAME=buttonOver CLASS=”Over” VISIBILITY=HIDE>
<P CLASS=“Button”>ARE YOU SURE?</P>
</LAYER>
<LAYER NAME=buttonDown CLASS=”Down” VISIBILITY=HIDE>
<P CLASS=“Button”>SENT!!!</P>
</LAYER>
</LAYER>
</BODY>
<SCRIPT LANGUAGE=“JavaScript”>
var layera=document.layers[‘buttons’].document.buttonOut;
var layerb=document.layers[‘buttons’].document.buttonOver;
var layerc=document.layers[‘buttons’].document.buttonDown;
//
var buttons=document.layers[‘buttons’];
//
buttons.document.captureEvents(Event.MOUSEDOWN);
buttons.document.onmousedown=buttonDown;
function buttonDown() {
layerSet(layerc,layera,layerb);
active++;
}
</SCRIPT>
</HTML>
The first step in animating the button is to set each button up in a layer. The main button layer will contain three child layers—one for each state of the button. By changing the VISIBILITY properties of the layers as different mouse events occur, you can show the graphic appropriate to the button’s state. Figure 25.7 shows the initial state of these layers in which the button is in the raised state. The elements of the button appearance are as follows:
What you need to do next is put in the JavaScript code to handle the changes to the state of the button. The first two states, Out and Over, are easy because the <LAYER> tag supports the onMouseOut and onMouseOver events. In this example, onMouseOut and onMouseOver event handlers in the initial <LAYER> tag call the layerSet() function, which uses the layers’ VISIBILITY property to make the desired button visible and hide the other two. The last mouse event that we want to catch, the button click when the mouse is over the button layers, is a little trickier. That’s because the <LAYER> tag doesn’t support onClick or onMouseDown events. In order to detect a pressed mouse button when the mouse cursor is over the button layers, we need to catch the event at the document level. The JavaScript code located at the bottom of Listing 25.6 shows how this is done:
var buttons=document.layers[‘buttons’];
//
buttons.document.captureEvents(Event.MOUSEDOWN);
buttons.document.onmousedown=buttonDown;
function buttonDown() {
layerSet(layerc,layera,layerb);
active++;
}
First, the variable button is created and defined to be the outermost layer containing the three layers representing the three button states. Then, its captureEvents method is used to instruct JavaScript to capture onMouseDown events that occur within the layer and assigns the JavaScript buttonDown function to be called in that case. The buttonDown function simply displays the “down” button (see Figure 25.9) and sets the active variable so that no further changes in button appearance are possible (in this example, after the button is pressed, it can’t be unpressed).
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
)
){kind=link}
){kind=link}
){kind=link}