ボックス内すべてのリンクって、わりかし要望あると思いませんか？

でも普通のやりかたじゃぁダメなんですよねぇ～
CSSとHTMLタグでがんばってコーディングしちゃうと、できたとしてもマークアップ的にはNGになってしまう。。
もっといいやり方ないんかな？と探していると、やっぱりありました。
インターネットってすばらしいですね？

ボックス全体をリンクにしたい
redline
（上記の方法はJavascriptを使用します。）
作者さまありがとうございます。
元ネタはほかの方ですが、私はJqueryを使用する「Red様」のコードで実装してみました。

まずHTMLのheadの中に以下を加えます。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
	var linkboxes = $(".linkbox");
		for (var i=0; i<linkboxes.length; i++){
		var readmores = $("p.readmore");
		for (var j=0; j<readmores.length; j++){
			$(".linkbox").click(function() {
				var anchorTags = this.getElementsByTagName("a");
				window.location = anchorTags[0].href;
			});
		}
	}
	$("p.readmore").addClass("none");
	$(".linkbox").hover(function(){
		$(this).addClass("box_hover");
		},
		function(){
		$(this).removeClass("box_hover");
	});
});
-->
</script>

次にCSS側でボックスの装飾をします。
上のJavascript内でボックスのクラスは「linkbox」
リンク先が記させたpタグのクラスは「readmore」
ボックス上にHoverさせた時は「box_hover」

となっているので、それを使って装飾・・・・

.linkbox{
	background:url(../images/menu_btn_bg.jpg) repeat-x bottom #e4fbd9;
	color:#333;
	padding:10px 10px 0;
	margin:0 0 15px;
	border:1px solid #ccc;
	border-bottom:1px solid #999;
	border-right:1px solid #999;
	width:580px;
}
.box_hover{
	background:#eeeeee;
	cursor:pointer;
}
.none{
	text-indent:-9999px;
	height:0px;
	overflow:hidden;
}
.linkbox h5{
	color:#3c2f13;
	font-size:1.8em;
	margin:0 0 5px;
	padding:0;
	font-weight:bold;
.linkbox p{
	letter-spacing:0.01em;
}
.linkbox p.floatL{
	float:left;
	margin:0 20px 0 0;
	padding:0;
}

で実際のHTMLコードはこんな感じになります。

<div class="linkbox">
        <p class="floatL"><img src="images/noimg_s.jpg" alt="no-image" width="120" height="80" /></p>
        <h5>Nail</h5>
        <p>内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。</p>
        <p class="readmore Clear"><a href="#">リンクはこちら</a></p>
 </div>

見事！マウスオーバーもきれいに決まり、ソースもきれい。

Javascriptを切っている方は、

<p class="readmore Clear"><a href="#">リンクはこちら</a></p>

の部分が表示され、ここからリンク先に飛べる仕組みです。
ボックス全体にかけているリンクは切れますが、表示も大幅に崩れることがなく、リンク先も死にません。

タグ:, , , , , , , ,

関連する投稿