homepage Welcome to WebmasterWorld Guest from 54.234.128.25
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Flash and Shockwave
Forum Library, Charter, Moderator: open

Flash and Shockwave Forum

    
Flash and NonFlash Navigation Buttons
How Do I Get Both To Work?
JanaP10




msg:4114058
 12:37 am on Apr 12, 2010 (gmt 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>

<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" />
</object>

Thanks for help with this.

 

rocknbil




msg:4114629
 10:20 pm on Apr 12, 2010 (gmt 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.

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

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

mouse-off-state-on-top
----------------------
mouse-on-state-on-bottom

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() {
loadFlashButtons();
};
//
function loadFlashButtons() {
i=0;
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)) {
i++;
var ojbID= key + i;
var nav = new SWFObject($navs[key], ojbID, '100', '50', '9', '#ffffff');
nav.addParam("wmode", "transparent");
nav.write(key);
}
}
}
</script>


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.

JanaP10




msg:4115325
 7:35 pm on Apr 13, 2010 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Flash and Shockwave
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved