How to Add a Navigation Button on Top of a Flash Movie

Use Cascading Style Sheets to precisely place navigation buttons.

Flash is a popular program created by Adobe that allows designers and developers to create a wide range of interactive content, from animations and sounds to fully featured websites and movies. Using the Flash browser plug-in, these pieces of content can be viewed exactly as designed on nearly any operating system or platform. Flash movies are easily embedded in web pages using HTML code. As such, adding navigation buttons on top of them simply requires adding a few Cascading Style Sheet (CSS) style rules.

Instructions

1. Open your web page. If you use a text editor such as Wordpad, simply open your page in the program. If you use an editing program like Adobe Dreamweaver or Microsoft Expression Web, first open your page and then change the viewing mode to Code View. This view shows you the HTML code that controls the appearance of your page in a web browser.

2. Locate the closing </object> or </embed> tag related to your Flash movie code, and then create a blank line directly below the tag.

3. Insert the code for your navigation button and its associated hyper link on the blank line, using the following format:

   <a href="link.html">
   <img src="button.jpg">
   </a>

4. Add CSS rules to the navigation button image to control its placement. Copy and paste the code sample below so that your <img> tag resembles the following:

   <img src="button.jpg" style="border: none; display: block; position: relative; bottom: 200px; left: 50px">

5. Adjust the CSS parameters to meet your design needs. The "none" parameter on the border property removes the border automatically placed around links by the browser, since most navigation buttons do not use such borders. Remove this rule if you want the border. The other CSS rules move the button out of the so-called normal flow of the page. Instead of appearing at its expected location, it shifts the button 200 pixels up and 50 pixels from the left of its original location, placing it directly on top of your Flash movie. Adjust these values to place the button precisely in your desired location.

References

• W3 Schools: CSS Position Property
• HTML Source: CSS Layout