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.
