HTML and CSS Reference
In-Depth Information
Plan
Ahead
Creating a floating image.
The position of the floating image on the Web page is based on a screen resolution of
1024
3
768. Different screen resolutions will need to adjust the positioning values. In this
chapter, the JavaScript code used to create a floating image includes four user-defined
functions that do the following:
Have an image float from right to left (floatingImage() function)
•
The following steps detail the programming logic for the floatingImage() function:
1. Decrement the left pixel position by 10
2. Test left pixel position to determine if it is off the screen
3. If left pixel
,
150, reset to the right side of the screen (950) based on the screen resolution
of 1024 by 768
4. Use the <div> tag's id attribute to assign the calculated value of the left pixel to the
pixelLeft property of the <div> tag object
5. Assign the setTimeout() method used to call the floatingImage() function to a variable
so the clearTimeout() method can be used to stop the scrolling
Stop the image from scrolling (stopFloat() function) with the clearTimeout() method
•
•
Restart the image scrolling (restartFloat() function) using the setTimeout() method
•
Open a pop-up window for the coupon offer (coupon() function) using the open()
method
Adding a Floating Image to the
Gift Shop Web Page
The Gift Shop Web page (Figure 11-1c on page HTML 509) highlights the gift shop at
the Hickory Oaks Forest Preserve. The Web page has an image that scrolls from right
to left, and if the user clicks the image, a pop-up window displays with a coupon. When
a visitor places the mouse over the image, it stops scrolling. When the mouse is moved off
the floating image, it starts scrolling again. The image stops by using the clearTimeout()
method and the mouse pointer becomes a hand by using an embedded style in the
<img> tag. The floating image is a link to the Coupon Web page that is displayed as a
pop-up window.
To Open an Existing HTML File in Notepad++
To move or float an image, it is placed in a <div> tag layer that is referenced by the
user-defined functions. The floating image is positioned after images on the page to fill
some of the blank space and to avoid overlaying any other text. To begin, the Gift Shop
Web page must be opened.
1
If necessary, start Notepad++.
2
Open the chapter11-1shop.html file in the Chapter11\ChapterFiles folder.
