Open a text editor, and create a new file named expandBanner.html. In most text editors, create new files by selecting “New” from the “File” menu. Add some basic HTML tags to the file, including “<html>,” “<head>,” “</head>,” “<body>,” “</body>” and “</html>.” <html> <head></head> <body></body> </html>
Add a “<div>” tag between expandBanner.html’s “<body>” and “</body>” tags. Assign the following attributes to the <div> tag: id; "mybanner," style; "background:blue," "border:1px solid," "height:30px" and "width:100px." Add a closing “</div>” tag to complete the banner. While the "id" attribute must be "mybanner," the style attribute values can be changed to suit the user interface. <div id="myBanner" style="background:blue;border:1px solid;height:30px;width:100px;"> </div>
Add an anchor tag (“<a>”) after the close “</div>” tag. Set the anchor tag’s “href” attribute to “#,” give the anchor the text “Click to Expand Banner,” and close the “</a>” tag. <a href="#">Click to Expand Banner</a>
Add an “onclick” event to the anchor tag that calls a function named “expandBanner.” <a href="#" onclick="expandBanner()">Click to Expand Banner</a>
Open expandBanner.html in a web browser. Click on the “Click to Expand Banner” hyperlink and verify that the blue banner expands from 100px to 200px.
- check Banners can be expanded using a variety of events, such as onMouseOver, onChange or onBlur.
- check Banners that use graphics can be expanded to fit the graphics using overflow attribute properties.
- close Expanding page elements may alter locations of surrounding elements and destroy the page’s layout.
Items you will need
- photo_camera Ablestock.com/AbleStock.com/Getty Images