• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 182
  • Last Modified:

Need to have images looping What would be the best way to accomplish this

Need this to be in 3 columns with marquee at the bottom.
Need to have images looping as well as able to change them regularly and easily.
Need this created ASAP!!!....
HELP!!!
Always appreciative....
Need this accomplished as very Time Sensitive!!!
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
@import url("css/common.css");
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
ul#cssmw_home {
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul li {
  background-image: none;
  float: none;
}
ul#cssmw_home li {
  background-image: none;
  float: left;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
}
ul#cssmw_home li ul {
  display: none;
  top: 0;
}
ul#cssmw_home li:hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.current > ul {
  position: absolute;
}
ul#cssmw_home > li {
  background-image: none;
}
ul#cssmw_home > li > span {
  background-image: none;
  background-position: top;
  display: block;
}
ul#cssmw_home > li > span > a {
  background-image: none;
  background-position: top top;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  margin: 5px 0 0 0;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  width: 110px;
}
ul#cssmw_home > li:hover > span {
  display: block;
}

ul#cssmw_home > li.hover > span {
  display: block;
}

ul#cssmw_home > li.current > span.current {
  display: block;
}
ul#cssmw_home > li:hover > span > a {
	background-color: #F3F5ED;
	color: #060;
}

ul#cssmw_home > li.hover > span > a {
  background-color: #060;
}

ul#cssmw_home > li.current > span.current > a.current {
  background-color: #060;
}
ul#cssmw_home ul.level-1 {
  left: 0px;
  padding-top: 7px;
  top: 100%;
  position:absolute;z-index:1000; 
}
ul#cssmw_home ul.level-1 > li {
  background-image: none;
}
ul#cssmw_home ul.level-1 > li > a {
  background-color: #060;
  background-image: none;
  border-bottom-width: 0px;
  border-left-color: #E3E3E4;
  border-right-width: 0px;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 15px;
  text-align: left;
  text-decoration: none;
  width: 145px;
}
ul#cssmw_home ul.level-1 > li > a:active {
  background-color: #E3E3E4;
  border-bottom: dotted 1px #5456EF;
  border-right: solid 1px #E3E3E4;
  color: #2D2B2E;
  font-weight: bold;
  text-decoration: none;
}
ul#cssmw_home ul.level-1 > li:hover > a {
	background-color: #F3F5ED;
	border-right-color: #E3E3E4;
	color: #060;
	font-weight: normal;
	text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.hover > a {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.current > a.current {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;

{
	font-style: italic;
	color: #c33;
	border: none;
}

tareaHintState textarea
{
	/*color: red !important;*/
}

.fact {
	font-size: 1.25em;
	color: #900;
}
.secondContent {
	color: #060;
	text-decoration: none;
}
.footer {
}
#outerWrapper #contentWrapper #content #contentlinks {
	list-style: none;
	color: #060;
	text-decoration: none;
}
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
#outerWrapper #navWrapper {
	padding-bottom:0px;
	z-index:999;
}
<!-- TemplateEndEditable -->
</style>
<style type="text/css" media="all">
<!--
@import url("css/home.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("css/home_print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #rightColumn1 {
  width: 345px;
}
</style>
<![endif]-->
<!--[if IE]>
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all"> 
@import url("css/ie6.css");
</style>
<![endif]-->
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw_home/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw_home/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw_home/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("css/spry_custom.css");
-->
</style>
<style type="text/css" media="all">
<!--
@import url("css/mystyles.css");
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
-->
</style>
<script type="text/javascript">
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];}
}
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;
}
</script>
</head><body onload="MM_preloadImages('/~ps4/imagesupload/1/03100014_62c.jpg','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png')">
  <div id="featuredWrapper">
    <div class="box">
      <h2 id="firstPod">need to have these 3 columns lined up side by each</h2>
      <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p><img src="/~ps4/imagesupload/graphics/LB_01.jpg" alt="24 Hour Sale" name="hoursale" width="250" height="250" id="Image1" /></a></p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
        	<h3>&nbsp;</h3>
        	<h3>&nbsp;</h3>
          <p>&nbsp;</p>
          <p><br />
            <br />
          </p>
</div>
      </div>
    </div>
    <div class="box">
    	<h2 id="middlePod">&nbsp;</h2>
     <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p>promotional blurb</p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
       	  <h3>&nbsp;</h3>
<p><br />
<p><br />
          </p>
        </div>
      </div>
    </div>
    <div class="box">
    	<h2 id="lastPod">need to have up to 6 pictures rotating</h2>
      <div class="productWrapper">
      	<div class="image" style="width: 148px; padding: 7px;">
      	  <p><span class="image" style="width: 148px;"></a></span><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/03100014_62c.jpg',1)"><img src="/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png" name="image1" width="62" height="62" border="0" id="image1" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png',1)" onmouseout="MM_swapImgRestore()" /></a></p>
      	</div>
      	<div class="price">
        	 <marquee border="1" scrollamount="4"><h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; accessories!!!<br />
       	  </h3></marquee>
</div>
      </div>
    </div>
  </div>
</body>
</html>

Open in new window

0
glozinski
Asked:
glozinski
  • 9
  • 7
1 Solution
 
EMB01Commented:
You need to add float to the "box" class.

.box {

  float:left;
  width: 200px;
  overflow: auto;

}

Simple javascript will help you with rotating your images.  Try this:
<html>
  <head>
  <title>Image Rotate
  </head>
  
  <body>
  <img src="" name="Rotating" id="Rotating1" width=100 height=100>
  <img src="" name="Rotating" id="Rotating2" width=100 height=100>
  
  
  <script language="JavaScript">
  var ImageArr1 = new Array("Picture(3).jpg","Picture(1).jpg","Picture(2).jpg");
  var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  </script>
  
  </body>
  </html>

Open in new window

Ref.  http://www.go4expert.com/forums/showthread.php?t=1012
0
 
glozinskiAuthor Commented:
sorry but where do I place this code so that all the boxes are lined up side by side on one page
.box {

  float:left;
  width: 200px;
  overflow: auto;

}
and
then where would I place the javascript code for the images as I would also like this to be on the same page as the boxes as I have tried a couple of placements and that did not work.
Thank you
0
 
