HTML and CSS Reference
In-Depth Information
Entering the floatingImage(), stopFloat(), and
restartFloat()Functions
The next step is to enter the code to have the image float across the screen on the
Gift Shop Web page from right to left, to stop floating when the mouse is over the image,
and to restart floating when the mouse moves off the image. Table 11-13 shows the code
for the floatingImage() function.
Table 11-13 Code for the floatingImage() Function
Line
Code
23
var leftPX=950
24
function floatingImage() {
25
leftPX-=10
26
if (leftPX<-150) leftPX=950
27
document.getElementById('floatImg').style.pixelLeft=leftPX
28
imager=setTimeout(“floatingImage()”,100)
29
}
Line 23 assigns 950 to the variable leftPX to represent the right side of the screen
for the screen resolution 1024 by 768. Line 24 declares the function, floatingImage().
Line 25 decrements the leftPX variable by 10 pixels. Line 26 tests the value of leftPX to
see if it has extended past the end of the screen. The value 2150 was chosen to allow the
image to scroll completely off the screen before starting over at the right. If the value is
less than 2150, leftPX is assigned 950 so the image can start from the right again.
Line 27 assigns the value of leftPX to the pixelLeft property of the image object,
identified by the getElementbyId('floatImg') object. Line 28 assigns the recursive call
of the setTimeout() method to a variable so the floating image can be stopped with an
onMouseOver event handler calling a different function. Line 29 closes the function code.
Simple Animation
on a Web Page with
JavaScript
Animation can be created
by moving objects
associated with a division
(layer). By repeatedly
changing the position and
placement of the division
in a recursive user-defined
function, the object moves.
To Enter the floatingImage() Function
The following step enters the floatingImage() function.
1
Click line 22 and press
the e n t e r key.
On line 23, enter the
JavaScript code as
shown in Table 11-13
to enter the float-
ingImage()
user-defined
function,
indenting
as shown.
starting position
of image
if image is at left
edge of window,
then image
repositioned
at right
subtraction moves
image 10 pixels to left
assigns image to
new position
press e n t e r
key twice
recursion call gives
illusion of movement
Press the
e n t e r key
twice to place the
insertion point on
line 31 (Figure 11-21).
Figure 11-21
 
Search WWH ::




Custom Search