Home/ Questions/Q 6236285
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:49:37+00:00

I am creating a website that has a jquery image slideshow as the background,

  • 0

I am creating a website that has a jquery image slideshow as the background, and on top of the slideshow is a navigation bar, a blank area in the middle of the page so that the image shows through, and at the bottom underneath the slideshow is some content and a footer. Similar to Need Supply’s current website (http://needsupply.com/).

My main difficulty, is that I’d like to have the images in the slideshow clickable but since the slideshow is behind all of the divs (z-index: -1), it cannot catch any clicks since it’s being covered by my main content divs (page, header, footer).

I tried replacing the slideshow with a simple linked image but it still cannot be clicked, so I know it is not anything to do with the slideshow code.

enter image description here

Here is the basic structure of my site:

<body>
  <div id="slideshow">
    <a href="www.example.com /><img src="pic1.jpg"></a>
    <a href="www.example.com /><img src="pic2.jpg"></a>
    ....
  </div>

  <div id="page">
    <div id="header">My Header</div>
    <div id="content">Some Content</div>
    <div id="footer">My Footer</div>
  </div>

</body>

css:

#slideshow{
    width:100%;
    height: 620px;
    position: absolute;
    top:0;
    left:0;
    z-index:0;
}

#page{
    width: 980px;
    margin: 0 auto 2px auto;
}

Any help would be greatly appreciated. Let me know if you need any more information on my end.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just need to remove the #page wrapper and position #content and #footer absolutely at the bottom. That way there would be no div covering the main area of the images (#slideshow) and so you would be able to click it. The #page, #content and #footer divs would remain unclickable.

    • 0