Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2010-11-15
10
Medium Priority
?
664 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 664 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
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 
LVL 3

Accepted Solution

by:
PorterGraphics earned 668 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 668 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

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
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.
Suggested Courses

721 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