Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Flash and NonFlash Navigation Buttons

How Do I Get Both To Work?

12:37 am on Apr 12, 2010 (gmt 0)

New User

5+ Year Member

joined:Apr 10, 2010
posts: 17
votes: 0

I have included below my code for Flash version of two navigation buttons which link successfully to each other. I would like to have the same navigation buttons work for users who turn off their Flash. I created png images for both buttons and added them to the code and they display fine in Firefox (with Flash disabled). My question is: How does the user navigate from the Home page to the Parties page when there's no flash button to click? I do not use CSS style for the navigation buttons but if I need to do that, please advise.

<object type="application/x-shockwave-flash" data="BarButton-Home.swf" width="55" height="23" align="middle">
<param name="movie" value="BarButton-Home.swf" />
<param name="bgcolor" value="#990033" />
<img src="Button-Home.png" alt="Home Button" />

<object data="BarButton-Parties.swf" type="application/x-shockwave-flash" width="63" height="23" align="middle">
<param name="movie" value="BarButton-Parties.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#990033" />
<img src="Button-Parties.png" alt="Parties Button" />

Thanks for help with this.
10:20 pm on Apr 12, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Welcome aboard JanaP10, here is what **I** would do.

Anything you build in Flash or even Javascript, construct the NON-progressive enhancement FIRST. The below is not working code, but will get you started.

Start with an anchor with a background image for the rollover. In this example, I am using "plain text" in the anchor, but note that the -5000 text-indent sets it off-screen, thus invisible. The outline:none hides the trick by not revealing the dotted outline of the link when in active state.

<li id="home-link"><a href="/">Home</a></li>
<!-- other links here, in li's -->

The bolded ID becomes important in a minute.

Next, construct the button as a single image with the "off" (:link and :visited) state at the top, the mouseover/visited state at the bottom. For the purpose of this example, if the button is 100 X 50, this means the image is 100 X 100, like


What we will do is adjust the background position on mouseover, which means "no delay" while loading a mouse-over image. The CSS would be something like this:

#home-link a { display: block; width: 100px; height: 50px; background:url(home-link.gif) no-repeat; font-size:2px; text-indent:-5000px; outline:none; }
#home-link a:link,
#home-link a:visited { background-position: 0 0; }
#home-link a:hover,
#home-link a:active { background-position: 0 -25px; }

Test it, make sure it's working.

Now we're ready to re-add your flash. Download the Javascript library SWFObject [code.google.com]. The way this works is if the ID of a certain element is found, it writes innerHTML to the id'ed element. That is, the anchor inside the <li> will be replaced by your Flash.

Although my example only has the id "home-link," note the object constructor that works "like" an associative array for home, about, and contact. Basically this says "if this id is found, replace it with that SWF." Be sure to include the swfobject.js line as shown.

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
window.onload=function() {
function loadFlashButtons() {
var navs = {
'home-button': 'BarButton-Home.swf',
'about-button': 'Bar-Button-About.swf',
'contact-button': 'Bar-Button-Contact.swf'
for (key in navs) {
if (document.getElementById.key)) {
var ojbID= key + i;
var nav = new SWFObject($navs[key], ojbID, '100', '50', '9', '#ffffff');
nav.addParam("wmode", "transparent");

Note that

if (document.getElementById.key)) {

only executes this code if the ID exists, so if your HTML consists of only the home-link as shown above, it won't error because there is no about or contact link. Yet.

So you have
- alternate content loading first
- text in link for search engines, but "invisible" to user via text-indent
- if JS and Flash are present, the button inside the LI is REPLACED by the Flash.
7:35 pm on Apr 13, 2010 (gmt 0)

New User

5+ Year Member

joined:Apr 10, 2010
posts: 17
votes: 0

Thanks for your reply but unfortunately what you wrote is just too confusing for me. I am still learning how to write a CSS style sheet and I am not experienced with java script. I thought I was just missing a line or two of code. I have another problem I can't understand. When I preview my pages in Firefox and navigate from page to page, the color I set for the background keeps appearing before the page loads; it doesn't happen in IE. It started happening when I added the line of code: <img src="Button-Home.png" alt="Home Button" /> to all the navigation buttons (in preparation for nonflash usability) and those buttons have the same color background. Would very much appreciate help with this issue. Is there also anywhere on this forum where one can post the HTML code for an entire Web page and receive help? Thank you so much.