Javascript not operating . .?

JavaScript
1

I’ve been looking at this for two days now. I’m fried!

The javascript routine for the pictures is not functioning.

I can’t see the problem.

thanks . . . Rick



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Listing - Selling Corona del Mar Real Estate | Rick Schreiber | Properties With Style</title>
<meta http-equiv="Content-Type" content="text/html;  css, xml, xhtml, javascript, charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<meta name="copyright" content="2012-01-01 properties With Style, Inc.&copy; "/>
<meta name="description" content="Rick Schreiber, Properties With Style, search or find Corona del Mar real estate, oceanfront homes, bayfront homes, local real estate broker, local real estate agent, local real estate office, pricing real estate, real estate values, luxury homes, upscale homes, orange county real estate analysis, statistical analysis, median sales prices, average sale prices, historical real estate values, short sales, foreclosure, REO, real estate content, determining market value, Listing and Selling South Orange County Real Estate, Aliso Viejo, Corona del Mar, Coto de Caza, Dana Point, Huntington Beach, Irvine, Laguna Beach, Laguna Hills, Laguna Niguel, Newport Beach, Newport Coast, Rancho Santa Margarita, San Clemente, San Juan Capistrano "/>
<link type="text/css" rel="stylesheet" href="css/homepage.css" media="screen, projection, tv"/>
<!--picture program starts here-->
<script type="text/javascript">
<!--loads pics in cache-->
var image1=new Image()
image1.src="/css/images/cdmpicketfence.jpg"
var image2=new Image()
image2.src="/css/images/cdmbelowstreetlevel.jpg"
var image3=new Image()
image3.src="/css/images/cdmgreycottage.jpg"
var image4=new Image()
image4.src="/css/images/cdmdowncoast.jpg"
var image5=new Image()
image5.src="/css/images/cdmrickssold.jpg"
var image6=new Image()
image6.src="/css/images/cdmswimmingcove.jpg"
var image7=new Image()
image7.src="/css/images/cdmcottage.jpg"
var image8=new Image()
image8.src="/css/images/cdmcustom.jpg"
var image9=new Image()
image9.src="/css/images/cdmpalmcottage.jpg"
var image10=new Image()
image10.src="/css/images/cdmocnviewcottage.jpg"
var image11=new Image()
image11.src="/css/images/cdmcornerestate.jpg"
var image12=new Image()
image12.src="/css/images/cdmpelicanrock.jpg"
var image13=new Image()
image13.src="/css/images/cdmcustomestate1.jpg"
var image14=new Image()
image14.src="/css/images/cdmflowerstreet.jpg"
var image15=new Image()
image15.src="/css/images/cdmtreestreet.jpg"
var image16=new Image()
image16.src="/css/images/cdmestate1.jpg"
var image17=new Image()
image17.src="/css/images/cdmpoppyave.jpg"
var image18=new Image()
image18.src="/css/images/cdmtreelinest.jpg"
var image19=new Image()
image19.src="/css/images/cdmreoestate.jpg"
var image20=new Image()
image20.src="/css/images/cdmmodern.jpg"
var image21=new Image()
image21.src="/css/images/cdmtreetrunk.jpg"
var image22=new Image()
image22.src="/css/images/cdmmainbeach.jpg"
  </script>
 </head>
<body>
	<div class="header"><img src="css/images/cdmnpthbr.jpg" name="slide" width="470" height="250" alt="corona del mar picture slide show"/></div>
<script type="text/javascript">
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<22)//must represent No. of pictures in above cache NOT the header picture!//
step++
else
step=1
//call function "slideit()" every 6 seconds
setTimeout("slideit()",6000)
}
slideit()
</script>
<!-- here goes the main menu and the rest of the page html code goes-->
<div id="nav">
  <ul id="navli">
    <li><a href="http://www.propertieswithstyle.com"/title="HOME PAGE">Home Page</a></li>
    <li><a href="http://www.propertieswithstyle.com/snapshots.html">Return To Beach &amp; South County Snapshots </a></li>
    <li><a href="http://www.propertieswithstyle.com/cdmmap.html">Search Corona del Mar Homes Now</a></li>
  </ul>
</div>
<!--eND of Nav-->
<div id="maincontent">
  <div class="desc">Corona del Mar In Newport Beach is known for its flower street names, perhaps best personified as a sublime bedroom community. Behind it's village charm lies some of the most exclusive bluff top real estate to be found. Corona del Mar is actually within the city of Newport Beach but truly has it's own special flavor, and zip code - 92625. Spectacular ocean, sunset, city lights and Catalina Island vews abound in many of Corona del Mar's pristine neighborhoods. The annual Christmas walk is not to be missed along with the annual holiday boat parade in Newport Harbor. Ocean Boulevard with its spectacular coastline views, the flowers streets and Pacific Coast Highway are a walkers paradise. The pictures above are samples of Corona del Mar's Unique Architectural Styles and Landmarks. Questions regarding Corona del Mar? Please contact us at <a class="test" href="mailto:propertieswithstyle@gmail.com"><span class="email">Properties With Style.</span></a>