EMB01Commented:
try this please
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
@import url("css/common.css");
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
ul#cssmw_home {
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul li {
  background-image: none;
  float: none;
}
ul#cssmw_home li {
  background-image: none;
  float: left;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
}
ul#cssmw_home li ul {
  display: none;
  top: 0;
}
ul#cssmw_home li:hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.current > ul {
  position: absolute;
}
ul#cssmw_home > li {
  background-image: none;
}
ul#cssmw_home > li > span {
  background-image: none;
  background-position: top;
  display: block;
}
ul#cssmw_home > li > span > a {
  background-image: none;
  background-position: top top;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  margin: 5px 0 0 0;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  width: 110px;
}
ul#cssmw_home > li:hover > span {
  display: block;
}

ul#cssmw_home > li.hover > span {
  display: block;
}

ul#cssmw_home > li.current > span.current {
  display: block;
}
ul#cssmw_home > li:hover > span > a {
	background-color: #F3F5ED;
	color: #060;
}

ul#cssmw_home > li.hover > span > a {
  background-color: #060;
}

ul#cssmw_home > li.current > span.current > a.current {
  background-color: #060;
}
ul#cssmw_home ul.level-1 {
  left: 0px;
  padding-top: 7px;
  top: 100%;
  position:absolute;z-index:1000; 
}
ul#cssmw_home ul.level-1 > li {
  background-image: none;
}
ul#cssmw_home ul.level-1 > li > a {
  background-color: #060;
  background-image: none;
  border-bottom-width: 0px;
  border-left-color: #E3E3E4;
  border-right-width: 0px;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 15px;
  text-align: left;
  text-decoration: none;
  width: 145px;
}
ul#cssmw_home ul.level-1 > li > a:active {
  background-color: #E3E3E4;
  border-bottom: dotted 1px #5456EF;
  border-right: solid 1px #E3E3E4;
  color: #2D2B2E;
  font-weight: bold;
  text-decoration: none;
}
ul#cssmw_home ul.level-1 > li:hover > a {
	background-color: #F3F5ED;
	border-right-color: #E3E3E4;
	color: #060;
	font-weight: normal;
	text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.hover > a {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.current > a.current {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;

{
	font-style: italic;
	color: #c33;
	border: none;
}

tareaHintState textarea
{
	/*color: red !important;*/
}

.fact {
	font-size: 1.25em;
	color: #900;
}
.secondContent {
	color: #060;
	text-decoration: none;
}
.footer {
}
#outerWrapper #contentWrapper #content #contentlinks {
	list-style: none;
	color: #060;
	text-decoration: none;
}
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
#outerWrapper #navWrapper {
	padding-bottom:0px;
	z-index:999;
}
<!-- TemplateEndEditable -->
</style>
<style type="text/css" media="all">
<!--
@import url("css/home.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("css/home_print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #rightColumn1 {
  width: 345px;
}
</style>
<![endif]-->
<!--[if IE]>
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all"> 
@import url("css/ie6.css");
</style>
<![endif]-->
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw_home/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw_home/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw_home/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("css/spry_custom.css");
-->
</style>
<style type="text/css" media="all">
<!--
@import url("css/mystyles.css");
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
-->
</style>
<script type="text/javascript">
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];}
}
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;
}
</script>
</head><body onload="MM_preloadImages('/~ps4/imagesupload/1/03100014_62c.jpg','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png')">
  <div id="featuredWrapper">
    <div class="box">
      <h2 id="firstPod">need to have these 3 columns lined up side by each</h2>
      <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
	<img src="" name="Rotating" id="Rotating1" width=100 height=100>
      	  <p><img src="/~ps4/imagesupload/graphics/LB_01.jpg" alt="24 Hour Sale" name="hoursale" width="250" height="250" id="Image1" /></a></p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
        	<h3>&nbsp;</h3>
        	<h3>&nbsp;</h3>
          <p>&nbsp;</p>
          <p><br />
            <br />
          </p>
</div>
      </div>
    </div>
    <div class="box">
    	<h2 id="middlePod">&nbsp;</h2>
     <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p>promotional blurb</p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
       	  <h3>&nbsp;</h3>
<p><br />
<p><br />
          </p>
        </div>
      </div>
    </div>
    <div class="box">
    	<h2 id="lastPod">need to have up to 6 pictures rotating</h2>
      <div class="productWrapper">
      	<div class="image" style="width: 148px; padding: 7px;">
      	  <p><span class="image" style="width: 148px;"></a></span><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/03100014_62c.jpg',1)"><img src="/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png" name="image1" width="62" height="62" border="0" id="image1" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png',1)" onmouseout="MM_swapImgRestore()" /></a></p>
      	</div>
      	<div class="price">
        	 <marquee border="1" scrollamount="4"><h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; accessories!!!<br />
       	  </h3></marquee>
</div>
      </div>
    </div>
  </div>
<script language="JavaScript">
  var ImageArr1 = new Array("/~ps4/imagesupload/1/03100014_62c.jpg","/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png","/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png");
  var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  </script>
</body>
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
EMB01Commented:
sorry, forgot to add style:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
@import url("css/common.css");
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
ul#cssmw_home {
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul li {
  background-image: none;
  float: none;
}
ul#cssmw_home li {
  background-image: none;
  float: left;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
}
ul#cssmw_home li ul {
  display: none;
  top: 0;
}
ul#cssmw_home li:hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.current > ul {
  position: absolute;
}
ul#cssmw_home > li {
  background-image: none;
}
ul#cssmw_home > li > span {
  background-image: none;
  background-position: top;
  display: block;
}
ul#cssmw_home > li > span > a {
  background-image: none;
  background-position: top top;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  margin: 5px 0 0 0;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  width: 110px;
}
ul#cssmw_home > li:hover > span {
  display: block;
}

ul#cssmw_home > li.hover > span {
  display: block;
}

ul#cssmw_home > li.current > span.current {
  display: block;
}
ul#cssmw_home > li:hover > span > a {
	background-color: #F3F5ED;
	color: #060;
}

