Swf vervangen voor gif in Firefox voor Mac?

Twansparant · 4 sep 2008

Hallo allemaal,

Ik heb een probleem waar ik maar niet uit schijn te komen.....
Het heeft te maken met de bekende 'wmode transparant' bug in Firefox voor Mac;

Ik heb een pagina met daarin een flash animatie (geëmbed met swfobject), deze moet op transparant staan in de 'wmode' want als de animatie nog niet geladen is, moet de background-image in de div zichtbaar zijn.
Over deze animatie heen ligt een transparante header balk met uitschuivende navigatie on mouseover. Op de rest van de pagina's in de website is deze topbalk niet transparant.

Op zich gaat dit goed, echter niet in FF2 en FF3 op een Mac, in Firefox op een PC is er geen probleem, ook in IE en Safari is er geen probleem (omgedraaide wereld???).
In FF2 verdwijnt de swf volledig (dit is een bekende bug en komt door de wmode) en in FF3 begint de header te knipperen zodra je met je muis over een van de menu-gifjes gaat.
Zie: test

Ik heb werkelijk ALLES geprobeerd, o.a. de transparant balk vervangen voor een repeating png background-image met IE fix (maar dan werkt het menu weer niet in IE), de transparante balk in de swf zetten, maar dat maakt geen verschil.

Wat ik nu wil doen is het volgende;
Ik wil d.m.v. javascript detecteren wanneer een bezoeker Firefox 2 of 3 op een Mac gebruikt en vervolgens de swf vervangen voor een gif animatie (of als dat ook niet lukt voor een plaatje). Dit lijkt mij voor nu de beste oplossing.

Ik ben echter geen java expert dus hetgene wat ik nu heb, werkt nog niet. Dat wil zeggen in geen enkele browser laat hij nu de swf zien. Ook weet ik niet precies hoe je java moet gebruiken om een gif'je te 'write'en' in een div.

Dit is mijn broncode tot zover:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title></title>
	<meta http-equiv="Content-Type" content="text/xhtml+xml; charset=iso-8859-1" />
	
	<link href="css/style.css" rel="stylesheet" type="text/css" />
		
	<script type="text/javascript" src="script/swfobject.js"></script>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/menu.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			prepareMenu();
		});
	</script>
		
	<script language="JavaScript" type="text/javascript">
oldpressed="";
newpressed="";
if (document.images) {

  image1on = new Image();
  image1on.src = "gfx/en_over.gif";
  image2on = new Image();
  image2on.src = "gfx/fr_over.gif";  
  image3on = new Image();
  image3on.src = "gfx/collections_over.gif";
  image4on = new Image();
  image4on.src = "gfx/stores_over.gif";
  image5on = new Image();
  image5on.src = "gfx/brand_over.gif";
  image6on = new Image();
  image6on.src = "gfx/continue_over.jpg";
  image7on = new Image();
  image7on.src = "gfx/view_fabrics_over.jpg";
  
  image8on = new Image();
  image8on.src = "gfx/boutiques_over.gif";
  image9on = new Image();
  image9on.src = "gfx/la_marque_over.gif";
  image10on = new Image();
  image10on.src = "gfx/continuer_over.jpg";
  image11on = new Image();
  image11on.src = "gfx/voir_les_tissus_over.jpg";
  
  
  image1off = new Image();
  image1off.src = "gfx/en_up.gif";
  image2off = new Image();
  image2off.src = "gfx/fr_up.gif";  
  image3off = new Image();
  image3off.src = "gfx/collections_up.gif";
  image4off = new Image();
  image4off.src = "gfx/stores_up.gif";
  image5off = new Image();
  image5off.src = "gfx/brand_up.gif";
  image6off = new Image();
  image6off.src = "gfx/continue_up.jpg";
  image7off = new Image();
  image7off.src = "gfx/view_fabrics_up.jpg";
  
  image8off = new Image();
  image8off.src = "gfx/boutiques_up.gif";
  image9off = new Image();
  image9off.src = "gfx/la_marque_up.gif";
  image10off = new Image();
  image10off.src = "gfx/continuer_up.jpg";
  image11off = new Image();
  image11off.src = "gfx/voir_les_tissus_up.jpg";
  
}
function turnOn(imageName) {
  if (document.images) {
    document[imageName].src = eval(imageName + "on.src");
  }
}
function turnOff(imageName) {
  if ((document.images)&& (newpressed != imageName)){
    document[imageName].src = eval(imageName + "off.src");
  }
}
function imageClicked(imagename){
newpressed=imagename;
	if (document.images){
		if (oldpressed!="") document[oldpressed].src= eval(oldpressed +  "off.src");
		document[imagename].src= eval(imagename +  "on.src");
		oldpressed=imagename;
	}
}     
</script>
	
