?

Log in

No account? Create an account
Previous Entry Share Next Entry
JavaScript Image Rotation Issues
Grr
captainblue wrote in webdesign
I've been using a bit of script that loads a random image, URL and text into a page each time the page is loaded.

This seems to work fine for up to 15 images/arrays, but over that, it starts to complain that:
"Error: 'image.href' is null or not an object"

Here's the code:
function create() {
        this.width = ''
        this.height = ''
        this.src = ''
        this.href = ''
        this.border = ''
        this.mouseover = ''
        this.sponsor = ''
}
scs = new Array()
for(var i=1; i<=19; i++) { scs[i] = new create() }

scs[1].width = "437"
scs[1].height = "292"
scs[1].src = "images/splash/Ritz.jpg"
scs[1].href = "http://www.theritzlondon.com/"
scs[1].border = "0"
scs[1].mouseover = "Click here to visit The Ritz"
scs[1].sponsor = "The Ritz"

scs[2].width = "400"
scs[2].height = "316"
scs[2].src = "images/splash/nhac.jpg"
scs[2].href = "http://www.nh-hotels.com/portal/page?_pageid=9,424&_dad=porweb&_schema=PORTAL30"
scs[2].border = "0"
scs[2].mouseover = "Click here to visit NH Hoteles"
scs[2].sponsor = "NH Hoteles - The Amsterdam Centre Hotel"

scs[3].width = "400"
scs[3].height = "266"
scs[3].src = "images/splash/nhcc.jpg"
scs[3].href = "http://www.nh-hotels.com/portal/page?_pageid=9,424&_dad=porweb&_schema=PORTAL30"
scs[3].border = "0"
scs[3].mouseover = "Click here to visit NH Hoteles"
scs[3].sponsor = "NH Hoteles - The City Centre Hotel"

scs[4].width = "400"
scs[4].height = "316"
scs[4].src = "images/splash/nhdh.jpg"
scs[4].href = "http://www.nh-hotels.com/portal/page?_pageid=9,424&_dad=porweb&_schema=PORTAL30"
scs[4].border = "0"
scs[4].mouseover = "Click here to visit NH Hoteles"
scs[4].sponsor = "NH Hoteles - The Doelen Hotel"

scs[5].width = "318"
scs[5].height = "400"
scs[5].src = "images/splash/nhghk.jpg"
scs[5].href = "http://www.nh-hotels.com/portal/page?_pageid=9,424&_dad=porweb&_schema=PORTAL30"
scs[5].border = "0"
scs[5].mouseover = "Click here to visit NH Hoteles"
scs[5].sponsor = "NH Hoteles - The Grand Hotel Krasnapolsky"

scs[6].width = "400"
scs[6].height = "319"
scs[6].src = "images/splash/nhsh.jpg"
scs[6].href = "http://www.nh-hotels.com/portal/page?_pageid=9,424&_dad=porweb&_schema=PORTAL30"
scs[6].border = "0"
scs[6].mouseover = "Click here to visit NH Hoteles"
scs[6].sponsor = "NH Hoteles - The Schiller Hotel"

scs[7].width = "400"
scs[7].height = "320"
scs[7].src = "images/splash/hch.jpg"
scs[7].href = "http://www.hastingshotels.com"
scs[7].border = "0"
scs[7].mouseover = "Click here to visit Hastings Hotels"
scs[7].sponsor = "The Hastings Culloden Hotel"

scs[8].width = "400"
scs[8].height = "369"
scs[8].src = "images/splash/hmb.jpg"
scs[8].href = "http://www.hotelmajestic.es"
scs[8].border = "0"
scs[8].mouseover = "Click here to visit the Hotel Majestic Barcelona"
scs[8].sponsor = "The Hotel Majestic Barcelona"

scs[9].width = "400"
scs[9].height = "422"
scs[9].src = "images/splash/hi.jpg"
scs[9].href = "http://www.hotel-inglaterra.com"
scs[9].border = "0"
scs[9].mouseover = "Click here to visit the Hotel Inglaterra"
scs[9].sponsor = "The Hotel Inglaterra"

scs[10].width = "400"
scs[10].height = "275"
scs[10].src = "images/splash/hlb.jpg"
scs[10].href = "http://www.lebristolparis.com"
scs[10].border = "0"
scs[10].mouseover = "Click here to visit the Hotel Le Bristol"
scs[10].sponsor = "The Hotel Le Bristol, Paris"

