Rotating Pictures in Dreamweaver CS3 HTML Webpage... NON-FLASH

Hey Experts,

I've always used flash to animate things in my website.  I'm attempting to learn other methods.  I realize that HTML5 has it's definiate advantages, but I unfortunitly only have CS3 for now.  

What is a simple way to rotate pictures on a webpage without using flash?

Thanks!

DJM
DJMgraphixAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
PorterGraphicsConnect With a Mentor Commented:
Look into Javascript for making a slideshow with transitions. This link also has a PHP version too if you want to go that route.

http://www.seabreezecomputers.com/slideshow/
0
 
Muhammad Ahmad ImranConnect With a Mentor Database DeveloperCommented:
0
 
DJMgraphixAuthor Commented:
This looks like it maybe it... I'll take 5 - 10min to implement and let you know!  

THANKS!
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
DJMgraphixAuthor Commented:
It's OK... Nothing to write home about.

The transition is instant... no fading or anything... I guess that's why I liked flash.. I could have it do whatever animation I wanted during transition.

Also, I must be missing deleting something...  When you mouseover on the image... it automatically goes back to the first image again.

Don't get me wrong, this is a great start, but I guess I'm looking for something more dynamic.

<!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>St. Peter Armenian Apostolic Church | Watervliet NY</title>

<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}
body {
	background-color: #fedf08;
	background-image: url(main_images/backgrounds/main_background.jpg);
	background-repeat: repeat-x;
}
.style2 {font-size: 12px}
.style3 {font-size: 10px}
	  #menu{float:left}
 	  #menu ul {font-family:  Arial, Helvetica, sans-serif;font-size: 12px;list-style: none;float:right}
      #menu ul li {display: block;position: relative;float: left;text-align:left}
      #menu li ul { display: none; }
      #menu ul li a {display: block;text-decoration: none;color: #000000;padding: 5px 15px 5px 15px;margin-left: 1px;white-space: nowrap;background:;font:normal bold 12px  Arial, Helvetica, sans-serif}
      #menu ul li a:hover { background: #FFF777; }
      #menu li:hover ul {display: block;position: absolute;width:120px;margin:0px;padding:0px}
      #menu li:hover li {float: left;text-align:left;width:255px;text-align:left;margin:0px}
      #menu li:hover a { background:#FFF777;text-align:left }
      #menu li:hover li a:hover { background: #FFFFCC; }

-->
</style>
<script type="text/javascript">
<!--
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];}
}
// Comma separated list of images to rotate 
var imgs = new Array('rotating_images/1.jpg','rotating_images/2.jpg');
// delay in milliseconds between image swaps 1000 = 1 second 
var delay = 5000;
var counter = 0;

function preloadImgs(){
  for(var i=0;i<imgs.length;i++){
    MM_preloadImages(imgs[i]);
  }
}

function randomImages(){
  if(counter == (imgs.length)){
    counter = 0;
  }
  MM_swapImage('rotator', '', imgs[counter++]);
  setTimeout('randomImages()', delay);
}
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body onload="preloadImgs();randomImages();">

