HTML and CSS Reference
In-Depth Information
FIGURE 4.42 The rocking
heavy metal ad.
The background of the entire advertisement is a short looping video clip that
shows off the energy of the band. Over the top of this the most important informa-
tion is displayed, and on hover/focus another pane of information is shown contain-
ing more info. The final product as it stands at this point is shown in Figure 4.42 .
The basic markup structure is as follows:
<section id=”ad”>
<div id=”video-frame”></div>
<div id=”frame1”></div>
<div id=”frame2”></div>
One section contains the entire ad and includes a <video> element to render
the rocking Dead Hamster footage, a <div> to apply an effect over the top of the
video (more on this shortly), and then a couple more <div> s to contain the two
panes of information.
NOTE: JavaScript has been used to mute video: I fire the JavaScript on the
onloadedmetadata event to make sure mute is fired before the content starts
playing; otherwise, a clip of sound might be heard before the mute kicks in.
Search WWH ::

Custom Search