2011-08-03 18 views
0

jquery画像スライドショーをバックグラウンドとするWebサイトを作成しています。スライドショーの上部にはナビゲーションバーがあり、ページの中央に空白があり、画像には、スライドショーの下の一番下にはコンテンツとフッターがあります。 Need Suppの現在のウェブサイト(http://needsupply.com/)と同様です。クリック可能な背景スライドショーの作成に関するヘルプ

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

私は、単純なリンクされた画像でスライドショーを交換しようとしたが、それはまだクリックできませんので、私はスライドショーコードとは何かを知っているではありません。ここで

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

任意の助けいただければ幸いです。あなたが私の最後について何か情報が必要な場合は教えてください。

+1

クリックハンドラーを本体に委任し、処理したくないターゲット(つまり、頭、コンテンツ、フッターなど)からのクリックを除外するのはどうでしょうか。現在のスライドにクリックイベントをいつでもトリガーできます。 – kinakuta

+0

これは面白いアプローチです。私は、スクリプトとは対照的に、CSSとレイアウトを使って解決策を探していると述べていたはずです。これを達成する他の方法がない場合、それは始めるのに良い場所です。 – justinl

+0

@kinakuta私がこのアプローチについて持っている1つの質問は、あなたの提案されたアプローチで画像領域上にマウスポインタが手のアイコンに変わるでしょうか? – justinl

答えて

0

#pageラッパーを削除し、#content#footerの位置を絶対に一番下にするだけで済みます。そうすれば、画像のメインエリア(#slideshow)をカバーするdivがなくなり、それをクリックすることができます。 #page,#contentおよび#footerdivは、クローキング不可能なままである。

関連する問題