ul#cssmw_home > li.hover > span > a {
  background-color: #060;
}

ul#cssmw_home > li.current > span.current > a.current {
  background-color: #060;
}
ul#cssmw_home ul.level-1 {
  left: 0px;
  padding-top: 7px;
  top: 100%;
  position:absolute;z-index:1000; 
}
ul#cssmw_home ul.level-1 > li {
  background-image: none;
}
ul#cssmw_home ul.level-1 > li > a {
  background-color: #060;
  background-image: none;
  border-bottom-width: 0px;
  border-left-color: #E3E3E4;
  border-right-width: 0px;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 15px;
  text-align: left;
  text-decoration: none;
  width: 145px;
}
ul#cssmw_home ul.level-1 > li > a:active {
  background-color: #E3E3E4;
  border-bottom: dotted 1px #5456EF;
  border-right: solid 1px #E3E3E4;
  color: #2D2B2E;
  font-weight: bold;
  text-decoration: none;
}
ul#cssmw_home ul.level-1 > li:hover > a {
	background-color: #F3F5ED;
	border-right-color: #E3E3E4;
	color: #060;
	font-weight: normal;
	text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.hover > a {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.current > a.current {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;

{
	font-style: italic;
	color: #c33;
	border: none;
}

tareaHintState textarea
{
	/*color: red !important;*/
}

.fact {
	font-size: 1.25em;
	color: #900;
}
.secondContent {
	color: #060;
	text-decoration: none;
}
.footer {
}
#outerWrapper #contentWrapper #content #contentlinks {
	list-style: none;
	color: #060;
	text-decoration: none;
}
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
#outerWrapper #navWrapper {
	padding-bottom:0px;
	z-index:999;
}
<!-- TemplateEndEditable -->
</style>
<style type="text/css" media="all">
<!--
@import url("css/home.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("css/home_print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #rightColumn1 {
  width: 345px;
}
</style>
<![endif]-->
<!--[if IE]>
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all"> 
@import url("css/ie6.css");
</style>
<![endif]-->
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw_home/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw_home/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw_home/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("css/spry_custom.css");
-->
</style>
<style type="text/css" media="all">
<!--
@import url("css/mystyles.css");
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
-->
</style>
<script type="text/javascript">
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];}
}
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;
}
</script>
<style type="text/css">
.box {

  float:left;
  width: 200px;
  overflow: auto;

}
</style>
</head><body onload="MM_preloadImages('/~ps4/imagesupload/1/03100014_62c.jpg','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png')">
  <div id="featuredWrapper">
    <div class="box">
      <h2 id="firstPod">need to have these 3 columns lined up side by each</h2>
      <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
	<img src="" name="Rotating" id="Rotating1" width=100 height=100>
      	  <p><img src="/~ps4/imagesupload/graphics/LB_01.jpg" alt="24 Hour Sale" name="hoursale" width="250" height="250" id="Image1" /></a></p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
        	<h3>&nbsp;</h3>
        	<h3>&nbsp;</h3>
          <p>&nbsp;</p>
          <p><br />
            <br />
          </p>
</div>
      </div>
    </div>
    <div class="box">
    	<h2 id="middlePod">&nbsp;</h2>
     <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p>promotional blurb</p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
       	  <h3>&nbsp;</h3>
<p><br />
<p><br />
          </p>
        </div>
      </div>
    </div>
    <div class="box">
    	<h2 id="lastPod">need to have up to 6 pictures rotating</h2>
      <div class="productWrapper">
      	<div class="image" style="width: 148px; padding: 7px;">
      	  <p><span class="image" style="width: 148px;"></a></span><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/03100014_62c.jpg',1)"><img src="/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png" name="image1" width="62" height="62" border="0" id="image1" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png',1)" onmouseout="MM_swapImgRestore()" /></a></p>
      	</div>
      	<div class="price">
        	 <marquee border="1" scrollamount="4"><h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; accessories!!!<br />
       	  </h3></marquee>
</div>
      </div>
    </div>
  </div>
<script language="JavaScript">
  var ImageArr1 = new Array("/~ps4/imagesupload/1/03100014_62c.jpg","/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png","/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png");
  var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  </script>
</body>
</html>

Open in new window

0
 
glozinskiAuthor Commented:
This is the look I was going for
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
@import url("css/common.css");
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
ul#cssmw_home {
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul li {
  background-image: none;
  float: none;
}
ul#cssmw_home li {
  background-image: none;
  float: left;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
}
ul#cssmw_home li ul {
  display: none;
  top: 0;
}
ul#cssmw_home li:hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.current > ul {
  position: absolute;
}
ul#cssmw_home > li {
  background-image: none;
}
ul#cssmw_home > li > span {
  background-image: none;
  background-position: top;
  display: block;
}
ul#cssmw_home > li > span > a {
  background-image: none;
  background-position: top top;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  margin: 5px 0 0 0;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  width: 110px;
}
ul#cssmw_home > li:hover > span {
  display: block;
}

ul#cssmw_home > li.hover > span {
  display: block;
}

ul#cssmw_home > li.current > span.current {
  display: block;
}
ul#cssmw_home > li:hover > span > a {
	background-color: #F3F5ED;
	color: #060;
}

ul#cssmw_home > li.hover > span > a {
  background-color: #060;
}

