0

jquery画像のスライドショーを背景として持つWebサイトを作成しています。スライドショーの上部にはナビゲーションバーがあり、画像が透けて見えるようにページの中央に空白の領域があり、スライドショーの下には下部があります。いくつかのコンテンツとフッター。Need Supplyの現在のウェブサイト（ http://needsupply.com/ ）に似ています。

私の主な難しさは、スライドショーの画像をクリック可能にしたいのですが、スライドショーはすべてのdiv（z-index：-1）の背後にあるため、メインコンテンツでカバーされているため、クリックをキャッチできません。 div（ページ、ヘッダー、フッター）。

スライドショーを単純なリンクされた画像に置き換えてみましたが、それでもクリックできないため、スライドショーのコードとは関係がないことがわかりました。

ここに画像の説明を入力してください

これが私のサイトの基本構造です：

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

どんな助けでも大歓迎です。私の側でさらに情報が必要な場合はお知らせください。

4

1 に答える 1

0

#pageラッパーを取り外して#content、#footer絶対に一番下に配置する必要があります。divそうすれば、画像のメインエリア（）をカバーすることがなくなり#slideshow、クリックできるようになります。#page、、#contentおよびsは#footer divクリックできないままになります。

于 2011-08-03T22:15:29.590 に答える