|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
Platinum Edition Using HTML 4, XML, and Java 1.2
Listing 26.6 Position.htm—With Dynamic HTML, You Can Change the Position of any HTML Element
<HTML>
<HEAD>
<SCRIPT LANGUAGE=“JavaScript”>
basex = 0;
basey = 0;
deltax = 0;
deltay = 0;
moving = false;
function toggleMove() {
moving = !moving;
document.MyForm.Moving.value = moving;
if (moving) {
Author.style.filter = “xray(enabled=1)”
deltax += window.event.x - basex;
deltay += window.event.y - basey;
} else
Author.style.filter = “xray(enabled=0)”
}
function moveAuthor() {
if (moving) {
basex = window.event.x;
basey = window.event.y;
Author.style.left = basex - deltax;
Author.style.top = basey - deltay;
document.MyForm.PicX.value = basex;
document.MyForm.PicY.value = basey;
}
}
</SCRIPT>
<TITLE>Positioning Elements with Dynamic HTML</TITLE>
</HEAD>
<BODY onMouseMove=“moveAuthor()”>
<CENTER>
<H1>Positioning Elements with Dynamic HTML</H1>
<HR>
<P>
Click the mouse on the picture to move it around; this is achieved by
setting picture’s <EM>style.top</EM> and <EM>style.left</EM>
properties.
</P>
<HR>
<CENTER>
<SPAN ID=Author STYLE=“position:relative;width:132” onClick=“toggleMove()”>
<TABLE>
<TR VALIGN=“BOTTOM”>
<TD><IMG SRC=“rbflag_ls.gif” WIDTH=50 HEIGHT=47 BORDER=0></TD>
<TD><IMG SRC=“Author.jpg” WIDTH=132 HEIGHT=198 BORDER=0><TD>
<TD><IMG SRC=“rbflag_rs.gif” WIDTH=50 HEIGHT=47 BORDER=0></TD></TR>
</TABLE>
</SPAN>
</CENTER>
<HR>
<FORM NAME=“MyForm”>
<TABLE>
<TR><TD>Mouse X</TD><TD><INPUT TYPE=“TEXT” SIZE=5 NAME=“PicX”> </TD>
<TD>Mouse Y</TD><TD><INPUT TYPE=“TEXT” SIZE=5 NAME=“PicY”> </TD>
<TD>Moving </TD><TD><INPUT TYPE=“TEXT” SIZE=5 NAME=“Moving”></TD></TR>
</TABLE>
</FORM>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>
Changing HTML Documents On-the-FlyThe last example shows the use of Dynamic HTML to create dynamic content—HTML elements that are changed within the Web browser on-the-fly. Listing 26.7 is an example of two ways HTML elements can be changed on-the-fly. The digital clock (see Figure 26.11) is an HTML element, but it changes automatically each second to reflect the local time. The paragraph following it, on the other hand, is changed in response to user input—when the user clicks the Change HTML button, the contents of the text box above the button are substituted for the paragraph. As you can see in Figure 26.12, this substitution can also include any HTML elements, as shown with the <MARQUEE> and hypertext link in this example. Listing 26.7 DynCon2.htm—Dynamic HTML Can Change HTML Documents Without Going Back to the Web Server
<HTML>
<HEAD>
<TITLE>Dynamic Content</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Dynamic Content</H1>
<HR>
<DIV ID=digitalClock STYLE=“font-size: 60”>
</DIV>
<HR>
<DIV ID=dynContent>
<P>
This example shows how HTML content can be dynamically
changed. The clock shown above is updated with the local
time on your system once a second. This text will be
replaced by any HTML elements that are entered in the
text box below when the <EM>Change HTML</EM> button is
clicked.
</P>
</DIV>
<HR>
<INPUT ID=newContent TYPE=TEXT STYLE=“width: 100%”><BR>
<INPUT TYPE=BUTTON VALUE=“Change HTML”
onclick=“dynContent.innerHTML = newContent.value”>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
<SCRIPT LANGUAGE=“JScript”>
function runClock() {
var d,h,m,s;
//
d = new Date();
h = d.getHours();
m = d.getMinutes();
s = d.getSeconds();
//
if (h < 10) h = “0” + h;
if (m < 10) m = “0” + m;
if (s < 10) s = “0” + s;
//
digitalClock.innerHTML = h + “:” + m + “:” + s;
window.setTimeout(“runClock();”,100);
}
window.onload = runClock;
</SCRIPT>
</HTML>
Dynamic HTML FiltersMicrosoft has included some new capabilities in its newer Internet Explorer Web browsers through a series of ActiveX Controls and Web browser objects as part of its implementation of Dynamic HTML. You have already seen one of them in action: the Data Source Object that works along with Dynamic HTML data binding to enable HTML elements to import data from external sources. In addition to this component, Microsoft has included a series of controls used to create and manipulate graphic objects and the appearance of an HTML document as a whole. Microsoft has included a series of filters you can add to Web pages to achieve a number of interesting visual effects that were previously possible only by creating large graphic images in a program such as Adobe Photoshop. These filters are accessed through style sheet attributes and can be applied to text, images, and graphic objects—in short, anything that can appear in an HTML document. Microsoft has an excellent example of the possible effects users can achieve with the Dynamic HTML filters, along with the other Dynamic HTML demos. The demo Web site is at The filter example is at Figure 26.13 shows the default, unfiltered state of this demo page, and it has the following elements:
|
|
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}