ul#cssmw_home > li.current > span.current > a.current {
  background-color: #060;
}
ul#cssmw_home ul.level-1 {
  left: 0px;
  padding-top: 7px;
  top: 100%;
  position:absolute;z-index:1000; 
}
ul#cssmw_home ul.level-1 > li {
  background-image: none;
}
ul#cssmw_home ul.level-1 > li > a {
  background-color: #060;
  background-image: none;
  border-bottom-width: 0px;
  border-left-color: #E3E3E4;
  border-right-width: 0px;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 15px;
  text-align: left;
  text-decoration: none;
  width: 145px;
}
ul#cssmw_home ul.level-1 > li > a:active {
  background-color: #E3E3E4;
  border-bottom: dotted 1px #5456EF;
  border-right: solid 1px #E3E3E4;
  color: #2D2B2E;
  font-weight: bold;
  text-decoration: none;
}
ul#cssmw_home ul.level-1 > li:hover > a {
	background-color: #F3F5ED;
	border-right-color: #E3E3E4;
	color: #060;
	font-weight: normal;
	text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.hover > a {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.current > a.current {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;

{
	font-style: italic;
	color: #c33;
	border: none;
}

tareaHintState textarea
{
	/*color: red !important;*/
}

.fact {
	font-size: 1.25em;
	color: #900;
}
.secondContent {
	color: #060;
	text-decoration: none;
}
.footer {
}
#outerWrapper #contentWrapper #content #contentlinks {
	list-style: none;
	color: #060;
	text-decoration: none;
}
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
#outerWrapper #navWrapper {
	padding-bottom:0px;
	z-index:999;
}
<!-- TemplateEndEditable -->
</style>
<style type="text/css" media="all">
<!--
@import url("css/home.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("css/home_print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #rightColumn1 {
  width: 345px;
}
</style>
<![endif]-->
<!--[if IE]>
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all"> 
@import url("css/ie6.css");
</style>
<![endif]-->
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw_home/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw_home/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw_home/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("css/spry_custom.css");
-->
</style>
<style type="text/css" media="all">
<!--
@import url("css/mystyles.css");
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
-->
</style>
<script type="text/javascript">
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];}
}
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;
}
</script>
</head><body onload="MM_preloadImages('/~ps4/imagesupload/1/03100014_62c.jpg','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png')">
<table width="839" border="0">
  <tr>
    <td width="250"><div class="box">
   	<h2 id="firstPod"><img src="/~ps4/imagesupload/graphics/LB_01.jpg" alt="24 Hour Sale" name="hoursale" width="250" height="250" id="Image1" /></h2></td>
    <td width="226"><div class="box">
    	<h2 id="middlePod"> </h2>
    <div class="productWrapper">Promotional Blurb Here</td>
    <td width="349"><div class="box">
    	<h2 id="lastPod">need to have up to 6 pictures rotating</h2>
      <div class="productWrapper">
      	<div class="image" style="width: 148px; padding: 7px;">
      	  <p><span class="image" style="width: 148px;"></a></span><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/03100014_62c.jpg',1)"><img src="/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png" name="image1" width="62" height="62" border="0" id="image1" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png',1)" onmouseout="MM_swapImgRestore()" /></a></p>
      	</div>
      	<div class="price">
        	 <marquee border="1" scrollamount="4"><h3>&nbsp;</h3></marquee>
</div>
      </div>
    </div></td>
  </tr>
  <tr>
    <td colspan="3"> <marquee border="1" scrollamount="4">
    <h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; Accessories!!!
    </h3></marquee></td>
   </tr>
</table>
<script language="JavaScript">
  var ImageArr1 = new Array("/~ps4/imagesupload/1/03100014_62c.jpg","/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png","/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png");
  var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  </script>
</body>
</html>

Open in new window

0
 
EMB01Commented:
That's the same as what I gave you, except you need to make the columns bigger, to do that, just do this:
.box {

  float:left;
  width: 200px;
  overflow: auto;

}

Open in new window

Were do able to get the javascript to work or do you need help.  If so, please let me know what images you want per column (rotation) ie:

rotation one:
/my-path/my-image21.jpg
/my-path/my-image331.jpg
/my-path/my-image321.jpg

rotation two:
/my-path/my-image261.jpg
/my-path/my-image23331.jpg
etc...
0
 
EMB01Commented:
Note:  You would just need to adjust the column size (width):
.box {

  float:left;
  width: 300px;
  overflow: auto;

}

Open in new window

or
.box {

  float:left;
  width: 35000px;
  overflow: auto;

}

Open in new window

0
 
glozinskiAuthor Commented:
3rd column is where I need images rotating. THANK YOU!!!
0
 
EMB01Commented:
Okay, you gotta give me the filenames of the images you want to rotate in the format that I asked (preferably):

rotation one:
/my-path/my-image21.jpg
/my-path/my-image331.jpg
/my-path/my-image321.jpg

rotation two:
/my-path/my-image261.jpg
/my-path/my-image23331.jpg
etc...
0
 
glozinskiAuthor Commented:
here are the images that I would like to rotate in column 3
/~ps4/imagesuploaded/MultiGrass_Metal.jpg
/~ps4/imagesuploaded/Orchid Two Tone.jpg
/~ps4/imagesuploaded/orchid_burgundy.jpg
/~ps4/imagesuploaded/Easter Lily Cemetary Cross_FZX614.jpg
/~ps4/imagesuploaded/Rose Memorial Wreath_FR151~RE.jpg
/~ps4/imagesuploaded/Sunflower Spray w Bud ~36_GTS605_Yellow.png
/~ps4/imagesuploaded/Sunflower Spray~40 FR1158_Gold.jpg
I would change this weekly...using this template
I should be able to change images manually, yes...  SUPER!!!!
Thank you
0
 
EMB01Commented:
Tell me if this works for you.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
@import url("css/common.css");
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
ul#cssmw_home {
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul li {
  background-image: none;
  float: none;
}
ul#cssmw_home li {
  background-image: none;
  float: left;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
}
ul#cssmw_home li ul {
  display: none;
  top: 0;
}
ul#cssmw_home li:hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.current > ul {
  position: absolute;
}
ul#cssmw_home > li {
  background-image: none;
}
ul#cssmw_home > li > span {
  background-image: none;
  background-position: top;
  display: block;
}
ul#cssmw_home > li > span > a {
  background-image: none;
  background-position: top top;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  margin: 5px 0 0 0;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  width: 110px;
}
ul#cssmw_home > li:hover > span {
  display: block;
}

ul#cssmw_home > li.hover > span {
  display: block;
}

ul#cssmw_home > li.current > span.current {
  display: block;
}
ul#cssmw_home > li:hover > span > a {
	background-color: #F3F5ED;
	color: #060;
}

ul#cssmw_home > li.hover > span > a {
  background-color: #060;
}