scs[11].width = "400"
scs[11].height = "403"
scs[11].src = "images/splash/hmraa.jpg"
scs[11].href = "http://www.solmelia.com"
scs[11].border = "0"
scs[11].mouseover = "Click here to visit the Hotel Melia Roma Aurelia Antica"
scs[11].sponsor = "The Hotel Melia Roma Aurelia Antica"

scs[12].width = "300"
scs[12].height = "414"
scs[12].src = "images/splash/h71.jpg"
scs[12].href = "http://www.hotel71.com"
scs[12].border = "0"
scs[12].mouseover = "Click here to visit Hotel 71"
scs[12].sponsor = "Hotel 71, Chicago"

scs[13].width = "267"
scs[13].height = "339"
scs[13].src = "images/splash/ebhih.jpg"
scs[13].href = "http://www.hiexpresshammersmith.co.uk/"
scs[13].border = "0"
scs[13].mouseover = "Click here to visit Somerston Hotels - Express by Holiday Inn Hammersmith"
scs[13].sponsor = "Somerston Hotels - Express by Holiday Inn Hammersmith"

scs[14].width = "435"
scs[14].height = "336"
scs[14].src = "images/splash/rg.jpg"
scs[14].href = "http://www.royalgardenhotel.co.uk/"
scs[14].border = "0"
scs[14].mouseover = "Click here to visit the Royal Garden Hotel"
scs[14].sponsor = "The Royal Garden Hotel"

scs[15].width = "440"
scs[15].height = "320"
scs[15].src = "images/splash/cml.jpg"
scs[15].href = "http://www.lucienbarriere.com/localized/en/portail/hotels/nos_etablissements/castel_marie_louise/index.asp?choix_1=la_baule&choix_2=castel_marie_louise"
scs[15].border = "0"
scs[15].mouseover = "Click here to visit the Lucien Barriere, Castel Marie-Louise"
scs[15].sponsor = "Lucien Barriere, Castel Marie-Louise"

scs[16].width = "435"
scs[16].height = "336"
scs[16].src = "images/splash/hb.jpg"
scs[16].href = "http://www.lucienbarriere.com/localized/en/portail/hotels/nos_etablissements/hermitage/index.asp?choix_1=la_baule&choix_2=hermitage"
scs[16].border = "0"
scs[16].mouseover = "Click here to visit the Lucien Barriere, Hermitage Barriere"
scs[16].sponsor = "Lucien Barriere, Hermitage Barriere"

scs[17].width = "435"
scs[17].height = "336"
scs[17].src = "images/splash/hb.jpg"
scs[17].href = "http://www.lucienbarriere.com/localized/en/portail/hotels/nos_etablissements/hermitage/index.asp?choix_1=la_baule&choix_2=hermitage"
scs[17].border = "0"
scs[17].mouseover = "Click here to visit the Lucien Barriere, Hermitage Barriere"
scs[17].sponsor = "Lucien Barriere, Hermitage Barriere"

scs[18].width = "435"
scs[18].height = "336"
scs[18].src = "images/splash/hb.jpg"
scs[18].href = "http://www.lucienbarriere.com/localized/en/portail/hotels/nos_etablissements/hermitage/index.asp?choix_1=la_baule&choix_2=hermitage"
scs[18].border = "0"
scs[18].mouseover = "Click here to visit the Lucien Barriere, Hermitage Barriere"
scs[18].sponsor = "Lucien Barriere, Hermitage Barriere"

scs[19].width = "435"
scs[19].height = "336"
scs[19].src = "images/splash/hb.jpg"
scs[19].href = "http://www.lucienbarriere.com/localized/en/portail/hotels/nos_etablissements/hermitage/index.asp?choix_1=la_baule&choix_2=hermitage"
scs[19].border = "0"
scs[19].mouseover = "Click here to visit the Lucien Barriere, Hermitage Barriere"
scs[19].sponsor = "Lucien Barriere, Hermitage Barriere"

var n = Math.random() + ''
n = parseInt(n.charAt(19))
if(n >19) {
        n = n - 19
}
else if(n==0) {
        n = n + 19
}
n += ""

var image = scs[n]
var sc = ""
sc += '<a target=_blank href="' + image.href + '" \n'
sc += 'onMouseOver="self.status=\'' + image.mouseover + '\'\;return true" \n'
sc += 'onMouseOut="self.status=\'\'"> \n'
sc += '<img src="' + image.src + '" width=' + image.width
sc += '\n height=' + image.height + ' border=' + image.border 
sc += '\n><br><br><br> ' + image.sponsor + '</a>'


