OK, well, it is sort of working. The display area's dimensions need to be a little larger to prevent that jumping around and the path to the initial image is wrong somehow. Yeah, where you have this:
Code:
<td width="85%" valign="top" align="left"><p align="left">
<a href="javascript:warp()"><img src="slide_4" name="targetimage" border=0></a>
</td>
It needs to be like this:
Code:
<td width="85%" valign="top" align="left"><p align="left">
<a href="javascript:warp()"><img src="slide_4.jpg" name="targetimage" border=0></a>
</td>
Give your table and <td> that display the images a height that is at least as high as the tallest image. That should work in IE but you may need to put a small transparent .gif in there as well (it can be like 1px by 1px) but, tell the browser that it is 1px wide and as tall as the tallest image. That would be (for your original link that is now working):
Code:
<td width="85%" height="410" valign="top" align="left"><p align="left"><img src="transparent.gif" width="1" height="400" border="0"><a href="javascript:warp()"><img src="slide_4.jpg" name="targetimage" border=0></a>
</td>
This is sometimes required for Mozilla as height on tables is often ignored.
Now, to use your thumbnails, where you have:
Code:
<p><a onMouseover="changeimage(myimages[1],this.href)" href="f15.htm"><light><font
face="Arial">Portrait</font></light></a></p>
Make it more like this:
Code:
<p><a onMouseover="changeimage(myimages[1],this.href)" href="f15.htm"><img src="thumb1.jpg" border="0"></a></p>
where thumb1.jpg is the path and name to the thumbnail for myimages[1].
Added Later:
P.S. I really like the artwork!
Bookmarks