script not handling images

[Violet_82]

Hi there, I think I have made a mess of the site I am working on, and I was wondering if anybody can help me understand how to fix this issue (if it is an issue at all)
Basically on this page I have 14 pictures http://antobbo.webspace.virginmedia.com/petras/test/czech_republic.htm and my script at the moment is made to handle 14 pictures:

function no_javascript(){
    //thumbnails
    document.getElementById('thumbnail_1').style.display='block';
    document.getElementById('thumbnail_2').style.display='block';
    document.getElementById('thumbnail_3').style.display='block';
    document.getElementById('thumbnail_4').style.display='block';
    document.getElementById('thumbnail_5').style.display='block';
    document.getElementById('thumbnail_6').style.display='block';
    document.getElementById('thumbnail_7').style.display='block';
    document.getElementById('thumbnail_8').style.display='block';
    document.getElementById('thumbnail_9').style.display='block';
    document.getElementById('thumbnail_10').style.display='block';
    document.getElementById('thumbnail_11').style.display='block';
    document.getElementById('thumbnail_12').style.display='block';
    document.getElementById('thumbnail_13').style.display='block';
    document.getElementById('thumbnail_14').style.display='block';


    //big images
    document.getElementById('image1').style.display="none";
    document.getElementById('image2').style.display="none";
    document.getElementById('image3').style.display="none";
    document.getElementById('image4').style.display="none";
    document.getElementById('image5').style.display="none";
    document.getElementById('image6').style.display="none";
    document.getElementById('image7').style.display="none";
    document.getElementById('image8').style.display="none";
    document.getElementById('image9').style.display="none";
    document.getElementById('image10').style.display="none";
    document.getElementById('image11').style.display="none";
    document.getElementById('image12').style.display="none";
    document.getElementById('image13').style.display="none";
    document.getElementById('image14').style.display="none";


    //big images repositioning
    var big_images = document.getElementById('full_images');
    big_images.style.position = "fixed";
    big_images.style.margin = "-245px 0 0 -350px";
    big_images.style.display = "none";
    big_images.style.backgroundColor = "transparent";
    big_images.style.color = "white";
    //big_images.style.fontSize = "0.9em";

    /*var the_pic = document.getElementById('image_div');
    the_pic.style.position = "fixed";
    the_pic.style.display = "none";
    the_pic.style.margin = "-525px 0 0 170px";
    the_pic.style.color = "white";*/


    //descriptions
    var description1 = document.getElementById('description_1');
    var description2 = document.getElementById('description_2');
    var description3 = document.getElementById('description_3');
    var description4 = document.getElementById('description_4');
    var description5 = document.getElementById('description_5');
    var description6 = document.getElementById('description_6');
    var description7 = document.getElementById('description_7');
    var description8 = document.getElementById('description_8');
    var description9 = document.getElementById('description_9');
    var description10 = document.getElementById('description_10');
    var description11 = document.getElementById('description_11');
    var description12 = document.getElementById('description_12');
    var description13 = document.getElementById('description_13');
    var description14 = document.getElementById('description_14');


    description1.style.display = "none";
    description2.style.display = "none";
    description3.style.display = "none";
    description4.style.display = "none";
    description5.style.display = "none";
    description6.style.display = "none";
    description7.style.display = "none";
    description8.style.display = "none";
    description9.style.display = "none";
    description10.style.display = "none";
    description11.style.display = "none";
    description12.style.display = "none";
    description13.style.display = "none";
    description14.style.display = "none";


}

It all works fine, no problems at all. But, not all the page will have 14 pictures: some pages will have more some other pages less pictures. So say I have a page "B" with 25 pictures: I add extra code to the above script to handle 25 pictures but when my previous page (the one with 14 pictures) calls the script it will generate an error because it is looking for 14 pictures. So from picture 15 onwards it will return undefined. I have run a little experiment and added an extra line to the above code for a 15th picture, resulting with:

...
document.getElementById('thumbnail_14').style.display='block';
...
document.getElementById('image14').style.display="none";
...
var description15 = document.getElementById('description_15');
...
description15.style.display = "none";
...

This generates an error in the script, with the 15th picture being undefined...you can see where I am trying to get to.
Now, is my approach (above script) completely wrong? Do I have to rewrite the whole function function no_javascript() so that it can handle any number of pictures? If so what's your advice?
thanks

[Violet_82]

Sorry I meant

> ...
> document.getElementById('thumbnail_15').style.display='block';
> ...
> document.getElementById('image15').style.display="none";
> ...
> var description15 = document.getElementById('description_15');
> ...
> description15.style.display = "none";
> ...

[Violet_82]

just a quick line to say that I have fixed it. All I needed, I have discovered, for my script to handle images and descriptions properly were two lines of code:

    $('#image_div > img').css('display', 'none');
    $('#image_div > p').css('display', 'none')

so that the whole script now is:

function no_javascript(){
    //thumbnails
    document.getElementById('main_categories').style.display='block';

    //big images repositioning

    var big_images = document.getElementById('full_images');
    big_images.style.display = "none";
    //big_images.src.style.display = "none";
    big_images.style.position = "fixed";
    big_images.style.margin = "-245px 0 0 -350px";  
    big_images.style.backgroundColor = "transparent";
    big_images.style.color = "white";
    //big_images.style.fontSize = "0.9em";

    $('#image_div > img').css('display', 'none');
    $('#image_div > p').css('display', 'none');//these fixed all the issues : - )

}

I didn't know how to target the images inside the image_div