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

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

ボタンを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 回答日時： 2012/09/12 17:16

とりあえず、この辺見ておいてください。

http://www.allinthemind.biz/markup/javascript/to …

この回答へのお礼

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

お礼日時：2012/09/21 13:41

No.1 回答者： tah3 回答日時： 2012/09/12 06:14

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

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

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

この回答へのお礼

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

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

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


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

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

お礼日時：2012/09/12 13:31