Javascript image randomizer with rollover sets

webbtrad · Apr 12, 2005

Hello,

I am looking for a javascript that will:

1 - Allow random images (say 5) to generate in a table cell on page refresh.
2 - Allow each of those images to be a rollover set. For example: Image 1 will have img1off and img1on with its own link onClick.
3 - Repeat this in twenty one table cells on the same page.

The above is for an image matrix that needs to have random (could be sequential and loop) image placement and each image will rollover with a link.

So any suggestions on pre-existing scripts, or tools, that will do the above. I have dabbled with programming; however,am by no means competent in custom scripting. Any help greatly appreciated. Thanks!

Paul Harris.

BabyJeffy · Apr 12, 2005

The folowing Javascript functions (and the array definition) should do what you want (in conjuntion with the HTML supplied):

Code:

<script type="text/javascript">
<!--
var iArr =
[
	['images/img1.jpg','images/img1off.jpg','[URL unfurl="true"]http://www.google.com'[/URL]],
	['images/img2.jpg','images/img2off.jpg','[URL unfurl="true"]http://www.yahoo.com'[/URL]],
	['images/img3.jpg','images/img3off.jpg','[URL unfurl="true"]http://www.askjeeves.com'[/URL]]
];
function initialiseTable() {
	var myImages = document.getElementsByTagName('img');
	for (var loop=0; loop<myImages.length; loop++) {
		if (myImages[loop].className == 'randomise') {
			var _Num = Math.floor(Math.random()*1000)%iArr.length;
			myImages[loop].id = 'randomisedID' + loop;
			myImages[loop].onstate = iArr[_Num][0];
			myImages[loop].offstate = iArr[_Num][1];
			myImages[loop].src = iArr[_Num][1];
			myImages[loop].link = iArr[_Num][2];
			myImages[loop].onmouseover = rollOn;
			myImages[loop].onmouseout = rollOff;
			myImages[loop].onclick = clickImg;
		}
	}
}
function rollOn() {
	this.src = this.onstate;
}
function rollOff() {
	this.src = this.offstate;
}
function clickImg() {
	window.open(this.link,this.id,'');
}
//-->
</script>

And the corresponding HTML (note the onload call to the Javascript function):

Code:

<body [COLOR=red]onload="initialiseTable()"[/color]>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
	<td><img src="" class="randomise" /></td>
	<td><img src="" class="randomise" /></td>
	<td><img src="" class="randomise" /></td>
</tr>
<tr>
	<td><img src="" class="randomise" /></td>
	<td><img src="" class="randomise" /></td>
	<td><img src="" class="randomise" /></td>
</tr>
<tr>
	<td><img src="" class="randomise" /></td>
	<td><img src="" class="randomise" /></td>
	<td><img src="" class="randomise" /></td>
</tr>
</table>
</body>

You might also add a style like the following:

Code:

<style type="text/css">
.randomise {
	width:100px;
	height:40px;
	border:0px;
}
</style>

Basically all you need to do is assign the class of "randomise" to any image that you want to become a "randomising clicking image with rollovers".

Those are all the bits to the puzzle... see if you can make them all fit!

Cheers,
Jeff

webbtrad · Apr 12, 2005

BabyJeffy,

Thank you very much for this code. It works like a charm in IE5. I haven't tested it in any other browsers but it's great.

Paul Harris

webbtrad · Apr 12, 2005

Jeff,

One other question. How do I assign different classes for let's say different image sizes throughout my tables. Thanks.

Paul

BabyJeffy · Apr 13, 2005

You can just add in extra classes by seperating them by a space:

Code:

<img src="" class="randomise aClass anotherClass" />

Cheers,
Jeff

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript image randomizer with rollover sets

webbtrad

Technical User

BabyJeffy

Programmer

webbtrad

Technical User

webbtrad

Technical User

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor