こんにちは!以下のサイトのような両サイドの背景にリンクをつける方法を探しております。背景画像にリンクははれないということは理解していますが、なかなかうまく行かなく困っております。
http://theskateboardmag.com/
このサイトが完璧なんです!
よろしくお願いいたします。
よく分からないけどz-order低くしたwidth,height 100%のA要素作ればいいんじゃないの
こういうことだよ。#000のとこに背景いれてね。
<div style="overflow:hidden;width:100px;height:100%;background:#000;"> <a target="_blank" href="aaa.html" style="display:block;width:100%;height:100%;"> </a> </div>
マニアックな例ではJavaScriptでクリックされた座標を取得し特定範囲内であればページを移動する方法もある。
このサイトの背景画は、両サイドというより1枚絵ですね。海外のサイトではよくある広告のパターンです。ttp://theskateboardmag.com/wp-content/uploads/2014/04/Fallen-Skin.jpg
314行目が背景用DIVでDIVを縦横100%にして裏側に張っています。その中にAタグをおいて、Block要素にして、これも縦横100%で全面に貼る。
319行目からのソースが中央の記事のエリアのDIVにZ-indexで前面に来るようにして、そこは背景を塗る。そのの部分は背景のリンクは効きません。
サンプルが完璧っつーんなら これだね
①ブロック化したaタグに画像配置しoverflow:hiddenをかける。(IE8以下無視なら背景に設定)
②aタグの高さと幅はJSで動的に行う。画面の表示領域を取得し、サイトのコンテンツ幅を引き、2で割ると、片方のサイドの幅になる。高さは画面の表示領域の高さ。ウィンドウの幅を変更されるたびにJSの指示も変わるようにしておく。
③このaタグをposition で画面両サイドに設置。
これでサイト幅よりウィンドウが大きい場合に、その余白に画像を表示できるようになり、横スクロールもでない。
っていう案は思いついた、けどやってないっす。
皆様、返事が遅くなってすいません。質問者の者です!
皆様の意見を参考にしつつ、以下のソースで対応することが出来ました。ありがとうございます!
透明.pngを100%で表示して、cssを背景で指定して、ホバー時に少し白っぽくなるようにホバー時の20%透過.pngが表示されるようにしました。
ソースは以下です。
-html-<div id="bg-link"><a target="_blank" href="#"><img src="透明.png" width="100%" height="100%" /></a></div>
-css-#bg-link {width: 100%;height: 100%;position: fixed;top: 0;z-index: 0;cursor: pointer;background-image:url(表示する画像.jpg);background-attachment: fixed;background-origin: initial;background-clip: initial;background-position: 50% 0;background-repeat: no-repeat;}#bg-link a {width: 100%;height: 100%;display: block;}#bg-link a:hover img {background-image:url(ホバー時の20%透過.png); background-repeat: repeat;}
みんなの回答 6 件
よく分からないけどz-order低くしたwidth,height 100%のA要素作ればいいんじゃないの
こういうことだよ。
#000のとこに背景いれてね。
<div style="overflow:hidden;width:100px;height:100%;background:#000;"> <a target="_blank" href="aaa.html" style="display:block;width:100%;height:100%;"> </a> </div>
マニアックな例ではJavaScriptでクリックされた座標を取得し特定範囲内であればページを移動する方法もある。
このサイトの背景画は、両サイドというより1枚絵ですね。
海外のサイトではよくある広告のパターンです。
ttp://theskateboardmag.com/wp-content/uploads/2014/04/Fallen-Skin.jpg
314行目が背景用DIVでDIVを縦横100%にして裏側に張っています。その中に
Aタグをおいて、Block要素にして、これも縦横100%で全面に貼る。
319行目からのソースが中央の記事のエリアのDIVにZ-indexで前面に来るようにして、そこは背景を塗る。そのの部分は背景のリンクは効きません。
①ブロック化したaタグに画像配置しoverflow:hiddenをかける。(IE8以下無視なら背景に設定)
②aタグの高さと幅はJSで動的に行う。
画面の表示領域を取得し、サイトのコンテンツ幅を引き、2で割ると、片方のサイドの幅になる。
高さは画面の表示領域の高さ。
ウィンドウの幅を変更されるたびにJSの指示も変わるようにしておく。
③このaタグをposition で画面両サイドに設置。
これでサイト幅よりウィンドウが大きい場合に、その余白に画像を表示できるようになり、横スクロールもでない。
っていう案は思いついた、けどやってないっす。
皆様、返事が遅くなってすいません。
質問者の者です!
皆様の意見を参考にしつつ、以下のソースで対応することが出来ました。ありがとうございます!
透明.pngを100%で表示して、cssを背景で指定して、ホバー時に少し白っぽくなるようにホバー時の20%透過.pngが表示されるようにしました。
ソースは以下です。
-html-
<div id="bg-link"><a target="_blank" href="#"><img src="透明.png" width="100%" height="100%" /></a></div>
-css-
#bg-link {
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 0;
cursor: pointer;
background-image:url(表示する画像.jpg);
background-attachment: fixed;
background-origin: initial;
background-clip: initial;
background-position: 50% 0;
background-repeat: no-repeat;
}
#bg-link a {
width: 100%;
height: 100%;
display: block;
}
#bg-link a:hover img {
background-image:url(ホバー時の20%透過.png);
background-repeat: repeat;
}
関連するトピックス