jQuery リンクボタン(画像)クリックした時にへこます
jQuery リンクボタン(画像)クリックした時にへこます
「ふぉとふぉ」を作ったときに
使ったのでメモ。
サンプル
まずはサンプルをご覧ください。→こちら
ボタンにカーソルを合わせるとボタンが光っているように見えます。
そして、クリックするとボタンがへこんでいるように見えます。
画像を用意する
このサンプルでは下記の3つの状態に応じて画像を切り替えています。
- 通常時(retweet_btn.gif)
- マウスがボタンに乗った時(retweet_btn_hover.gif)
- ボタンをクリックした時(retweet_btn_active.gif)
これら3つ画像を用意します。
ファイル名は下記の命名規則になっています。
xxx.gif
xxx_hover.gif
xxx_active.gif
jQueryでコードを書く
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>javascriptサンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("img").hover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_hover$2"));
},
function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_hover(\.[a-z]+)$/, "$1$2"));
}
);
$("img").mousedown(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_hover(\.[a-z]+)$/, "$1_active$2"));
});
$("img").mouseup(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_active(\.[a-z]+)$/, "$1$2"));
});
$("img").mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_active(\.[a-z]+)$/, "$1$2"));
});
});
</script>
</head>
<body>
<a href="http://twitter.com/home/?status=RT test" target="_blank"><img src="retweet_btn.gif" border="0" /></a>
</body>
</html>
javascriptの部分はそのままコピーしてください。
使用する画像のファイル名に応じて下記の部分を変更すれば動くはずです。
<img src="retweet_btn.gif" border="0" />
注意点など
javascriptの部分は結構強引に書いたので、
もっときれいに書けるはず。。
あと、このサンプルではすべてのimgタグに画像の切り替え
が発生しますので、個別に設定する場合は下記のようにidを使ってやればよいです。
<img src="retweet_btn.gif" border="0" />
↓
<img id="img1" src="retweet_btn.gif" border="0" />
$("img")
↓
$("#img1")
※分からない場合は、コメントかtwitterまで連絡くれるとわかる範囲で説明します。
動作環境
FireFox3.6.12とIE8で動作確認しました。
参考ページ
関連記事
コメント
『リンクボタン(画像)クリックした時にへこます』
「あと、このサンプルではすべてのimgタグに画像の切り替え
が発生しますので、下記の部分で適宜調整してください。
$("img")」
とありますが
どのように変えたらいいのでしょうか？