-
ID:Rtc.yW さんの質問

こんにちは!
以下のサイトのような両サイドの背景にリンクをつける方法を探しております。
背景画像にリンクははれないということは理解していますが、なかなかうまく行かなく困っております。

http://theskateboardmag.com/

このサイトが完璧なんです!

よろしくお願いいたします。

みんなの回答 6 件

ID:xRvxJL さんの回答

よく分からないけどz-order低くしたwidth,height 100%のA要素作ればいいんじゃないの

ID:PZkUSA さんの回答

こういうことだよ。
#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>

ID:umfjRj さんの回答

マニアックな例ではJavaScriptでクリックされた座標を取得し特定範囲内であればページを移動する方法もある。

ID:/GquhD さんの回答

このサイトの背景画は、両サイドというより1枚絵ですね。
海外のサイトではよくある広告のパターンです。
ttp://theskateboardmag.com/wp-content/uploads/2014/04/Fallen-Skin.jpg

314行目が背景用DIVでDIVを縦横100%にして裏側に張っています。その中に
Aタグをおいて、Block要素にして、これも縦横100%で全面に貼る。

319行目からのソースが中央の記事のエリアのDIVにZ-indexで前面に来るようにして、そこは背景を塗る。そのの部分は背景のリンクは効きません。

ID:hWSDF6

サンプルが完璧っつーんなら これだね

ID:nWsyb8 さんの回答

①ブロック化したaタグに画像配置しoverflow:hiddenをかける。(IE8以下無視なら背景に設定)

②aタグの高さと幅はJSで動的に行う。
画面の表示領域を取得し、サイトのコンテンツ幅を引き、2で割ると、片方のサイドの幅になる。
高さは画面の表示領域の高さ。
ウィンドウの幅を変更されるたびにJSの指示も変わるようにしておく。

③このaタグをposition で画面両サイドに設置。

これでサイト幅よりウィンドウが大きい場合に、その余白に画像を表示できるようになり、横スクロールもでない。

っていう案は思いついた、けどやってないっす。

ID:Rtc.yW さんの回答

皆様、返事が遅くなってすいません。
質問者の者です!

皆様の意見を参考にしつつ、以下のソースで対応することが出来ました。ありがとうございます!

透明.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;
}

最終更新日:2014-04-30 (6,749 views)

関連するトピックス

ページ上部に戻る