javascript might be messing up an image border rollover

ok, heres the deal... i (not knowing javascript very well, and being self taught (a bad sign) in a night (a worse sign)) managed to hack out the code for a thumbnail gallery much like you would normally code with php... i did this because the site i am making is hosted on a school server that doesn't allow php (damn luddites)

here's the test posting of the site:
http://www.geocities.com/wide_area_intelligence_project/
the issues here are on the page you reach by clicking an image in the gallery

so anyway, the gallery has an array of strings backing its implementation that looks like this:

...[image filepath][thumbnail filepath][title][caption]...

now at the bottom of the viewer page i made a little row of the thumbnails of the 2 previous, the current, and the 2 next thumbnails. thumbnails have a maximum hieght/width of 100pixels

my problem is threefold

1) if I give each image a border, I cannot make it rollover, using rollover css that works other places
2) if I try to make the entire table cell a rollover, like i have done elsewhere, it won't take effect
3) this one's just annoying, when there is no image in a certain position. the table shifts a bit, and i don't know why


<tr>
<td width = 100>&nbsp;</td>
<td width = 100 valign = center align = center>
<script language="JavaScript" type="text/javascript"><!--
if(currentPic +8 < galleryData.length)
{
document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + (currentPic +8) + '"><img src= " ' + getGalleryData(currentPic +8+1) + ' " border = 0 ></a>')
}
else
{
document.write(' &nbsp; ')
}
//--></script>
</td>

<td width = 100 valign = center align = center>
<script language="JavaScript" type="text/javascript"><!--
if(currentPic +4 < galleryData.length)
{
document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + (currentPic +4) + '"><img src= " ' + getGalleryData(currentPic +4+1) + ' " border = 0 ></a>')
}
else
{
document.write(' &nbsp; ')
}
//--></script>
</td>

<td width = 100 valign = center align = center>
<script language="JavaScript" type="text/javascript"><!--
document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + currentPic + '"><img src= " ' + getGalleryData(currentPic+1) + ' " border = 2 ></a>')
//--></script>
</td>

<td width = 100 valign = center align = center>
<script language="JavaScript" type="text/javascript"><!--
if(currentPic -4 >=0)
{
document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + (currentPic -4) + '"><img src= " ' + getGalleryData(currentPic -4+1) + ' " border = 0></a>')
}
else
{
document.write(' &nbsp; ')
}
//--></script>
</td>

<td width = 100 valign = center align = center>
<script language="JavaScript" type="text/javascript"><!--
if(currentPic -8 >=0)
{
document.write('<a href = " viewpic.html?first_num=' + firstnum + ':pic_num=' + (currentPic -8) + '"><img src= " ' + getGalleryData(currentPic -8+1) + ' " border = 0 ></a>')
}
else
{
document.write(' &nbsp; ')
}
//--></script>
</td>
<td width = 100>&nbsp;</td>
</tr>


how can i implement the highlighting i did on the central thumbnail as a rollover effect?

also, any other suggestions on design or implementation would be welcome

well, in my experience, any image that does explicitly have it's Border attribute set in the html won't be effected by any css declarations, period. so that's probably step 1.

second, although this isn't related to your problem, i'd suggest an alternative approach in the layout of your table. i'd change it so that it's static html, instead of being dynamicly document.written() as run time. i'd have the all images in the table be some transparent gif, and give them a css class of "thumbnail" or something. then, i'd make school of some old school javascript that's not real popular anymore, called the document.images collection, which is just what it seems: a collection of every image on the page. it's not an array, but for most practical purposes, it acts like one, so you can plow through it with a for-loop, search for images that have a className property set to "thumbnail", and set their source appropriately that way. that would make the source easier to interpret (no dynamic content to be muddled through), and it would also make the page load faster (don't have to wait for the JS to download before the page is rendered). just a thought.

well, the js is tiny, so i don't think thats a major problem.. i realized that i didn't compensate for cell spacing in my defined widths, so the spacing now works...
the only issue is making the table cell chang color... i guess this is now a css question, and no longer javascript, so ill not ask for anymore help on this section