Rotating Images

rotating images

Page 1 of 1

3 Replies - 3835 Views - Last Post: 27 April 2009 - 07:07 PM

#1 jmprgrl74  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 06-March 08

Rotating Images

Post icon  Posted 24 April 2009 - 04:11 PM

I'm working on a website for my Dreamweaver class and trying to incorporate some Javascript into it. But I can't seem to get it to rotate the image I want it to, and not the logo. I've tried using getElementsByTagName, by ID and by name. I'd appreciate any help - I know it's homework, but it's not homework for a Javascript class. I'll just have to delete it and do something else if I can't make it work. Thanks! Pam

<!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"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.twoColHybLtHdr #container { 
	width: 80%;  /* this will create a container 80% of the browser width */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.twoColHybLtHdr #header {
	background: #FFFFFF;
	padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.twoColHybLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLtHdr #sidebar1 p" rule.
*/
.twoColHybLtHdr #sidebar1 {
	float: left;
	width: 15em; /* since this element is floated, a width must be given */
	background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 0; /* top and bottom padding create visual space within this div  */
}
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
	margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
	margin-right: 10px;
}

/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/
.twoColHybLtHdr #mainContent { 
	margin: 0 20px 0 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
} 
.twoColHybLtHdr #footer {
	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#0083a9;
} 
.twoColHybLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
--> 
</style><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
var images = new Array(14);
var curImage = 0;
var direction;
var begin;

var imagesLoaded = 0;
for (var i = 0; i < 14; ++i) {
	images[i] = new Image();
	images[i].src = "image" + i + ".jpg";
	if (i == 13)
		begin = setInterval("draw()", 500);
}

function draw() {
	if (curImage == 13)
		curImage = 0;
	else 
		++ curImage;
	document.getElementsByTagName("img")[0].src = images[curImage].src;
	if (curImage == 0)
		direction = "up";
	else if(curImage == 18)
		direction = "down";
	document.getElementsByTagName("img")[0].src = images[curImage].src;
}
		
/* ]]> */
	</script>
<style type="text/css">
<!--
.style1 {
	font-size: 12px;
	font-style: italic;
}
-->
</style>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body class="twoColHybLtHdr">