<div align="center">
  <table width="940" border="0" cellpadding="0" cellspacing="0" bgcolor="#EFFCFF">
    <!--DWLayoutTable-->
    <tr>
      <td height="18" colspan="3" valign="top" background="main_images/backgrounds/top_border.jpg"><img src="main_images/backgrounds/top_border.jpg" alt="top" width="940" height="18" /></td>
    </tr>
    <tr>
      <td width="15" rowspan="2" valign="top" background="main_images/backgrounds/left_border.jpg"><img src="main_images/backgrounds/left_border.jpg" alt="left" width="15" height="50" /></td>
      <td width="910" height="185" valign="top">      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr>
          <td width="910" height="145" valign="top"><img src="main_images/header.jpg" width="910" height="145" /></td>
          </tr>
        <tr>
          <td height="30
          " valign="top" bgcolor="#FFB900" background="main_images/backgrounds/menu_background.jpg">     <div id="menu">
        <ul>
            <li><a href="mypage.html">Our Church</a>
            <ul>
                    <li><a href="mypage.html">Church History</a></li>
                    <li><a href="mypage.html">Mission Statement</a></li>
                    <li><a href="mypage.html">Our Priest</a></li>
                    <li><a href="mypage.html">Parish Council</a></li>
                    <li><a href="mypage.html">Loosaper</a></li>
               </ul>
            </li>
            <li><a href="mypage.html">Organizations</a>
              <ul>
                    <li><a href="bunra_hosting_paket1.html">A.C.Y.O.A.</a></li>
                    <li><a href="mypage.html">Women's Guild</a></li>
                    <li><a href="mypage.html">Adult Fellowhip</a></li>
                    <li><a href="mypage.html">Family Worship</a></li>
                    <li><a href="mypage.html">Church Choir</a></li>
                    <li><a href="mypage.html">College & Young Professionals Network</a></li>
               </ul>
            </li>
            <li><a href="mypage.html">Programs &amp; Services</a>
              <ul>
                    <li><a href="mypage.html">Sunday School</a></li>
                    <li><a href="mypage.html">Armenian School</a></li>
                    <li><a href="mypage.html">Bible Study</a></li>
                    <li><a href="mypage.html">BCC</a></li>
                    <li><a href="mypage.html">Narek Prayer Group</a></li>
                    <li><a href="mypage.html">Candle Holder & Altar Servers Classes</a></li>
               </ul>
            </li>
            <li><a href="mypage.html">Calendar of Events</a></li>
            <li><a href="mypage.html">Photos</a></li>
            <li><a href="mypage.html">Giving</a>
            <ul>
                    <li><a href="mypage.html">Membership</a></li>
                    <li><a href="mypage.html">Endowment</a></li>
                    <li><a href="mypage.html">Building Fund</a></li>
                    <li><a href="mypage.html">Pew Plates</a></li>
                    <li><a href="mypage.html">Candle & Altar Flowers</a></li>
                    <li><a href="mypage.html">Pasters Fund</a></li>
                    <li><a href="mypage.html">WILL</a></li>
               </ul>
            </li>
            <li><a href="mypage.html">Contact Us</a>
            <ul>
                    <li><a href="mypage.html">Contact Information</a></li>
                    <li><a href="mypage.html">Driving Directions</a></li>
                    <li><a href="mypage.html">Links to Other Organizations & Churhes</a></li>
               </ul>
            </li>
            <li><a href="mypage.html">Bookstore</a></li>
            </ul>
    </div></td>
        </tr>
        
        
        
        
        
        
        
      </table></td>
      <td width="15" rowspan="2" valign="top" background="main_images/backgrounds/right_border.jpg"><img src="main_images/backgrounds/right_border.jpg" alt="right" width="15" height="50" /></td>
    </tr>
    <tr>
      <td height="573" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#EFFCFF">
        <!--DWLayoutTable-->
        <tr>
          <td height="18" colspan="6" valign="top"><img src="main_images/backgrounds/top.jpg" alt="top" width="910" height="18" /></td>
          </tr>
        <tr>
          <td width="18" rowspan="3" valign="top"><img src="main_images/backgrounds/blue.jpg" alt="blue" width="18" height="18" /></td>
          <td width="291" height="356" valign="top"><div align="justify"><img src="main_images/church_sketch.jpg" alt="chuch" width="125" height="125" align="left" /></div></td>
          <td colspan="3" valign="top"><img src="rotating_images/1.jpg" alt="church" name="rotator" width="583" height="356" id="rotator" onmouseover="MM_swapImage('rotator','','rotating_images/1.jpg',1)"  /></td>
          <td width="18" rowspan="3" valign="top"><img src="main_images/backgrounds/blue.jpg" alt="blue" width="18" height="18" /></td>
          </tr>
        
        
        <tr>
          <td height="102" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','main_images/message_from_the_priest_over.jpg',1)"><img src="main_images/message_from_the_priest.jpg" alt="message from the priest" name="Image13" width="291" height="100" border="0" id="Image13" /></a></td>
          <td width="291" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','main_images/latest_news_over.jpg',1)"><img src="main_images/latest_news.jpg" alt="News" name="Image15" width="291" height="100" border="0" id="Image15" /></a></td>
          <td colspan="2" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','main_images/acyoa_over.jpg',1)"><img src="main_images/acyoa.jpg" alt="ACYOA" name="Image16" width="291" height="100" border="0" id="Image16" /></a></td>
          </tr>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        <tr>
          <td height="40" colspan="3" align="right" valign="bottom"><a href="http://www.facebook.com/group.php?gid=101361039928373&amp;v=wall" target="_blank" class="style2">join us on facebook: </a></td>
          <td width="40" align="center" valign="bottom"><a href="http://www.facebook.com/group.php?gid=101361039928373&amp;v=wall" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','main_images/facebook_over.jpg',1)"><img src="main_images/facebook.jpg" alt="facebook" name="Image14" width="35" height="35" border="0" id="Image14" /></a></td>
          </tr>
        
        
        
        
        
        
        
        
        
        
        
        
        <tr>
          <td height="18" colspan="6" valign="top"><img src="main_images/backgrounds/top.jpg" alt="top" width="910" height="18" /></td>
          </tr>
        
        
        <tr>
          <td height="25" colspan="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="15" height="25" valign="top"><img src="main_images/backgrounds/bottom_yellow.jpg" alt="bottom_yellow" width="15" height="25" /></td>
        <td width="407" align="left" valign="middle" bgcolor="#FFFFCC"><span class="style2">&copy; copyright 2011 <span class="style3">St. Peter Armenian Apostolic Church</span></span></td>
        <td width="473" align="right" valign="middle" bgcolor="#FFFFCC"><span class="style2">powered by: <a href="www.djmgraphix.com" target="_blank">DJM Graphix</a></span></td>
      <td width="15" valign="top"><img src="main_images/backgrounds/bottom_yellow.jpg" alt="bottom_yellow" width="15" height="25" /></td>
      </tr>
              </table></td>
          </tr>
        <tr>
          <td height="14"></td>
          <td></td>
          <td></td>
          <td width="252"></td>
          <td></td>
          <td></td>
          </tr>
      </table>
      </td>
    </tr>
    
    
    <tr>
      <td height="50" colspan="3" valign="top"><img src="main_images/backgrounds/bottom_border.jpg" alt="bottom" width="940" height="50" /></td>
    </tr>
  </table>
</div>

</body>
</html>

Open in new window

0
 
Jason C. LevineConnect With a Mentor No oneCommented:
Hi DJMgraphix,

There are probably half a million jquery-based image rotators out there...just Google for "jquery image rotator" or "jquery image slider" until you find one you like.

Not sure why you think DW CS3 inhibits you from using HTML5?  Code is code...
0
 
DJMgraphixAuthor Commented:
You've helped me many times Jason..

Thanks again... Now I can focus on my other questions...

THANKS!

DJM
0
 
DJMgraphixAuthor Commented:
Ha... wrote this in the wrong question... You just solved my other one!

Now I can focus on THIS QUESTION!   Ha.
0
 
SaigonJeffCommented:
I found this really great free extension! You should check it out... Takes only seconds to set up the effects.

http://www.dmxzone.com/go?17422

Let us know how it goes!
0
 
DJMgraphixAuthor Commented:
You are all right.  There are tons of ways to do it out there.  Thank you for your time and sorry for the delay.
0
All Courses

From novice to tech pro — start learning today.