Help with making a Clickable Background Slideshow
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开发者_如何学C slideshow code.
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.
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.
加载中,请稍侯......
精彩评论