ul#cssmw_home > li.current > span.current > a.current {
  background-color: #060;
}
ul#cssmw_home ul.level-1 {
  left: 0px;
  padding-top: 7px;
  top: 100%;
  position:absolute;z-index:1000; 
}
ul#cssmw_home ul.level-1 > li {
  background-image: none;
}
ul#cssmw_home ul.level-1 > li > a {
  background-color: #060;
  background-image: none;
  border-bottom-width: 0px;
  border-left-color: #E3E3E4;
  border-right-width: 0px;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 15px;
  text-align: left;
  text-decoration: none;
  width: 145px;
}
ul#cssmw_home ul.level-1 > li > a:active {
  background-color: #E3E3E4;
  border-bottom: dotted 1px #5456EF;
  border-right: solid 1px #E3E3E4;
  color: #2D2B2E;
  font-weight: bold;
  text-decoration: none;
}
ul#cssmw_home ul.level-1 > li:hover > a {
	background-color: #F3F5ED;
	border-right-color: #E3E3E4;
	color: #060;
	font-weight: normal;
	text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.hover > a {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.current > a.current {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;

{
	font-style: italic;
	color: #c33;
	border: none;
}

tareaHintState textarea
{
	/*color: red !important;*/
}

.fact {
	font-size: 1.25em;
	color: #900;
}
.secondContent {
	color: #060;
	text-decoration: none;
}
.footer {
}
#outerWrapper #contentWrapper #content #contentlinks {
	list-style: none;
	color: #060;
	text-decoration: none;
}
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
#outerWrapper #navWrapper {
	padding-bottom:0px;
	z-index:999;
}
<!-- TemplateEndEditable -->
</style>
<style type="text/css" media="all">
<!--
@import url("css/home.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("css/home_print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #rightColumn1 {
  width: 345px;
}
</style>
<![endif]-->
<!--[if IE]>
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all"> 
@import url("css/ie6.css");
</style>
<![endif]-->
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw_home/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw_home/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw_home/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("css/spry_custom.css");
-->
</style>
<style type="text/css" media="all">
<!--
@import url("css/mystyles.css");
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
-->
</style>
<style type="text/css">
.box {

  float:left;
  width: 350px;
  overflow: auto;

}
</style>
<script type="text/javascript">
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];}
}
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;
}
</script>
</head><body onload="MM_preloadImages('/~ps4/imagesupload/1/03100014_62c.jpg','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png')">
  <div id="featuredWrapper">
    <div class="box">
      <h2 id="firstPod">need to have these 3 columns lined up side by each</h2>
      <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p><img src="/~ps4/imagesupload/graphics/LB_01.jpg" alt="24 Hour Sale" name="hoursale" width="250" height="250" id="Image1" /></a></p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
        	<h3>&nbsp;</h3>
        	<h3>&nbsp;</h3>
          <p>&nbsp;</p>
          <p><br />
            <br />
          </p>
</div>
      </div>
    </div>
    <div class="box">
    	<h2 id="middlePod">&nbsp;</h2>
     <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p>promotional blurb</p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
       	  <h3>&nbsp;</h3>
<p><br />
<p><br />
          </p>
        </div>
      </div>
    </div>
    <div class="box">
    	<h2 id="lastPod">need to have up to 6 pictures rotating</h2>
      <div class="productWrapper">
      	<div class="image" style="width: 148px; padding: 7px;">
		  <img src="" name="Rotating" id="Rotating1" width=100 height=100>
      	  <p><span class="image" style="width: 148px;"></a></span><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/03100014_62c.jpg',1)"><img src="/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png" name="image1" width="62" height="62" border="0" id="image1" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png',1)" onmouseout="MM_swapImgRestore()" /></a></p>
      	</div>
      	<div class="price">
        	 <marquee border="1" scrollamount="4"><h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; accessories!!!<br />
       	  </h3></marquee>
</div>
      </div>
    </div>
  </div>
<script language="JavaScript">
  var ImageArr1 = new Array(
	"/~ps4/imagesuploaded/MultiGrass_Metal.jpg",
	"/~ps4/imagesuploaded/Orchid Two Tone.jpg",
	"/~ps4/imagesuploaded/orchid_burgundy.jpg",
	"/~ps4/imagesuploaded/Easter Lily Cemetary Cross_FZX614.jpg",
	"/~ps4/imagesuploaded/Rose Memorial Wreath_FR151~RE.jpg",
	"/~ps4/imagesuploaded/Sunflower Spray w Bud ~36_GTS605_Yellow.png",
	"/~ps4/imagesuploaded/Sunflower Spray~40 FR1158_Gold.jpg"
	);

  var ImageHolder1 = document.getElementById('Rotating1');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  
  </script>
</body>
</html>

Open in new window

0
 
glozinskiAuthor Commented:
sorry but I cannot get the pictures to view should I at least see something.jpg....
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
@import url("css/common.css");
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
ul#cssmw_home {
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul li {
  background-image: none;
  float: none;
}
ul#cssmw_home li {
  background-image: none;
  float: left;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
}
ul#cssmw_home li ul {
  display: none;
  top: 0;
}
ul#cssmw_home li:hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.current > ul {
  position: absolute;
}
ul#cssmw_home > li {
  background-image: none;
}
ul#cssmw_home > li > span {
  background-image: none;
  background-position: top;
  display: block;
}
ul#cssmw_home > li > span > a {
  background-image: none;
  background-position: top top;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  margin: 5px 0 0 0;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  width: 110px;
}
ul#cssmw_home > li:hover > span {
  display: block;
}

ul#cssmw_home > li.hover > span {
  display: block;
}

ul#cssmw_home > li.current > span.current {
  display: block;
}
ul#cssmw_home > li:hover > span > a {
	background-color: #F3F5ED;
	color: #060;
}

ul#cssmw_home > li.hover > span > a {
  background-color: #060;
}

