Rock a écrit :
Hi,
I want to create this..
A 2 col table with 3 rows down.
In the 1st col I want three thumb size images, 1 in each row
When an image is rolled on, the larger image shows up in col 2
is it difficult because you need to pre-charge all images
best way would to have all images on the page
some of then styled in invisible
<style type="text/css">
#visual img { position:absolute; visibility: hidden;}
img#bigest { position: relative }
#visual img.show { visibility: visible }
</style>
<script type="text/javascript">
function hidImages() {
var P = document.getElementById('visual').getElementsByTag Name('IMG');
for(var i=0;i<P.length;i++) P[i].className = '';
}
function showImage(pictIndex) {
var P = document.getElementById('visual').getElementsByTag Name('IMG');
P[pictIndex-1].className = 'show';
}
</script>
<table>
<tr>
<td>
<img src="thumb/p1.jpg"
onmouseover="showImage(1)" onmouseout="hidImages()">
<img src="thumb/p2.jpg"
onmouseover="showImage(2)" onmouseout="hidImages()">
<img src="thumb/p3.jpg"
onmouseover="showImage(3)" onmouseout="hidImages()">
</td>
<td id="visual">
<img src="photos/p1.jpg">
<img src="photos/p2.jpg" id="bigest">
<img src="photos/p3.jpg">
</td>
</tr>
</table>
in this example your bigest image would be photos/p2.jpg
and you give to it the id 'bigest'
to arrange size of the td to this size
--
Stephane Moriaux et son [moins] vieux Mac
