【スマホ】画像ボタンを押したときに押した感を出す

質問

こんにちは。質問があります。

ボタンをCSSではなく画像で作成して、
押す前画像→押された画像→押す前画像→ＵＲＬへ飛ぶ
という表現をHTMLにて記述したいと思います。

■例1
<a href="javascript:void(0);"><img alt="button" src="001.jpg" class="img" onmousedown="this.src='002.jpg';" onmouseup="this.src='001.jpg';"></a>

■例２
<img src="1.jpg" onmousedown="this.src='2.jpg'" onmouseup="this.src='1.jpg'" onmouseout="this.src='1.jpg'">

上記のようにＰＣ用設定は見つけたのですがこれをスマホで見ても
ちゃんと動作してくれません。

スマホ用の記述を教えていただきたいです。
できればiPhone、Android両方で使える記述だとありがたいです。

よろしくお願いします。

回答No.2

tah3

とりあえず、この辺見ておいてください。
http://www.allinthemind.biz/markup/javascript/touchevent.html

お礼

お礼が遅くなってしまい申し訳ございません。
参考サイトの情報提供ありがとうございます。
参考にさせていただきます。

回答No.1

tah3

理想に近いサイト見つけてソースを辿れませんか？

他のカテゴリーに質問されたほうがいいかもしれませんね。
[技術者向] コンピューター とか。

あくまで閲覧者目線の個人的意見ですが、スマホサイトでボタンごときに画像なんぞ使わないで欲しい…と思います。
CSS3のボタンでも見栄えは良いし充分だと思います。モバイル向けは軽いが一番です。
制作者のコダワリに閲覧者の多くは気付いてくれませんしね。
意匠もある程度大事だとは思いますが、ディテールよりもサイト全体のアクセシビリティに注力して頂きたいと思います。

お礼

ご回答ありがとうございます。
確かにすでに実施しているサイトのソースを見られればそれが一番早いかもしれませんね。

CSSのボタンはもちろん使います。
ただソーシャルゲームなどがいい例ですがCSSにも限界があるので
いかに華やかに見せるか、「攻撃」ボタンなどに説得力を持たせられるか。
そのへんも売り上げを出すという意味では必要な部分だと思います。

画像使いまくりで表示に時間がかかるサイトはその時点でユーザーの
離脱率が挙がってしまうので無しだと思います。

メリハリをどう付けていくかが重要でしょうね。

ありがとうございました（＾＾）