Stack images one above the other

I need to create a slideshow of images that wil开发者_C百科l be displayed when i click on their specific number from 1-5. But the problem that i am facing is that the images are being displayed one after the other. so if i hide image 1 and then display image 2, the image 2 is not getting displayed in the place of image 1, but is displayed below the image 1.

what is it that I am doing wrong?

You say: "the images are being displayed one after the other".

I assume they are in some container - a <div> maybe. Set the CSS property position: relative for this container, and set position: absolute; top: 0; left: 0 for the images. This will help you with the images being placed one after another - they will be stacked all in the same place.

In this state, they probably will look ugly (unless they all have the same size), so you should hide all but the one you want to show. Just define display: none as the default property of these images in the CSS sheet, and set the individual property of the displayed one to display: block (by JavaScript - it's very simple, you do not need jQuery, as pointed by Frog).

This is the basic way.

Now, if you want to do the task right, you should take care about the users who have JavaScript disabled (at least I would appreciate this ;-)

Define the default layout of the page so, that users without JavaScript would see all the images, one near another. You already have this.

Now, when your page is rendered in a browser where JavaScript works, let your script set a class on the container (I usually use the class "live"), and define another set of CSS rules to display the images in one place (that position: absolute and display: none), and check the first image as visible (for example give it a class "visible").

Now, when the user clicks on some kind of 'Next' button, your JavaScript needs only remove the class "visible" from the 'old' image, and set it in a 'new' image.

An example of HTML:

<div id="slideshow"><img ../><img ../></div>

and basic properties in CSS:

#slideshow { ... } /* noscript */
#slideshow.live {  /* script */
  position: relative;
  height: ..;
  width: ..;
}
#slideshow img { ... } /* noscript */
#slideshow.live img { /* script */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
#slideshow.live img.visible { /* script + choosen one */
  display: block;
}

I believe you will know how to write the JavaScript part.

Random guess : ( as I am unaware of what you have done ) Take only one <img> to dispaly all images and change src attribute to corresponding image when you click on numbers. Like

<img src="image1.gif"  width="32" height="32" />    

You can use Jquery to change src when clicked on numbers.

The images are being stacked in their normal order due to the fact that their position is currently either static or relative.

Assuming the images are contained within an element i.e.

<div id="slideshow">
    <img... />
    <img... />
    <img... />
    <img... />
</div>

You will need to set the #slideshow element to use relative positioning, and the images within absolute positioning.

#slideshow {
    position: relative;
}
    #slideshow img {
        display: block; // removes ugly gap on the bottom
        position: absolute; // the magic
        top: 0; left: 0; // positions in top left corner
    }