HTML and CSS Reference
In-Depth Information
To Enter an Embedded Style Sheet to Format the Floating Image
The next step is to add an id selector to the embedded CSS to place the floating image. The style sheet uses
the id selector, floatImg, which later will be associated with the <div> tag container to position the image. The
embedded style sheet sets the position to absolute, and 950 pixels from the left side of the screen. The following step
enters the id selector in the embedded style sheet used to position the floating image on the Gift Shop Web page.
1
•
and then press the
e n t e r
key.
Click the blank line 91
•
#floatImg {
to
create the id selector
and then press the
e n t e r
key.
Type
style sheet entry for
<img> tag containing
floating image
press the
e n t e r
key
•
Figure 11-25, then
type
position:
absolute;
left:950 px;
to define the initial position of the image, and then press the
e n t e r
key.
Indent as shown in
Figure 11-25
•
Move to the left margin and type
}
to close the #floatImg id selector, and then press the
e n t e r
key (Figure 11-25).
Entering an Image Object for the Floating Image Using
the <div> and <img> Tags
The next step is to add the floating image. First, a <div> tag container must be
added on the Web page. The <div> tag uses the id selector, #floatImg, to indicate where
the image should be initially positioned. The <div> tag layer becomes the image object
whose pixelLeft property is modified to change the position of the image to float across
the page. Table 11-17 shows the HTML code for the <div> tag and image tags that must
be added to the Web page table.
The Purpose of the
<div> Tag
The <div> tag is called
a container, and is used
to format the layout of
sections or divisions of
text needing the same
style. Web developers
often describe divisions
as layers because they
can be placed on top of
each other and revealed
dynamically as needed.
Table 11-17 Code to Add the Floating Image <div> Tag
Moving Objects
Object positions can be
dynamically modified
within a division (<div>)
or a span (<span>) tag
using a scripting language.
Differences in browsers
may cause a division to
appear slightly lower or
higher than originally
intended by the developer.
Line
Code
137
<div id=”floatImg”>
138
<img src=”chapter11-1floatingplaque.gif” alt=”scrolling plaque”
style=”cursor:pointer;” onMouseOver=”stopFloat()”
onMouseOut=”restartFloat()” onClick=”coupon()” />
139
</div>
Line 137 starts the <div> tag with the floatImg id selector attribute (id=“floatImg”).
Line 138 is the <img> image tag with three event handlers. This line must be typed
without any line breaks. The onMouseOver event handler calls the stopFloat() user-
defined function to stop the movement. When the visitor moves the mouse off the image,
the onMouseOut event handler calls the restartFloat() user-defined function. The onClick
event handler calls the coupon() user-defined function, which displays a pop-up window
with a coupon. The style attribute will cause the mouse pointer to change to a hand when
the mouse is over the image. Line 139 is the closing </div> tag.
