Online Documentation Server
 ПОИСК
ods.com.ua Web
 КАТЕГОРИИ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ПОДПИСКА

 О КОПИРАЙТАХ
Вся предоставленная на этом сервере информация собрана нами из разных источников. Если Вам кажется, что публикация каких-то документов нарушает чьи-либо авторские права, сообщите нам об этом.




Previous Table of Contents Next

Table 32-1. Various arguments for the offset() method.

deltaX deltaY

Positive integer Layer moves to the right. Layer moves downward.
Negative integer Layer moves to the left. Layer moves upward.

moveTo()

layerObject.moveTo(x, y)

This method sets the layer’s position to the specified pixel coordinates. The coordinates refer to the position of the layer’s top left corner.

resize()

layerObject.resize(width, height)

This method resizes the layer according to the specified height and width values (in pixels). It does not relayout any HTML content in the layer. Instead, the layer contents may be clipped by the new boundaries of the layer. When you resize a layer you should be certain that necessary HTML content is not excluded.

moveAbove() and moveBelow()

layerObject.moveAbove(layer)
layerObject.moveBelow(layer)

These methods stack the layer (represented by the specified Layer object) above or below the layer specified in the argument, respectively. The horizontal and vertical positions of the layer do not change when you invoke one of these methods. After restacking, both layers will share the same parent layer.

Demonstration: A Pictorial Album of U.S. Presidents

We demonstrate the usage of layers in a script that implements a pictorial album of U.S. presidents. Figure 32-2 shows the first page of the album. The user can choose a president from a list of names, displayed by the pull-down menu (Clinton, Kennedy, and Theodore Roosevelt in this case).

Example 32-2 shows the script.

<HTML>
<TITLE>U.S. presidents</TITLE>
<HEAD>
</HEAD>
<BODY BGCOLOR="white">
<CENTER><FONT SIZE=+3 FACE="arial">U.S. Presidents</FONT></CENTER>
<HR WIDTH=95%>
<LAYER TOP=70 LEFT=10 WIDTH=350 NAME="clinton">
<FONT SIZE=2>
<TABLE BORDER=0>
<TR>
<TD WIDTH=200>
<CENTER>
<IMG SRC="clinton.gif" HEIGHT=268 WIDTH=164>
</CENTER>
</TD>
<TD WIDTH=200>
<CENTER>
<I>
<B>William J. Clinton</B><BR>
Forty-second president
</I>
</CENTER>
</TD>
</TR>
</TABLE>
</FONT>
</LAYER>

<LAYER TOP=70 LEFT=10 WIDTH=350 VISIBILITY=HIDE NAME="kennedy">
<FONT SIZE=2>
<TABLE BORDER=0>
<TR>
<TD WIDTH=200>
<CENTER>
<IMG SRC="kennedy.gif" HEIGHT=268 WIDTH=164>
</CENTER>
</TD>
<TD WIDTH=200>
<CENTER>
<I>
<B>John F. Kennedy</B><BR>
Thirty-fifth president
</I>
</CENTER>
</TD>
</TR>
</TABLE>
</FONT>
</LAYER>

<LAYER TOP=70 LEFT=10 WIDTH=350 VISIBILITY=HIDE NAME="roosevelt">
<FONT SIZE=2>
<TABLE BORDER=0>
<TR>
<TD WIDTH=200>
<CENTER>
<IMG SRC="roosevelt.gif" HEIGHT=268 WIDTH=164>
</CENTER>
</TD>
<TD WIDTH=200>
<CENTER>
<I>
<B>Theodore Roosevelt</B><BR>
Twenty-sixth president
</I>
</CENTER>
</TD>
</TR>
</TABLE>
</FONT>
</LAYER>

<LAYER TOP=280 LEFT=64 NAME="selection">
<FORM>
<SELECT NAME="list"
onChange="changePresident(this.selectedIndex); return false">
<OPTION SELECTED VALUE="clinton">Clinton
<OPTION VALUE="kennedy">Kennedy
<OPTION VALUE="roosevelt">Roosevelt
</SELECT>
</FORM>
</LAYER>

<SCRIPT LANGUAGE="JavaScript">
<!--

function hidePresidents() {
  var args = hidePresidents.arguments
  for (var i = 0; i < args.length; ++i) {
  document.layers[args[i]].visibility = "hide"
  }
}

function changePresident(president) {
  hidePresidents('clinton', 'kennedy', 'roosevelt')
  document.layers[president].visibility = "show"
}

// -->
</SCRIPT>
</BODY>
</HTML>

Example 32-2 (ex32-2.htm). This script for a pictorial album of U.S. presidents demonstrates an application of layers.

The script consists of four layers, one for each of the three presidents and an additional one for the pull-down selection menu. The three president layers are identical in size and span the entire browser’s window. The Kennedy and Roosevelt layers are defined with VISIBILITY=HIDE, leaving the front page for Clinton’s layer which, by default, has VISIBILITY=SHOW. The pull-down menu is a layer by itself and has, by default, VISIBILITY=SHOW as well. Since both the pull-down layer and the Clinton layer are shown, part of the Clinton image is obstructed by the pull-down menu.

Selecting an entry from the pull-down menu invokes the changePresident() function. Upon invocation, changePresident() hides all three president layers via the hidePresident() function and converts the selected president’s layer to a VISIBILITY=SHOW status. In order to make the script general enough, the hidePresident() function reads its arguments (president names) from the standard args array, rather than a fixed-size argument list. Notice the different ways to index the layers array. The changePresident() function accesses it via a president’s layer index in the page, in source order. The hidePresident() function, on the other hand, indexes the layers array by name.

Summary

This chapter describes JavaScript’s extension for layers, which is one of the most fascinating features of Navigator Version 4.0. We detailed the different properties of the layer object, through which you can control the size of the layer, its visibility, and its positional relationship to other layers. The methods of this object, which allow you to change the layers’ positions, were also given. We ended the chapter with an example script that shows how to implement a pictorial album of U.S. presidents by way of layers.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us