幫助製作可點擊的背景幻燈片

我正在創建一個網站，其中有一個jQuery圖像幻燈片作爲背景，並且在幻燈片的頂部是導航欄，頁面中間的空白區域，以便圖像顯示通過，並在幻燈片下方的底部是一些內容和頁腳。類似Need Supply的當前網站（http://needsupply.com/）。幫助製作可點擊的背景幻燈片

我的主要困難是，我想讓幻燈片中的圖像可點擊，但由於幻燈片顯示在所有div（z-index：-1）的後面，因此它無法捕捉到任何點擊由我的主要內容divs（頁面，頁眉，頁腳）。

我試圖用一個簡單的鏈接圖像替換幻燈片，但仍然無法點擊，所以我知道這與幻燈片代碼無關。

enter image description here

這裏是我的網站的基本結構：

<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; 
}

任何幫助將不勝感激。讓我知道你是否需要我的更多信息。

來源

2011-08-03 justinl

如何將點擊處理程序委託給正文，然後過濾掉您不想處理的目標（即頭部，內容，頁腳等）的任何點擊。您始終可以觸發當前幻燈片的點擊事件。 – kinakuta

這是一個有趣的方法。我應該提到我正在尋找一種使用css和layout而不是腳本的解決方案。雖然如果沒有其他方法可以實現這一目標，那麼這是一個很好的開始。 – justinl

@kinakuta我有一個關於這種方法的問題，是當鼠標指針在你的建議方法的圖像區域上變成手形圖標嗎？ – justinl

你只需要刪除#page包裝和位置#content和#footer絕對在底部。這樣就不會有div覆蓋圖像的主要區域（#slideshow），所以你可以點擊它。 #page,#content和#footerdiv將保持不可點擊。

來源

2011-08-03 22:15:29 tw16

幫助製作可點擊的背景幻燈片

回答

相關問題