月別アーカイブ: 2014年6月

透過PNGをリンクを付けIE8で正常に

IE8では透過PNGにアンカータグを付けた時ホバーすると
透過部分に黒い物がでてしまう。

きれいに表示したい時
とりあえず色々調べてテストした中で下記をやり方にした。

alphafilter.js
を使用

IE8以下に表示

<!--[if lte IE 8 ]>
<script type="text/javascript" defer="defer" src="js/alphafilter.js"></script>
<![endif]-->

JSの使用に伴ない画像に下記のクラスを追加

<a href="hogehoge"><img src="btn.png" alt="" class="alphafilter btn" />

ホバーした時のソースは下記になるのでホバーした画像を作成

<a href="hogehoge"><img src="btn_on.png" alt="" class="alphafilter btn" />

参考サイト
http://blog.webcreativepark.net/2007/02/01-233315.html

jQuery上下連動タブとcookieで状態を保存 

cookieで
・タブの動きのを記憶
・特定のクラスの差し替えを記憶
この要素が必要でしたので色々調べた。。。
下記の状態で無事に動きました。

jquery.cookie.jsを使用

n = ($.cookie('opened'));
m = ($.cookie('opened2'));
if (n > 0 || m > 1) {
  $('.tab').each(function(){
   $('li',this).removeClass('current').eq(n).addClass('current');
  });
  $('#tabBottom div').removeClass().addClass('bg'+m);
  $('.tabCnts .tabCnt').hide().eq(n).show();
}

$('.tab li').click(function() {
	var num = $(this).parent().children('li').index(this);
	var bgnum = $(this).parent().children('li').index(this)+1;
	$('.tab').each(function(){
   $('li',this).removeClass('current').eq(num).addClass('current');
  });
	$('#tabBottom div').removeClass().addClass('bg'+bgnum);
  $('.tabCnts .tabCnt').hide().eq(num).show();
	// 有効期限は1日
	$.cookie('opened', num,{ expires: 1 });
	$.cookie('opened2', bgnum,{ expires: 1 });
});

参考サイト
http://nakazilab.com/top-and-bottom-tab/
http://html-five.jp/350/
http://php.o0o0.jp/article/jquery-cookie_tab
http://javascript.webcreativepark.net/library/jquery-cookie
http://www.favorite-labo.org/view/306?continue=1