ul#cssmw_home > li.current > span.current > a.current {
  background-color: #060;
}
ul#cssmw_home ul.level-1 {
  left: 0px;
  padding-top: 7px;
  top: 100%;
  position:absolute;z-index:1000; 
}
ul#cssmw_home ul.level-1 > li {
  background-image: none;
}
ul#cssmw_home ul.level-1 > li > a {
  background-color: #060;
  background-image: none;
  border-bottom-width: 0px;
  border-left-color: #E3E3E4;
  border-right-width: 0px;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 15px;
  text-align: left;
  text-decoration: none;
  width: 145px;
}
ul#cssmw_home ul.level-1 > li > a:active {
  background-color: #E3E3E4;
  border-bottom: dotted 1px #5456EF;
  border-right: solid 1px #E3E3E4;
  color: #2D2B2E;
  font-weight: bold;
  text-decoration: none;
}
ul#cssmw_home ul.level-1 > li:hover > a {
	background-color: #F3F5ED;
	border-right-color: #E3E3E4;
	color: #060;
	font-weight: normal;
	text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.hover > a {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.current > a.current {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;

{
	font-style: italic;
	color: #c33;
	border: none;
}

tareaHintState textarea
{
	/*color: red !important;*/
}

.fact {
	font-size: 1.25em;
	color: #900;
}
.secondContent {
	color: #060;
	text-decoration: none;
}
.footer {
}
#outerWrapper #contentWrapper #content #contentlinks {
	list-style: none;
	color: #060;
	text-decoration: none;
}
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
#outerWrapper #navWrapper {
	padding-bottom:0px;
	z-index:999;
}
<!-- TemplateEndEditable -->
</style>
<style type="text/css" media="all">
<!--
@import url("css/home.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("css/home_print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #rightColumn1 {
  width: 345px;
}
</style>
<![endif]-->
<!--[if IE]>
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all"> 
@import url("css/ie6.css");
</style>
<![endif]-->
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw_home/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw_home/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw_home/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("css/spry_custom.css");
-->
</style>
<style type="text/css" media="all">
<!--
@import url("css/mystyles.css");
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
-->
</style>
<script type="text/javascript">
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];}
}
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;
}
</script>
</head>
<body>
<table width="839" border="0">
  <tr>
    <td width="250"><div class="box".box {

  float:left;
  width: 250px;
  overflow: auto;

}>
   	<h2 id="firstPod"><img src="/~ps4/imagesupload/graphics/LB_01.jpg" alt="24 Hour Sale" name="hoursale" width="250" height="250" id="Image1" /></h2></td>
    <td width="250"><div class="box".box {

  float:left;
  width: 250px;
  overflow: auto;

}>
   	  <h2 id="middlePod"> </h2>
    	<p> 24 Hour Sale </p>
   	  <p>Starts: October 15th</p>
    	<p>8:00 am PST and will end </p>
    	<p>Ends: October 16th</p>
    	<p>8:00 am PST.</p></td>
    <td width="250"><div class="box".box {

  float:left;
  width: 250px;
  overflow: auto;

}>
    <h2 id="lastPod">&nbsp;</h2>
    <div class="productWrapper">
      <div class="image" style="width: 148px; padding: 7px;">
      	  <p><span class="image" style="width: 148px;"><script language="JavaScript">
   var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  </script></p>
      	here is where pics should go</div>
      	<div class="price">
        	<h4>Items that are in the 24 Hour Sale...</h4>
        
</div>
    </div></td>
  </tr>
  <tr>
    <td colspan="3"> <marquee border="1" scrollamount="4">
    <h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; Accessories!!!
    </h3></marquee></td>
   </tr>
</table>
<script language="JavaScript">
  var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  </script>
</body>
</html>

Open in new window

0
 
EMB01Commented:
It doesn't seem like you're using the code I posted.  Notice this part:

<script language="JavaScript">
  var ImageArr1 = new Array(
      "/~ps4/imagesuploaded/MultiGrass_Metal.jpg",
      "/~ps4/imagesuploaded/Orchid Two Tone.jpg",
      "/~ps4/imagesuploaded/orchid_burgundy.jpg",
      "/~ps4/imagesuploaded/Easter Lily Cemetary Cross_FZX614.jpg",
      "/~ps4/imagesuploaded/Rose Memorial Wreath_FR151~RE.jpg",
      "/~ps4/imagesuploaded/Sunflower Spray w Bud ~36_GTS605_Yellow.png",
      "/~ps4/imagesuploaded/Sunflower Spray~40 FR1158_Gold.jpg"
      );

  var ImageHolder1 = document.getElementById('Rotating1');
 
  function RotateImages(whichHolder,Start)
  {
        var a = eval("ImageArr"+whichHolder);
        var b = eval("ImageHolder"+whichHolder);
        if(Start>=a.length)
              Start=0;
        b.src = a[Start];
        window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
 
  RotateImages(1,0);
 
  </script>

Use this one please:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
@import url("css/common.css");
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
ul#cssmw_home {
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul li {
  background-image: none;
  float: none;
}
ul#cssmw_home li {
  background-image: none;
  float: left;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
}
ul#cssmw_home li ul {
  display: none;
  top: 0;
}
ul#cssmw_home li:hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.current > ul {
  position: absolute;
}
ul#cssmw_home > li {
  background-image: none;
}
ul#cssmw_home > li > span {
  background-image: none;
  background-position: top;
  display: block;
}
ul#cssmw_home > li > span > a {
  background-image: none;
  background-position: top top;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  margin: 5px 0 0 0;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  width: 110px;
}
ul#cssmw_home > li:hover > span {
  display: block;
}

ul#cssmw_home > li.hover > span {
  display: block;
}

ul#cssmw_home > li.current > span.current {
  display: block;
}
ul#cssmw_home > li:hover > span > a {
	background-color: #F3F5ED;
	color: #060;
}

ul#cssmw_home > li.hover > span > a {
  background-color: #060;
}

