10-08-23
指定の要素にリンクを設定できる「Biggerlink」
demo
オッのコンボ
「起きあがり子坊師⇒起きの小法師⇒おきっのこぼう⇒オッのコンボ」だそうです。
memo
作業内容
box全体にリンクを適用させる場合、divをaタグで括るわけにいかないので苦労するわけですが、そんな苦労を解消してくれるBiggerlinkてのがあったので試してみます。指定の要素にリンクを設定することが可能です。
--- jQuery設定 ---
<script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/100823/jquery.biggerlink.js"></script>
<script type="text/javascript">
$(function(){
$('.test1').biggerlink(); //リンクを適用させる要素（ここではクラス名）
});
</script>
--- html設定 ---
<div class="test1">
<div id="test2">
<a href="http://otani-webs.com/blog/2010/06/satsuma-god/" target="_blank">
<img src="img/100823/1.jpg" width="193" height="123" alt="オッのコンボ" />
</a>
<h4>オッのコンボ</h4>
<p>「起きあがり子坊師⇒起きの小法師⇒おきっのこぼう⇒オッのコンボ」だそうです。</p>
</div>
</div>
--- css設定 ---
.test1{
width:207px;
padding:1px;
background:url(img/100823/dotted.png) repeat;
}
#test2{
width:193px;
padding:7px;
background-color:#fff;
}
#test2 h4{
margin:7px 0;
}
#test2 p{
margin:5px 0 0;
font-size:0.85em;
}
.bl-hover{
background:url(img/100823/dotted.gif) repeat;
}
.bl-hover #test2 p{
color:#888;
}