Solved

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

Posted on 2010-11-15
10
646 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:DJMgraphix
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 14

Assisted Solution

by:leoahmad
leoahmad earned 166 total points
ID: 34136035
0
 

Author Comment

by:DJMgraphix
ID: 34136057
This looks like it maybe it... I'll take 5 - 10min to implement and let you know!  

THANKS!
0
 

Author Comment

by:DJMgraphix
ID: 34136234
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 3

Accepted Solution

by:
PorterGraphics earned 167 total points
ID: 34136792
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
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 167 total points
ID: 34137908
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
 

Author Comment

by:DJMgraphix
ID: 34139512
You've helped me many times Jason..

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

THANKS!

DJM
0
 

Author Comment

by:DJMgraphix
ID: 34139517
Ha... wrote this in the wrong question... You just solved my other one!

Now I can focus on THIS QUESTION!   Ha.
0
 
LVL 5

Expert Comment

by:SaigonJeff
ID: 34145871
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
 

Author Closing Comment

by:DJMgraphix
ID: 35315057
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

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question