Help with making a Clickable Background Slideshow

Question

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.

What about delegating your click handler to the body, then just filtering out any clicks that came from targets you don't want to process, i.e. the head, content, footer, whatever. You can always trigger a click event to the current slide. — kinakuta, Aug 03 '11 at 20:29
that's an interesting approach. I should have mentioned that I'm looking for a solution using css and layout as opposed to script. Although if there are no other ways to achieve this then that's a good place to start. — justinl, Aug 03 '11 at 20:37
@kinakuta one question I have about this approach, is would the mouse pointer turn into the hand icon when over the image area with your suggested approach? — justinl, Aug 03 '11 at 20:40
you can control the mouse pointer through css to look like whatever you wish using the cursor: style. So if it's over something you want to look like it's clickable, you can set cursor: pointer; — kinakuta, Aug 03 '11 at 21:12
Just remove `#page` and position `#content` and `#footer` absolutely at the bottom. That way there would be no `div` covering the main area of the images and therefore clicking should be fine. `#page` `#content` and `#footer` would remain unclickable. — tw16, Aug 03 '11 at 21:13
@tw16. That seems to accomplish what I need! Post as an official answer and I'll accept it. — justinl, Aug 03 '11 at 22:12
A quick bit on it being unclickable in the header, just add `pointer-events: none;` to the css for it. — ayyp, Aug 03 '11 at 22:21
@Andrew Thanks for that tip. I did consider using pointer-events but I have links in the header and they become unclickable as well when I use pointer-events. For others this may be a viable solution though :) — justinl, Aug 03 '11 at 22:27
@justinl If all the links in your header are in one container(i.e a `nav` or such) then you can just add `pointer-events: auto;` to that container's styling. — ayyp, Aug 03 '11 at 22:30

score 0 · Accepted Answer · answered Aug 03 '11 at 22:15

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.

Help with making a Clickable Background Slideshow

1 Answers1