ul#cssmw_home > li.current > span.current > a.current {
  background-color: #060;
}
ul#cssmw_home ul.level-1 {
  left: 0px;
  padding-top: 7px;
  top: 100%;
  position:absolute;z-index:1000; 
}
ul#cssmw_home ul.level-1 > li {
  background-image: none;
}
ul#cssmw_home ul.level-1 > li > a {
  background-color: #060;
  background-image: none;
  border-bottom-width: 0px;
  border-left-color: #E3E3E4;
  border-right-width: 0px;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 15px;
  text-align: left;
  text-decoration: none;
  width: 145px;
}
ul#cssmw_home ul.level-1 > li > a:active {
  background-color: #E3E3E4;
  border-bottom: dotted 1px #5456EF;
  border-right: solid 1px #E3E3E4;
  color: #2D2B2E;
  font-weight: bold;
  text-decoration: none;
}
ul#cssmw_home ul.level-1 > li:hover > a {
	background-color: #F3F5ED;
	border-right-color: #E3E3E4;
	color: #060;
	font-weight: normal;
	text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.hover > a {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.current > a.current {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;

{
	font-style: italic;
	color: #c33;
	border: none;
}

tareaHintState textarea
{
	/*color: red !important;*/
}

.fact {
	font-size: 1.25em;
	color: #900;
}
.secondContent {
	color: #060;
	text-decoration: none;
}
.footer {
}
#outerWrapper #contentWrapper #content #contentlinks {
	list-style: none;
	color: #060;
	text-decoration: none;
}
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
#outerWrapper #navWrapper {
	padding-bottom:0px;
	z-index:999;
}
<!-- TemplateEndEditable -->
</style>
<style type="text/css" media="all">
<!--
@import url("css/home.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("css/home_print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #rightColumn1 {
  width: 345px;
}
</style>
<![endif]-->
<!--[if IE]>
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all"> 
@import url("css/ie6.css");
</style>
<![endif]-->
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw_home/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw_home/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw_home/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("css/spry_custom.css");
-->
</style>
<style type="text/css" media="all">
<!--
@import url("css/mystyles.css");
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
-->
</style>
<style type="text/css">
.box {

  float:left;
  width: 350px;
  overflow: auto;

}
</style>
<script type="text/javascript">
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];}
}
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;
}
</script>
</head><body onload="MM_preloadImages('/~ps4/imagesupload/1/03100014_62c.jpg','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png')">
  <div id="featuredWrapper">
    <div class="box">
      <h2 id="firstPod">need to have these 3 columns lined up side by each</h2>
      <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p><img src="/~ps4/imagesupload/graphics/LB_01.jpg" alt="24 Hour Sale" name="hoursale" width="250" height="250" id="Image1" /></a></p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
        	<h3>&nbsp;</h3>
        	<h3>&nbsp;</h3>
          <p>&nbsp;</p>
          <p><br />
            <br />
          </p>
</div>
      </div>
    </div>
    <div class="box">
    	<h2 id="middlePod">&nbsp;</h2>
     <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p>promotional blurb</p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
       	  <h3>&nbsp;</h3>
<p><br />
<p><br />
          </p>
        </div>
      </div>
    </div>
    <div class="box">
    	<h2 id="lastPod">need to have up to 6 pictures rotating</h2>
      <div class="productWrapper">
      	<div class="image" style="width: 148px; padding: 7px;">
		  <img src="" name="Rotating" id="Rotating1" width=100 height=100>
      	  <p><span class="image" style="width: 148px;"></a></span><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/03100014_62c.jpg',1)"><img src="/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png" name="image1" width="62" height="62" border="0" id="image1" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png',1)" onmouseout="MM_swapImgRestore()" /></a></p>
      	</div>
      	<div class="price">
        	 <marquee border="1" scrollamount="4"><h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; accessories!!!<br />
       	  </h3></marquee>
</div>
      </div>
    </div>
  </div>
<script language="JavaScript">
  var ImageArr1 = new Array(
	"/~ps4/imagesuploaded/MultiGrass_Metal.jpg",
	"/~ps4/imagesuploaded/Orchid Two Tone.jpg",
	"/~ps4/imagesuploaded/orchid_burgundy.jpg",
	"/~ps4/imagesuploaded/Easter Lily Cemetary Cross_FZX614.jpg",
	"/~ps4/imagesuploaded/Rose Memorial Wreath_FR151~RE.jpg",
	"/~ps4/imagesuploaded/Sunflower Spray w Bud ~36_GTS605_Yellow.png",
	"/~ps4/imagesuploaded/Sunflower Spray~40 FR1158_Gold.jpg"
	);

  var ImageHolder1 = document.getElementById('Rotating1');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  
  </script>
</body>
</html>

Open in new window

0
 
glozinskiAuthor Commented:
Thank you
Please look at http://65.254.54.66/~ps4/header.php
I do not want the small image...however, the images our on the server but not viewing so what am I missing...
as well I need the marquee across the total bottom....
so sorry....newbie
thank you
0
 
EMB01Commented:
Your paths must be messed up for your files:

  var ImageArr1 = new Array(
      "/~ps4/imagesuploaded/MultiGrass_Metal.jpg",
      "/~ps4/imagesuploaded/Orchid Two Tone.jpg",
      "/~ps4/imagesuploaded/orchid_burgundy.jpg",
      "/~ps4/imagesuploaded/Easter Lily Cemetary Cross_FZX614.jpg",
      "/~ps4/imagesuploaded/Rose Memorial Wreath_FR151~RE.jpg",
      "/~ps4/imagesuploaded/Sunflower Spray w Bud ~36_GTS605_Yellow.png",
      "/~ps4/imagesuploaded/Sunflower Spray~40 FR1158_Gold.jpg"
      );

Please ensure these paths are correct becuase as per my test, the script works perfectly.

Use the attached code to move the marquee.

<div style="clear: left; width: 600px;">
      <marquee border="1" scrollamount="4"><h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; accessories!!!<br />
               </h3></marquee>
              </div>

If you want to test it yourself, move this file and two images name "pic1.jpg" and "pic2.jpg" to your desktop and open the file.  If you did it right (and have javascript enabled) it will rotate the two images.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
<!--
@import url("css/common.css");
body {
  background-color: #fff;
  background-image: none;
  border-color: #000;
  color: #000;
}
ul#cssmw_home {
  cursor: default;
  height: 30px;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul {
  cursor: default;
  font-size: 0;
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul#cssmw_home ul li {
  background-image: none;
  float: none;
}
ul#cssmw_home li {
  background-image: none;
  float: left;
  padding: 0 0 0 0;
  position: relative;
  white-space: nowrap;
  z-index: 100;
}
ul#cssmw_home li ul {
  display: none;
  top: 0;
}
ul#cssmw_home li:hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.hover > ul {
  display: block;
  position: absolute;
}

