"handersonVA" <ha*********@hotmail.com> wrote in message
news:bpKif.23004$rB3.15657@dukeread02...
Hello,
I'd like to put small images around a big image, so when a small image is
clicked, that image is shown as a big image in the center.
how should I do that? I will use a table tag to organize the images, but
how can I make this thing happen?
How about something like this. Watch for word-wrap. Test as-is.
<html>
<head>
<title>36images.htm</title>
<script type="text/javascript">
var http = "http://www.net4tv.com/voice/graphics/printables/";
var img1 = "83_?_sm.jpg";
var img2 = "83_?.gif";
var lets = "abcdefghijklmnopqrstuvwxyz";
var tag1 = "<img src='" + http + img1 + "' border='0' width='52' height='52'
alt='?' style='cursor:pointer; cursor:hand' onclick='img.src=\"" + http +
img2 + "\"'>";
var tag2 = "<img src='" + http + img2.replace(/\?/,"letter_a") + "'
border='0' width='416' height='416' alt='' name='img'>";
var tags;
var what;
var e = 0;
var tabl = new Array();
tabl[e++] = "<table border='0' cellpadding='0' cellspacing='0'
width='522' style='border:solid 1px black'>";
tabl[e++] = "<caption><b>Click a character and see the center
change!</b></caption>";
tabl[e++] = "<tr>";
tabl[e++] = " <td colspan='3'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
tabl[e++] = " <tr>";
for (var i=8; i<18; i++) {
what = "letter_" + lets.substr(i,1);
tags = tag1.replace(/\?/g,what);
tabl[e++] = " <th>" + tags + "</th>";
}
tabl[e++] = " </tr>";
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = "</tr>";
tabl[e++] = "<tr>";
tabl[e++] = " <td width='52'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
for (var j=7; j>-1; j--) {
what = "letter_" + lets.substr(j,1);
tags = tag1.replace(/\?/g,what);
tabl[e++] = " <tr><th>" + tags + "</th></tr>";
}
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = " <td width='416'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
tabl[e++] = " <tr><th style='border:solid 1px black'>" + tag2 +
"</th></tr>";
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = " <td width='52'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
for (var k=18; k<26; k++) {
what = "letter_" + lets.substr(k,1);
tags = tag1.replace(/\?/g,what);
tabl[e++] = " <tr><th>" + tags + "</th></tr>";
}
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = "</tr>";
tabl[e++] = "<tr>";
tabl[e++] = " <td colspan='3'>";
tabl[e++] = " <table border='0' cellpadding='0' cellspacing='0'>";
tabl[e++] = " <tr>";
for (var l=0; l<10; l++) {
what = "number_" + l;
tags = tag1.replace(/\?/g,what);
tabl[e++] = " <th>" + tags + "</th>";
}
tabl[e++] = " </tr>";
tabl[e++] = " </table>";
tabl[e++] = " </td>";
tabl[e++] = "</tr>";
tabl[e++] = "</table>";
document.write(tabl.join("\n"));
</script>
</head>
<body>
</body>
</html>
I know that the dimensions of the images are not the actual.