</div>
  <div class="mapname">Corona del Mar Visual Market</div>
     <p><em>How To Read the charts.</em> Find the square feet of your home along the bottom of the micro chart. Draw a vertical line straight up until you intersect with either of the two linear lines, green for sold price and rust for available price. Look to the left or right of the chart for the dollar scales. This will indicate an approximate value (starting pointe) of the home you are thinking of selling or purchasing based on square feet and sales price, the two most critical factors in evaluation. Remember, every home is unique! This data is based on specific cities or communities. <em>If you would like to have a chart like this for your property</em> just eMail us with your street address, city, zip code and square feet of your home. We'll eMail you a similar chart. This method was primarily designed for large custom homes and lot sales but works well in residential communities also. It’s pretty cool!</p>
  <p>Questions? Please feel free to contact us at : <a class="test" href="mailto:propertieswithstyle@gmail.com"><span class="email">Properties With Style.</span></a></p>
  <br />
  <div class="mapname"> Corona del Mar 4th Quarter 2011 Macro Chart </div>
  <div class="plate"><img src="css/graphs/cdmmacro.gif" width="860px" height="600" alt="chart" /></div>
  <div class="mapname"> Corona del Mar 4th Quarter 2011 Micro Chart </div>
  <div class="plate"><img src="css/graphs/cdmmicro.gif" width="860px" height="600" alt="chart" /></div>
  <div class="mapname"> Corona del Mar 13 Year Median Sale Prices </div>
    <div class="desc">What is median anyway? To truly understand Mean and Median you really have to look at all of the encompassing data bits. If you have a symetrical set of data, median (mid-pointe) and mean (average) can be very close indeed. However, if the data set is skewed, lets say, by an unusually high sale price, it enforces artificially high mean values with the resulting effect of over pricing. The opposite is true with a low sale price, under valued. Medians have less tendency to fluctuate with excessive real estate trends.</div>
  <div class="plate"><img src="css/graphs/cdmmedian.gif" width="860px" height="600" alt="chart" /></div>
  <div class="mapname"> Corona del Mar 13 Year Average Rental Chart </div>
  <div class="plate"><img src="css/graphs/cdmrents.gif" width="860px" height="600" alt="chart" /></div>
  <br  />
  <div id="footer">
    <hr />
    Properties With Style Inc., a Real Estate Corporation&copy;. The information being provided by CARETS (CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS, and/or VCRDS) is for the visitor's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties visitor may be interested in purchasing.

    Any information relating to a property referenced on this web site comes from the Internet Data Exchange (IDX) program of CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site.

    The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals. The data contained herein is copyrighted by CARETS, CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS and/or VCRDS and is protected by all applicable copyright laws. Any dissemination of this information is in violation of copyright laws and is strictly prohibited.

    CARETS, California Real Estate Technology Services, is a consolidated MLS property listing data feed comprised of CLAW (Combined LA/Westside MLS), CRISNet MLS (Southland Regional AOR), DAMLS (Desert Area MLS),CRMLS (California Regional MLS), i-Tech MLS (Glendale AOR/Pasadena Foothills AOR) and VCRDS (Ventura County Regional Data Share).
    Information of sellers and others have not been verified. Data maintained by the Associations or their MLS may not reflect all activity in the market. DRE License: 01408382.
    <hr />
  </div>
  <!-- eND Footer-->
</div>
<!-- eND Maincontent-->
</body>
</html>
<!--2/09/2012-->
2

works with my images

but improved code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Listing - Selling Corona del Mar Real Estate | Rick Schreiber | Properties With Style</title>
<meta http-equiv="Content-Type" content="text/html;  css, xml, xhtml, javascript, charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<meta name="copyright" content="2012-01-01 properties With Style, Inc.&copy; "/>
<meta name="description" content="Rick Schreiber, Properties With Style, search or find Corona del Mar real estate, oceanfront homes, bayfront homes, local real estate broker, local real estate agent, local real estate office, pricing real estate, real estate values, luxury homes, upscale homes, orange county real estate analysis, statistical analysis, median sales prices, average sale prices, historical real estate values, short sales, foreclosure, REO, real estate content, determining market value, Listing and Selling South Orange County Real Estate, Aliso Viejo, Corona del Mar, Coto de Caza, Dana Point, Huntington Beach, Irvine, Laguna Beach, Laguna Hills, Laguna Niguel, Newport Beach, Newport Coast, Rancho Santa Margarita, San Clemente, San Juan Capistrano "/>
<link type="text/css" rel="stylesheet" href="css/homepage.css" media="screen, projection, tv"/>
<!--picture program starts here-->
<script type="text/javascript">
<!--loads pics in cache-->
var image1=new Image()
image1.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg"
var image2=new Image()
image2.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg"
var image3=new Image()
image3.src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg"
  </script>
 </head>
<body>
	<div class="header"><img src="css/images/cdmnpthbr.jpg" id="slide" width="470" height="250" alt="corona del mar picture slide show"/></div>
<script type="text/javascript">
//variable that will increment through the images
var step=1

function slideit(){
//if browser does not support the image object, exit.
 var img=window["image"+step];
 if (!img){
  step=1;
 }
 document.getElementById('slide').src=window["image"+step].src;
 step++
//call function "slideit()" every 6 seconds
 setTimeout(function(){ slideit(); },1000);
}

slideit();
</script>
</body>
</html>
3

Alternately, you can try this:

<img id="slide" alt="" src="" width="500" height="500" />
<script>
	var step = 0,
		imgs = [
			{
				image: 'Arc-Brave.png',
				alt: 'Image One'
			},
			{
				image: 'Arc-Dust.png',
				alt: 'Image Two'
			},
			{
				image: 'Arc-Human.png',
				alt: 'Image Three'
			}	
		];
	
	// Preload Images
	function preloadImages(source) {
		for(var i = 0; i < source.length; i++ ) {
			var img = new Image();
			if( source.hasOwnProperty('image') ) {	
				img.src = source[i].image;
			}
		}	
	}
	preloadImages(imgs);
			
	function slideIt() {
		var slider = document.getElementById('slide');
			slider.src = imgs[step].image;
			slider.alt = imgs[step].alt;
			
			step++;
			if( imgs.length === step ) {
				step = 0;
			}
			
		setTimeout(
			function() {
				slideIt();
			},
			5000
		);		
	}
	slideIt();
</script>
4

I re did the entire page.

Validation of both pages below is ok except for the img tag in Strict.

www.propertieswithstyle.com/cdcdata.html

This page works flawlessly.

www.propertieswithstyle.com/cdmdata.html

The page show fails to show the initial loaded picture or any of the pictures.

They are the same or - I’m blinded to the error is more likely.

I don’t understand the suggested code and how it is different.

Thanks much everyone - Rick

5

Stupid is as stupid does!

I DIDN’T UPLOAD THE PICTURES TO THE SERVER.

Severe punishment for me :frowning:

sorry . . . rick

6

Not a problem, I can go over a revised code of the above to show the example better:


<img id="slide" 
	 width="470" 
	 height="250" 
	 alt="corona del mar picture slide show" 
	 src="http://www.propertieswithstyle.com/css/images/cdmnpthbr.jpg" 
/>
<script> 
	function preloadImages(array, url) {
		// Initialize variables
		
		// i for incrementing through the array
		var i = 0,
			// for the img object later in this function
			img;
	
		// cycle through the array
		for( i; i < array.length; i++ ) {
			if( document.images ) {
				img = new Image();
				img.src = url + array[i];
				
				// Put the loaded images back into the array so we can access it later...
				array[i] = img.src;
			}
		}
		// Return the array
		return array;
	}

	// Initialize variables

	// for incrementing value in the slideIt function
	var step = 0, 
	
		// static variable for the img element where the slide show will be
		slider = document.getElementById('slide'), 
		
		// imgs var that is calling the preloadImages(array, url) function
		imgs = preloadImages(
			// Array for your images
			[
				'cdmpicketfence.jpg',
				'cdmbelowstreetlevel.jpg',
				'cdmbigcorona.jpg',
				'cdmdowncoast.jpg'
			],
			'http://www.propertieswithstyle.com/css/images/'
		);
		
	function slideIt() {
		// Set the img element's source
		slider.src = imgs[step];

		// Incremenent the step variable
		step++;
		
		// if the array length equals the step number, then reset step back to 0
		if( imgs.length === step ) {
			step = 0;
		}

		setTimeout( 
			function() { 
				slideIt(); 
			}, 
			5000 
		);		
	}
	slideIt();			
</script>

All I am doing here, basically, is putting the requested images in an array, pre-loading the image, returning the revised array, globally, to the slideIt function.

By putting the requested images in a array, you lose calling var img1; img1 = new Image(), var img2; img2 = new Image(), etc., then you can put the image pre-loader in a function. You also get the benefit of utilizing the array.length property so you can avoid:

if (step<22)

By doing this:


if( array.length === step )
if( array.length < step )
if( array.length >= step )
//etc

I also am using an id for the HTML img tag since name is not a valid attribute as you are aware.


<img id="slide" />
slider = document.getElementById('slide');