Я создаю веб-сайт, на котором слайд-шоу с изображением jquery используется в качестве фона, а в верхней части слайд-шоу - панель навигации, пустая область в середине страницы, чтобы изображение просвечивало, а внизу внизуслайд-шоу - это некоторый контент и нижний колонтитул.Аналогично текущему веб-сайту Need Supply (http://needsupply.com/).
Моя основная трудность заключается в том, что я хочу, чтобы изображения в слайд-шоу были кликабельными, но поскольку слайд-шоу находится позади всех элементов div (z-index: -1), он не может поймать какие-либо клики, так как он покрывается моими основными элементами содержимого (страница, верхний колонтитул, нижний колонтитул).
Я попытался заменить слайд-шоу простым связанным изображением, но по-прежнему невозможно щелкнуть, поэтому язнаю, что это не имеет ничего общего с кодом слайд-шоу.
Вот основная структура моего сайта:
<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;
}
Любая помощь будет принята с благодарностью. Дайте мне знать, если вам нужна дополнительная информация о моем конце.