ul#cssmw_home li.current > ul {
  position: absolute;
}
ul#cssmw_home > li {
  background-image: none;
}
ul#cssmw_home > li > span {
  background-image: none;
  background-position: top;
  display: block;
}
ul#cssmw_home > li > span > a {
  background-image: none;
  background-position: top top;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  margin: 5px 0 0 0;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  width: 110px;
}
ul#cssmw_home > li:hover > span {
  display: block;
}

ul#cssmw_home > li.hover > span {
  display: block;
}

ul#cssmw_home > li.current > span.current {
  display: block;
}
ul#cssmw_home > li:hover > span > a {
	background-color: #F3F5ED;
	color: #060;
}

ul#cssmw_home > li.hover > span > a {
  background-color: #060;
}

ul#cssmw_home > li.current > span.current > a.current {
  background-color: #060;
}
ul#cssmw_home ul.level-1 {
  left: 0px;
  padding-top: 7px;
  top: 100%;
  position:absolute;z-index:1000; 
}
ul#cssmw_home ul.level-1 > li {
  background-image: none;
}
ul#cssmw_home ul.level-1 > li > a {
  background-color: #060;
  background-image: none;
  border-bottom-width: 0px;
  border-left-color: #E3E3E4;
  border-right-width: 0px;
  color: #fff;
  display: block;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 0 0 0;
  padding: 10px 10px 10px 15px;
  text-align: left;
  text-decoration: none;
  width: 145px;
}
ul#cssmw_home ul.level-1 > li > a:active {
  background-color: #E3E3E4;
  border-bottom: dotted 1px #5456EF;
  border-right: solid 1px #E3E3E4;
  color: #2D2B2E;
  font-weight: bold;
  text-decoration: none;
}
ul#cssmw_home ul.level-1 > li:hover > a {
	background-color: #F3F5ED;
	border-right-color: #E3E3E4;
	color: #060;
	font-weight: normal;
	text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.hover > a {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;
}

ul#cssmw_home ul.level-1 > li.current > a.current {
  background-color: #060;
  border-right-color: #E3E3E4;
  color: #FFFFFF;
  font-weight: normal;
  text-decoration: none;

{
	font-style: italic;
	color: #c33;
	border: none;
}

tareaHintState textarea
{
	/*color: red !important;*/
}

.fact {
	font-size: 1.25em;
	color: #900;
}
.secondContent {
	color: #060;
	text-decoration: none;
}
.footer {
}
#outerWrapper #contentWrapper #content #contentlinks {
	list-style: none;
	color: #060;
	text-decoration: none;
}
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
#outerWrapper #navWrapper {
	padding-bottom:0px;
	z-index:999;
}
<!-- TemplateEndEditable -->
</style>
<style type="text/css" media="all">
<!--
@import url("css/home.css");
-->
</style>
<style type="text/css" media="print">
<!--
@import url("css/home_print.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css"> 
#outerWrapper #contentWrapper #rightColumn1 {
  width: 345px;
}
</style>
<![endif]-->
<!--[if IE]>
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all"> 
@import url("css/ie6.css");
</style>
<![endif]-->
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw_home/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw_home/menu_ie.css");
</style>
<![endif]-->
<script type="text/javascript" src="CSSMenuWriter/cssmw_home/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("css/spry_custom.css");
-->
</style>
<style type="text/css" media="all">
<!--
@import url("css/mystyles.css");
#outerWrapper #storeMessage marquee {
	font-size: 36px;
	color: #C03;
}
-->
</style>
<style type="text/css">
.box {

  float:left;
  width: 350px;
  overflow: auto;

}
</style>
<script type="text/javascript">
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];}
}
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;
}
</script>
</head><body onload="MM_preloadImages('/~ps4/imagesupload/1/03100014_62c.jpg','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png')">
  <div id="featuredWrapper">
    <div class="box">
      <h2 id="firstPod">need to have these 3 columns lined up side by each</h2>
      <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p><img src="/~ps4/imagesupload/graphics/LB_01.jpg" alt="24 Hour Sale" name="hoursale" width="250" height="250" id="Image1" /></a></p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
        	<h3>&nbsp;</h3>
        	<h3>&nbsp;</h3>
          <p>&nbsp;</p>
          <p><br />
            <br />
          </p>
</div>
      </div>
    </div>
    <div class="box">
    	<h2 id="middlePod">&nbsp;</h2>
     <div class="productWrapper">
      	<div class="image" style="padding-top: 7px;">
      	  <p>promotional blurb</p>
      	  <p>&nbsp;</p>
      	</div>
        <div class="price">
       	  <h3>&nbsp;</h3>
<p><br />
<p><br />
          </p>
        </div>
      </div>
    </div>
    <div class="box">
    	<h2 id="lastPod">need to have up to 6 pictures rotating</h2>
      <div class="productWrapper">
      	<div class="image" style="width: 148px; padding: 7px;">
		  <img src="" name="Rotating" id="Rotating1" width=100 height=100>
      	  <p><span class="image" style="width: 148px;"></a></span><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/03100014_62c.jpg',1)"><img src="/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png" name="image1" width="62" height="62" border="0" id="image1" onmouseover="MM_swapImage('image1','','/~ps4/imagesupload/1/3011_782p_1259023917_1024p_62c.png',1)" onmouseout="MM_swapImgRestore()" /></a></p>
      	</div>
      	<div class="price">
        	 
</div>
      </div>
    </div>
	<div style="clear: left; width: 600px;">
	<marquee border="1" scrollamount="4"><h3>When your Home of Office Demand the Finest Finishing Touches with Artificial Plants, Trees &amp; accessories!!!<br />
       	  </h3></marquee>
		  </div>
  </div>
<script language="JavaScript">
  var ImageArr1 = new Array(
	"pic1.jpg",
	"pic2.jpg"
	);

  var ImageHolder1 = document.getElementById('Rotating1');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  
  </script>
</body>
</html>

Open in new window

0
 
glozinskiAuthor Commented:
thank you
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now