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 “,” “,” “,” “,” “” and “.”
Add a “
Add an “onclick” event to the anchor tag that calls a function named “expandBanner.”
Add a function named “expandBanner” between expandBanner.html’s “” tags. This function sets focus to and expands the “mybanner” div by changing its width from 100px to 200px. Save and close expandBanner.html. After step 6, expandBanner.html appears as shown below:
Click to Expand Banner
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