</head>

<body>

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td valign="middle" cellspacing="0" cellpadding="0" border="0">

<div id="content-width" style="position:relative;">

<div id="box">

	<div id="header" style="position:absolute; filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75;">
			<div id="flashcontent">
		<img src="gfx/logo.jpg" alt="Logo" width="150" height="150" border="0" />
	</div>
	
	<div id="menu">
				<div class="menusection">
			<h2 id="header-collections"><a href="collections.php" onClick="imageClicked('image3')" onMouseOut="turnOff('image3')" onMouseOver="turnOn('image3')"><img src="gfx/collections_up.gif" width="120" height="22" border="0" alt="collections" name="image3"/></a></h2>
			<ul>
				<li><a href="fashion.php">FASHION</a></li>
				<li><a href="fabrics.php">FABRICS</a></li>
				<li><a href="accesories.php">ACCESSORIES</a></li>

			</ul>
		</div>
		<div class="menusection">
			<h2 id="header-stores"><a href="stores.php" onClick="imageClicked('image4')" onMouseOut="turnOff('image4')" onMouseOver="turnOn('image4')"><img src="gfx/stores_up.gif" width="138" height="22" border="0" alt="stores" name="image4"/></a></h2>
			<ul>
				<li><a href="store_locator.php">STORE LOCATOR</a></li>
			</ul>
		</div>

		<div class="menusection">
			<h2 id="header-brand"><a href="brand.php" onClick="imageClicked('image5')" onMouseOut="turnOff('image5')" onMouseOver="turnOn('image5')"><img src="gfx/brand_up.gif" width="138" height="22" border="0" alt="brand" name="image5"/></a></h2>
			<ul>
				<li><a href="genuine_w.php">GENUINE W</a></li>
				<li><a href="careers.php">CAREERS</a></li>
				<li><a href="customer_service.php">CUSTOMER SERVICE</a></li>
				<li><a href="faq.php">FAQ</a></li>

				<li><a href="contact_us.php">CONTACT US</a></li>
			</ul>
		</div>
	</div>
	
	<div id="langmenu">
	
		<a href="?lang=en" onClick="imageClicked('image1')" onMouseOut="turnOff('image1')" onMouseOver="turnOn('image1')">
			<img src="gfx/en_up.gif" width="24" height="22" border="0" alt="English" name="image1" />
		</a>
	
		<img src="gfx/spacer.gif" width="8" height="22" border="0" alt="" />
		
		<a href="?lang=fr" onClick="imageClicked('image2')" onMouseOut="turnOff('image2')" onMouseOver="turnOn('image2')">
			<img src="gfx/fr_up.gif" width="24" height="22" border="0" alt="French" name="image2" />
		</a>		
	</div>

	</div>
		<div id="middle" style="position:absolute;"></div>
		
			<script type="text/javascript">
	
			function detectMacXFF2() {
				var userAgent = navigator.userAgent.toLowerCase();
				if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
					middle.write("swf/welcome.gif");
				} else
					var so = new SWFObject("swf/welcome.swf", "Flash", "960", "580", "6", "transparant");
					so.addParam("scale", "noscale");
					so.addParam("allowScriptAccess", "SameDomain");	
					so.addParam("quality", "high");
					so.addParam("wmode","transparent");
					so.write("middle");		
			</script>
</div>
	
	<div id="footer" style="position:absolute; top:580px;">
		&copy; 2008 &nbsp;	</div>
	
</div>
</td>
</tr>
</table>
</body>
</html>

Kan iemand me hierbij helpen?
Je zou me er enorm mee helpen!

Alvast bedankt!

Swf vervangen voor gif in Firefox voor Mac?

Twansparant

Nieuwe gebruiker

Nieuwste berichten

Wij waarderen jouw privacy