Solved

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

Posted on 2010-11-15
10
634 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
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
 
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
WPF issue with Trigger 2 69
API Soap Calls 4 61
MySQL database data submission 7 39
Adding a hidden div to each row in a table 6 26
Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Uploading files to the web server has become common part of almost any kind of web application. People use different technologies to solve this, but regardless of the technology used, it is always useful to have some kind of progress indicator shown…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

762 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now