クリックすると体の背景画像を作成するための解決策を見つけようとしました。ボディーの背景画像Clickable
私はここでstackoverflowでいくつかの同様の質問/回答を見つけることができましたが、私はそれらをどのように適用するか分かりません。
これまでのところ、以下のコードが役立つかもしれませんが、私のウェブサイトでどのように使用するのか分かりません。
$('body').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
誰かが007soccerpicks.comでこれをどのように機能させることができますか？ウェブサイトのコンテンツエリアである<div id="container">を除いて、私はボディの背景イメージをクリック可能にする必要があります。
ありがとうございました！
設定したスクリプトはbody要素の中にラップされている場合はドキュメント全体をクリックします。これを回避する方法の1つは、別のラッパーのボディロジックを使用して、バックグラウンドで固定要素を使用することです。
<body>
<div class="body-clickable"></div>
<div class="main-content">
</div>
</body>
<style>
.body-clickable
{
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: url('image.png');
}
.main-content {
margin: 0 auto;
width: 1000px;
top: 0;
left: 0;
position: relative;
z-index: 2;
}
</style>
<script>
$('.body-clickable').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
</script>
また、スクリプトの使用を避けて、実際には「body-clickable」リンクを作成することもできます。
#box-link {
\t \t position: absolute;
\t \t top: 8px;
\t \t left: 20px;
\t \t width: 83px;
\t \t height: 83px;
\t \t background-color: transparent;
\t \t border: 1px solid yellow; } \t
.box1 {
\t \t position: relative;
\t \t margin: 20px 0 20px 40px;
\t \t padding: 5px 0; width: 300px;
\t \t height: 300px;
\t \t background-image: url('https://lh3.googleusercontent.com/-Y8Qx-xfqufE/VOIccUtbhpI/AAAAAAAABDI/x5lTXX_Zlrs/s2048/cool-and-stylish-girls-wallpapers-for-fb-cool-and-stylish-girls-with-guitar-6413-sadredheartlovequotesforfacebooktimelinecoverx.jpg');
\t \t background-repeat: no-repeat;
\t \t }
\t \t<body>
<div class="box1">
\t \t <a id="box-link" href="https://www.facebook.com/"></a>
\t \t <p>The background of this box is an image.</p>
\t \t </div>
</body>
あなたは天才です！これはありがとうございます！私はあなたから提供されたコードでそれを行うことができ、スクリプトを単純な "a href"に置き換えました。あなたは命の恩人です！ – AXLwarrior
問題ありません！お役に立てて嬉しいです！ – Bri