<div id="container">
  <div id="header">
	<div align="center">
	  <p><img src="images/final-bear-creek-logosmaller.gif" alt="Bear Creek Landscaping Logo" width="600" height="170" /></p>
	</div>
  <!-- end #header --></div>
  <div id="sidebar1" align="center">
	<p><img src="draw1/image0.jpg" alt="Draw Landscaping" width="200" height="134" /></p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>

  
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
	<div id="Accordion1" class="Accordion" tabindex="0">
	  <div class="AccordionPanel">
		<div class="AccordionPanelTab"><strong><em>Home</em></strong></div>
		<div class="AccordionPanelContent">
		  <p> Bear Creek Landscaping Associates is your source for all your landscaping needs. Whether you are looking for someone to provide regular grounds maintenance or would like assistance with landscape and irrigation design, we would be happy to assist you.</p>
		  <p>Established in 1992, Bear Creek Landscape Associates, Inc.,  is a full service, year round company of land care professionals specializing  in commercial and residential turn key work in the triangle area.  Our goal is to provide our customers with top  cutting edge technologies and most of all excellent quality and service for  their money.  Let us help you turn your  site into a place you will want to share with others because of its beauty and  charm. </p>
		</div>
	  </div>
	  <div class="AccordionPanel">
		<div class="AccordionPanelTab"><strong><em>About Us</em></strong></div>
		<div class="AccordionPanelContent">
		  <p>Bear Creek Landscaping Associates, Inc. is owned and operated by Mike and Sharon Burke. Established in August, 1992, our goal is to provide excellent quality and service. Mike has been in the landscaping business since 1976, contributing all his visions and hard work to make the business what it is today. Above all, our desire is to give each customer a job and product they can take pride in, share with others and feel good about recommending us. Please call or email us today for all your landscaping needs. We would love to hear from you!</p>
		</div>
	  </div>
	  <div class="AccordionPanel">
		<div class="AccordionPanelTab"><strong><em>Services Offered</em></strong></div>
		<div class="AccordionPanelContent">
		  <p>Our company offers a wide-variety of landscaping and irrigation design and installation, grounds maintenance and lighting, specializing specifically in the following services:</p>
		  <dl>
			<dt><strong>Gardening Services:</strong></dt>
			<dd>Grass cutting and lawn care maintenance</dd>
			<dd>Fertilization, aeration and overseeding</dd>
			<dd>Pruning and hedge trimming</dd>
			<dd>Garden and pond restoration and maintenance</dd>
			<dd>Plant feeding and plant care</dd>
			<dd>Full scale maintenance services</dd>
			<dd>Mulching</dd>
		  </dl>
		  <dl>
			<dt><strong>Landscape Services:</strong></dt>
			<dd>Landscape design</dd>
			<dd>Landscape installation</dd>
			<dd>Fine grading</dd>
			<dd>Seeding and sodding</dd>
			<dd>Patios, terraces, and brick paver work</dd>
			<dd>Pond design, installation and maintenance</dd>
			<dd>Fencing and trellising</dd>
			<dd>Raised borders</dd>
			<dd>Water features</dd>
			<dd>Stone walling and retaining walls</dd>
			<dd>Irrigation design, installation and maintenance</dd>
			<dd>Landscape lighting</dd>
		  </dl>
		  <p>Many other services are available upon request.  Please contact us to discuss your vision and landscaping needs.</p>
		</div>
	  </div>
	  <div class="AccordionPanel">
		<div class="AccordionPanelTab"><em><strong>Examples of Our Work</strong></em></div>
		<div class="AccordionPanelContent">
		  <p>Corporate and residential landscaping.  </p>
		  <p><a href="images/myalbum.html" target="_blank">Click here</a> to view an album of pictures of our work. (New window will open.)</p>
		</div>
		<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','606','height','511','title','Bear Creek Images','src','images/myalbum','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/myalbum' ); //end AC code
		</script>
		<noscript>
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="606" height="511" title="Bear Creek Images">
		  <param name="movie" value="images/myalbum.swf" />
		  <param name="quality" value="high" />
		  <embed src="images/myalbum.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="606" height="511"></embed>
		</object>
		</noscript>
	  </div>
	  <div class="AccordionPanel">
		<div class="AccordionPanelTab"><strong><em>Customer Testimonials</em></strong></div>
		<div class="AccordionPanelContent"><p>testimonials</p></div>
	  </div>
	  <div class="AccordionPanel">
		<div class="AccordionPanelTab"><strong><em>Landscaping Q&amp;A</em></strong></div>
		<div class="AccordionPanelContent">
		  <p>Send us your questions and we will answer some of them here.</p>
		  <p><strong>Question: </strong>What Is the Proper Way of Pruning Trees?</p>
		  <p>There are many different kinds of pruning cuts, but the following tips will   give beginners the basics of what they need to know about pruning trees....</p>
		  <p><strong>Answer: </strong> </p>
		  <p>If you must prune off a scaffold branch, make sure,   first of all, that the branch does not begin to fall prematurely, while still   attached to the trunk. This would cause a rip at the joint where the branch   meets the trunk, thus creating an open sore that invites disease. To avoid this   scenario, make your cuts in the following manner to reduce pressure on this   joint: </p>
		  <p>At a point along the branch approximately 2'-3' away from the trunk, begin   by sawing about half way through the branch <strong>from the bottom</strong>.</p>
		  <p>Now, from the top, but an inch or so further out from the branch than the   first cut (more for thicker branches), saw through the rest of the branch, to   remove it. You've now removed all but 2'-3' of the branch. The remaining stub   won't weigh enough to put undue pressure on the aforementioned joint. </p>
		  <p>Now proceed to prune off the remaining stub, as indicated below. </p>
		  <p>With the danger of ripping thus eliminated, we can prune off the remaining   2'-3' stub. To do so, acquaint yourself with a tree part known as a branch   &quot;collar.&quot; A branch's &quot;collar&quot; is the swelled base of the branch where it meets   the tree trunk. Think of it as an intermediate area between the branch and the   trunk. </p>
		  <p>To finish pruning off the branch, saw it off just outside the branch collar.   Leaving the branch collar intact will promote healing. </p>
		  <p>If you are merely shortening a scaffold branch on a young tree, prune the   branch back to a lateral bud or other branch. </p>
		  <p class="style1">(http://landscaping.about.com/od/pruningtrees/f/pruning_trees.htm)</p>
		</div>
	  </div>
	  <div class="AccordionPanel">
		<div class="AccordionPanelTab"><strong><em>Contact Info</em></strong></div>
		<div class="AccordionPanelContent">
		<p>Bear Creek Landscape Associates, Inc.<br />
		PO Box 1065<br />
		113 Valleycruise Circle<br />
		Garner, North Carolina  27529</p>
			
		<p>Contact information:<br />			
		Office Phone Number: (919) 422 5059<br />
		Office Fax Number:	  (919) 779 2528</p>
			
		<p>Owners:  Mike and Sharon Burke<br />
		Mike’s cell number:  (919) 868-3158<br />
		Sharon’s Cell number:  (919) 422-5059<br />
		Mike’s email address:  <a href="mailto:mburke-bcla@nc.rr.com?subject=Website Inquiry">mburke-bcla@nc.rr.com</a><br />
		Sharon’s email address:  <a href="mailto:sburke-bcla@nc.rr.com?subject=Website Inquiry">sburke-bcla@nc.rr.com</a></p>
		</div>
	  </div>
	</div>
	<h1>&nbsp;</h1>
  <!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
	<br class="clearfloat" />
	<div id="footer">
	<p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>


Mod edit - Please :code:

Is This A Good Question/Topic? 0
  • +

Replies To: Rotating Images

#2 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: Rotating Images

Posted 25 April 2009 - 07:45 PM

I think this is your problem: your Javascript is executing before your body loads. There are two solutions to this. I recommend that you put the code in a Javascript function and call it when the body loads, like
<body onload="startJS()">


Alternatively, you can place the <script> tag below everything inside the body. Don't place it outside of the <body> tag, because that would be incorrect HTML.

Also, as a note, next time, be sure that you put your code in a code tag. Since your code was html, you should have written this: [.code=html.]<html><etc /></html>[./code.] (without the periods ".")
Was This Post Helpful? 0
  • +
  • -

#3 jmprgrl74  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 06-March 08

Re: Rotating Images

Posted 27 April 2009 - 05:16 PM

View Postforest51690, on 25 Apr, 2009 - 06:45 PM, said:

I think this is your problem: your Javascript is executing before your body loads. There are two solutions to this. I recommend that you put the code in a Javascript function and call it when the body loads, like
<body onload="startJS()">


Alternatively, you can place the <script> tag below everything inside the body. Don't place it outside of the <body> tag, because that would be incorrect HTML.

Also, as a note, next time, be sure that you put your code in a code tag. Since your code was html, you should have written this: [.code=html.]<html><etc /></html>[./code.] (without the periods ".")


Thank you, I will do that. It actually still doesn't work that way. It is just taking the first image :/
Was This Post Helpful? 0
  • +
  • -

#4 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: Rotating Images

Posted 27 April 2009 - 07:07 PM

I tried the code on my computer and it seemed to work, although I didn't have the right images. Are you sure you have the right images in your folder. It looks for image0.jpg first, but I'm sure you knew that. Also, I saw that you wrote in your code, if (curImage == 13). Make sure you write if (curImage == images.length-1) in the future, because the length of images is sure to change. And I would use getElementById() instead of getElementsByTagName(). It's more precise. And I'm not sure what you're doing with the direction variable. You wrote else if(curImage == 18), but I can't see how curImage would even get to 18.

If these things don't help, try probing your code by alerting variables and seeing if anything's out of place.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1