-
Switchable Flash Player
I am trying to design a product web site where you can click on a class of a product and a flash slideshow will start to show you that product, if you click a different class a new slideshow will appear showing you that product line.
I am trying to make the switch using javascript, everything is working perfectly until you click for a new product category than it just does nothing. Please take a look and see if you can help me.
Here is my code, if you need me to be more specific as to my goal please ask.
Code:
<script type="text/javascript">
<!--
function ac() {
document.featureItem.document.open();
document.featureItem.document.write('<object width="940" height="310"><param name="movie" value="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_ac.swf"><embed src="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_ac.swf" width="940" height="310"></embed></object>');
document.featureItem.document.close();
}
function boilers() {
document.featureItem.document.open();
document.featureItem.document.write('<object width="940" height="310"><param name="movie" value="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_ac.swf"><embed src="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_ac.swf" width="940" height="310"></embed></object>');
document.featureItem.document.close();
}
function furnaces() {
document.getElementById(featureItem).innerHTML = '<object width="940" height="310"><param name="movie" value="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_boilers.swf"><embed src="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_boilers.swf" width="940" height="310"></embed></object>';
}
function humidifiers() {
document.getElementById(featureItem).innerHTML = '<object width="940" height="310"><param name="movie" value="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_humidifiers.swf"><embed src="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_humidifiers.swf" width="940" height="310"></embed></object>';
}
function thermostats() {
document.getElementById(featureItem).innerHTML = '<object width="940" height="310"><param name="movie" value="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_thermostats.swf"><embed src="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_thermostats.swf" width="940" height="310"></embed></object>';
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body class="navigationTopFlyout subNavigationTop" id="secPage" onload="MM_preloadImages('Websites/gorillaheating/Images/acunitsON.jpg','Websites/gorillaheating/Images/boilersON.jpg','Websites/gorillaheating/Images/furnacesON.jpg','Websites/gorillaheating/Images/humidifiersON.jpg','Websites/gorillaheating/Images/thermostatsON.jpg')">
<div id="body" class="oneColumn">
<ul id="skipTo">
<li><a href="#navigation" title="Skip to Navigation" accesskey="n" tabindex="1">Skip to Navigation</a></li>
<li><a href="#content" title="Skip to Content" accesskey="c" tabindex="2">Skip to Content</a></li>
</ul>
<div id="pageContainer">
<div id="header">
<ul class="headerNav">
<li><a href="/" title="Home">Home</a></li>
<li><a href="/login" title="Login">Login</a></li>
<li><a href="/sitemap" title="Sitemap">Sitemap</a></li>
</ul>
<h1 id="logo"><$logo href="/" maxwidth="600" maxheight="48" alt=""$><a href="/"><$websitename/$></a><$/logo$></h1>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><$pagetitle/$></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" media="all" type="text/css" />
<!--[if IE]>
<link href="style-ie.css" rel="stylesheet" media="all" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<script src="js/dropdown-menu.js" type="text/javascript"></script>
<script src="js/ie6-to-ie7.js" type="text/javascript"></script>
<![endif]-->
<link href="style-print.css" rel="stylesheet" media="print" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body id="homePage" class="navigationTopFlyout">
<div id="body" class="threeColumn">
<ul id="skipTo">
<li><a href="#navigation" title="Skip to Navigation" accesskey="n" tabindex="1">Skip to Navigation</a></li>
<li><a href="#content" title="Skip to Content" accesskey="c" tabindex="2">Skip to Content</a></li>
</ul>
<div id="pageContainer">
<div id="header">
<ul class="headerNav">
<li><a href="/" title="Home">Home</a></li>
<li><a href="/login" title="Login">Login</a></li>
<li><a href="/sitemap" title="Sitemap">Sitemap</a></li>
</ul>
<h1 id="logo"><$logo href="/" maxwidth="600" maxheight="100" alt=""$><a href="/"><$websitename/$></a><$/logo$></h1>
</div>
<div id="navigation">
<$globalmenu cssClass="mainNav" showLevels="1,2,3" alwaysShowChildren="true" showHome="true"/$>
<br class="clear" />
</div>
<div id="contentContainer">
<div id="featuredItem" class="featuredFull">
<object width="940" height="310">
<param name="movie" value="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_ac.swf">
<embed src="http://gorillaheating.publishpath.com/websites/gorillaheating/templates/gorilla/rotator_ac.swf" width="940" height="310">
</embed>
</object>
</div>
<div style="width: 100%; height: 5px; background-color: #1d236c; margin-top: -30px;">
</div>
<div id="mainColumn" class="contents">
<a href="javascript:ac()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','Websites/gorillaheating/Images/acunitsON.jpg',1)"><img src="Websites/gorillaheating/Images/acunitsOFF.jpg" width="132" height="132" border="0" id="Image1" /></a>
<a href="javascript:boilers()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Websites/gorillaheating/Images/boilersON.jpg',1)"><img src="Websites/gorillaheating/Images/boilersOFF.jpg" width="132" height="132" border="0" id="Image2" /></a>
<a href="javascript:furnaces()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','Websites/gorillaheating/Images/furnacesON.jpg',1)"><img src="Websites/gorillaheating/Images/furnacesOFF.jpg" width="132" height="132" border="0" id="Image3" /></a>
<a href="javascript:humidifiers()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','Websites/gorillaheating/Images/humidifiersON.jpg',1)"><img src="Websites/gorillaheating/Images/humidifiersOFF.jpg" width="132" height="132" border="0" id="Image4" /></a>
<a href="javascript:thermostats()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','Websites/gorillaheating/Images/thermostatsON.jpg',1)"><img src="Websites/gorillaheating/Images/thermostatsOFF.jpg" width="132" height="132" border="0" id="Image5" /></a></div>
<div id="extraColumn" class="contents">
<$region name="ExtraColumn"$><$/region$>
</div>
-
Well if I can offer you a few tips first, having two <body> isn't valid code, and could cause you some headaches down the road. You should also have your <! DOCTYPE > and <head> tag as the first elements in the page.
It looks like you're attempting two different ways of writing it into the page. I'd suggest you go with your second version, which is pretty close to correct:
Code:
document.getElementById("featureItem").innerHTML = '...your flash code here...';
Note the added quotes around "featuredItem".
-
Your right I do have two versions listed in the code and that is because neither is working correctly
-
Yep, and I'm suggesting that if you add quotes it should work, though now I see it should also be "featuredItem" instead of "featureItem":
Code:
document.getElementById("featuredItem").innerHTML = '...your flash code here...';
