Richard Cornford said:
RobB wrote:
<snip>
Currently there are no XHTML DOM implementations that support
document.write.
Richard.
Oops, busted. Miss it already. Here's another stab at it....
<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<!-- DEMO ONLY -->
<base href="
http://i.office.microsoft.com/i/0000/MR/" />
<!-- DEMO ONLY -->
<style type="text/css">
body {
font-size: 100%;
margin: 12px;
background: #456;
}
#container {
width: 468px;
margin: 10px auto;
}
#rotator1, #rotator2 {
float: left;
margin: 10px;
border-collapse: collapse;
border: 2px #fff dashed;
background: #fff;
}
#rotator1 td, #rotator2 td {
text-align: center;
padding: 3px;
margin: 0;
border: 1px #bbb dashed;
}
td a:link, td a:visited {
font: normal 60% "comic sans ms", sans-serif;
color: #000;
text-decoration: none;
}
td a:hover {
text-transform: uppercase;
}
td a img {
display: block;
padding: 0;
margin: 0;
border-width: 0;
}
</style>
<script type="text/javascript">
//<![CDATA[
/**********************************************/
var table_ids = [ 'rotator1' , 'rotator2' ];
/**********************************************/
var alldivs = document.getElementsByTagName('DIV');
function Rotator(table_id)
{
this.table = document.getElementById(table_id);
this.cells = this.table.getElementsByTagName('TD');
this.ncells = this.cells.length;
this.pix = [];
this.txt = [];
this.hrefs = [];
this.idx_array = new Array(this.ncells);
function read()
{
var cell, n = 0;
while (cell = this.cells.item(n++))
{
this.pix.push(cell.getElementsByTagName('IMG')[0].src);
this.txt.push(cell.getElementsByTagName('A')[0].lastChild.nodeValue);
this.hrefs.push(cell.getElementsByTagName('A')[0].href);
} this.shuffle();
}
this.read = read;
function shuffle()
{
var idx, i, ind1, ind2, temp;
for (i = 0; i < this.ncells; ++i)
this.idx_array
= i;
for (i = 0; i < this.ncells; ++i)
{
ind1 = Math.floor(Math.random() * this.ncells);
ind2 = Math.floor(Math.random() * this.ncells);
temp = this.idx_array[ind1];
this.idx_array[ind1] = this.idx_array[ind2];
this.idx_array[ind2] = temp;
} this.write();
}
this.shuffle = shuffle;
function write()
{
var cell, el, idx, n = 0;
while (cell = this.cells.item(n))
{
idx = this.idx_array[n++];
cell.getElementsByTagName('IMG')[0].src = this.pix[idx];
(el = cell.getElementsByTagName('A')[0]).lastChild.nodeValue =
this.txt[idx];
el.href = this.hrefs[idx];
} alldivs.item(0).style.visibility = 'visible';
}
this.write = write;
this.read();
}
onload = function()
{
if (document.getElementById && document.createElement)
for (var i = 0; i < table_ids.length; ++i)
new Rotator(table_ids);
}
/* demo only */
function dummy(link)
{
alert(link.href.toUpperCase().match(/[^#]*$/));
return false;
}
//]]>
</script>
</head>
<body>
<div id="container">
<script type="text/javascript">
//<![CDATA[
alldivs.item(0).style.visibility = 'hidden';
//]]>
</script>
<table id="rotator1">
<tbody>
<tr>
<td><a href="#displays" onclick="return dummy(this)">
<img src="j0399/j0399836.gif" />displays</a></td>
<td><a href="#diskette" onclick="return dummy(this)">
<img src="j0323/j0323552.gif" />diskette</a></td>
</tr><tr>
<td><a href="#floppies" onclick="return dummy(this)">
<img src="j0233/j0233109.gif" />floppies</a></td>
<td><a href="#monitor" onclick="return dummy(this)">
<img src="j0316/j0316344.gif" />monitor</a></td>
</tr><tr>
<td><a href="#mouse" onclick="return dummy(this)">
<img src="j0382/j0382582.gif" />mouse</a></td>
<td><a href="#dishes" onclick="return dummy(this)">
<img src="j0237/j0237779.gif" />dishes</a></td>
</tr><tr>
<td><a href="#cams" onclick="return dummy(this)">
<img src="j0396/j0396846.gif" />cams</a></td>
<td><a href="#pcs" onclick="return dummy(this)">
<img src="j0399/j0399981.gif" />pcs</a></td>
</tr><tr>
<td><a href="#birds" onclick="return dummy(this)">
<img src="j0198/j0198718.gif" />birds</a></td>
<td><a href="#recycle" onclick="return dummy(this)">
<img src="j0323/j0323582.gif" />recycle</a></td>
</tr>
</tbody>
</table>
<table id="rotator2">
<tbody>
<tr>
<td><a href="#kitty" onclick="return dummy(this)">
<img src="j0326/j0326434.gif" />kitty</a></td>
<td><a href="#kite" onclick="return dummy(this)">
<img src="j0231/j0231947.gif" />kite</a></td>
</tr><tr>
<td><a href="#telescope" onclick="return dummy(this)">
<img src="j0287/j0287221.gif" />telescope</a></td>
<td><a href="#keys" onclick="return dummy(this)">
<img src="j0287/j0287325.gif" />keys</a></td>
</tr><tr>
<td><a href="#earth" onclick="return dummy(this)">
<img src="j0400/j0400664.gif" />earth</a></td>
<td><a href="#choo-choo" onclick="return dummy(this)">
<img src="j0234/j0234231.gif" />choo-choo</a></td>
</tr><tr>
<td><a href="#bus" onclick="return dummy(this)">
<img src="j0395/j0395931.gif" />bus</a></td>
<td><a href="#bull" onclick="return dummy(this)">
<img src="j0318/j0318944.gif" />bull !</a></td>
</tr><tr>
<td><a href="#shot-put" onclick="return dummy(this)">
<img src="j0303/j0303464.gif" />shot-put</a></td>
<td><a href="#pointer" onclick="return dummy(this)">
<img src="j0281/j0281730.gif" />pointer</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>