The script is loaded from the head as an external .js file and called in the body as this:
<script language="JavaScript">
<!-- hiding this script
document.write(sc)
// -->
</script>

Any ideas why it starts failing after 15 arrays? I've tried 'easier' URLs and different images to no avail.

I've also tried a different script within the body since, but this one rotates the images all the time and too quickly. Any ideas on how to slow it down so that the images are changed say every 20 seconds (20000 milliseconds)? I've tried some setTimeouts in various places but can't seem to slow it down. Code:

<script language="Javascript">
		var currentdate = 0;
		var core = 0;
		
		function initArray() {

		this.length = initArray.arguments.length;
		  for (var i = 0; i < this.length; i++) {
		  this[i] = initArray.arguments[i];
		  }
		}
		
		link = new initArray(
		"http://www.theritzlondon.com/",
		"http://www.nh-hotels.com/portal/page?_pageid=9,424&_dad=porweb&_schema=PORTAL30",
		"http://www.nh-hotels.com/portal/page?_pageid=9,424&_dad=porweb&_schema=PORTAL30"
		);

		image = new initArray(
		"images/splash/Ritz.jpg",
		"images/splash/nhac.jpg",
		"images/splash/nhcc.jpg"
		);

		text = new initArray(
		"The Ritz",
		"NH Hoteles - The Amsterdam Centre Hotel",
		"NH Hoteles - The City Centre Hotel"
		);

		width = new initArray(
		"437",
		"400",
		"400"
		);

		height = new initArray(
		"292",
		"316",
		"266"
		);

		var currentdate = new Date();
		var core = currentdate.getSeconds()%image.length;
		
		var ranlink  = link[core];
		var ranimage = image[core];
		var rantext  = text[core];
		var ranwidth = width [core];
		var ranheight = height [core];
		
		document.write('<a href=\"' +ranlink+ '\"><img src=\"'+ranimage+'\" width=\"'+ranwidth+'\" width=\"'+ranheight+'\" border="0" alt=\"'+rantext+'\"><br>\"'+rantext+'\"</a>');
		
</SCRIPT>


[edit]Actually, that's very interesting: if you put the second image change script into a page on its own, it displays just the one image and doesn't reload every second or at all.

In the page in question, it looks like it's going into a constant loop no doubt caused by the menu javascript files that are loaded as well.

  • 1
oof, that's nasty. I always do that sort of thing with a database. But then I do *everything* with a database :)

as you well know.

LOL! Yes, indeed. As usual, this started with a half dozen images which is fine. But it's grewed and grewed as usual...

First of all, try some JSON (JavaScript Object Notation) to make things easier:

scs = [ {width: 437, height: 292, border: 0, 
         src: "images/splash/Ritz.jpg",
         href: "http://www.theritzlondon.com/",
         mouseover: "Click here to visit The Ritz",
         mouseout: "The Ritz"},
        {...another entry...},
        {...another entry...},

        ...

        {...a final entry...}
      ];


(an object looks like {property: value, property: value, ... , property: value})

(an array looks like [value, value, ... , value, value])

This creates an array [ , , , ] of objects {} so hence it looks like [ {}, {}, {}, {}, ..., {}, {}]

Also, arrays are indexed starting at 0, so scs[0] is the first element in the scs array.

To make a random number, just use Math.random(); as below:

max = length(scs); // no larger than the size of scs
n = Math.floor(Math.random() * max);


Math.random() is between 0 and 1, so multiplying by max gives a number between 0 and max. Flooring this number makes it an integer between 0 and max - 1, which is exactly what we want for an array of size max. (max - 1, since the first index is 0).

That should fix your first script.

To get stuff to rotate without reloading the page, you'll have to look at more advanced JavaScript. Use google to find out about setTimeout, clearTimeout, innerHTML, the document object model, createNode, removeNode, etc.

Also there's no need to do something like:

	var ranlink  = link[core];
	var ranimage = image[core];
	var rantext  = text[core];
	var ranwidth = width [core];
	var ranheight = height [core];


Just use that directly in the next line, for example:

document.write( link[core] + " " + image[core] );

Thanks for that: I'll have to have a play when I can get some time early in the New Year.

  • 1