- ベストアンサー
文字が動くボタンを作成したい
こちらで質問してよいのかどうか悩んだのですが、お願いします。 下記のHPのボタンを見て下さい。 http://www2.wind.ne.jp/maniackers/index-2.html カーソルをあわせると文字がくるっと動きますよね。このボタンを作成してみたいのですが、どうやればよいのか、どうやって調べればよいのかがよくわかりません。ソースを見てみたのですが、onmouseoutや onmouseoverといった内容がそれに当たるように思えます。 ホームページビルダーを使用していますが、枠組みだけに使用するのであまり活用してはいません。WEBデザインに興味はありますが、初心者です。 こういったボタンを作成するのには特殊なソフトや知識が必要なのでしょうか？ずっと作ってみたいと思っていたボタンなので、ぜひ作成方法を伝授していただきたいです。 よろしくお願いします。
- ama-miya
- お礼率64% (46/71)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- auty
- ベストアンサー率58% (284/486)
文字の色が変化するということで、ごく簡単な例を紹介します。 rollover.html ----------------------------------------------------------------------------- <html> <head> <title>mouse over</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language="javascript"> <!-- function rollon(){ document.getElementById("henkou").style.color="#ff0000"; } function rolloff(){ document.getElementById("henkou").style.color="#0000ff"; } // --> </script> </head> <body bgcolor="#fff8bb"> <h3 id="henkou" onmouseout="rolloff()" onmouseover="rollon(this)"> カーソルが乗ると文字の色が変わる </h3> <hr /> </body> </html>
お礼
ご回答ありがとうございます。 実は、自分のHPのボタンが上記のように色が変わるボタンです。動いたら可愛いだろなと思っていたら、そういうボタンを見つけて色々調べてみたのですが頓挫してしまい・・・質問に至りました。 ありがとうございました。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは onmouseover,onmouseoutで画像の切り替えをしていますがボタン自体(？)はアニメーションgifというもので作られています つまり通常時は静止画のgif画像を表示してonmouseoverでアニメーションgifに切り替えています
お礼
ご回答ありがとうございます。 通常時からgif画像でしたか。ソースもかなり複雑になっていたので、そこまでは見ていなかったです。 アニメーションgifについても勉強したいと思っています。 ありがとうございました。
- tom0120
- ベストアンサー率26% (367/1390)
用途としては、onmouseoutや onmouseoverでもいいと思いますが、 「HTML」や「JavaScript」よりも、「ActionScript」のほうが簡単かも・・・。 Flashのことですが・・・。 なめらかな、「動的」なものは、Flashは得意です。
お礼
ご回答ありがとうございます。 「ActionScript」というのは初耳でした。 色々なものがあるのですね。 持っている本が古いこともあり、ネットでも勉強するようにしていますが、何しろサイトが膨大なので探すだけで苦労してしまって・・・ ビルダーをもう少し活用できるようになってみます。 ありがとうございました。
JavaScriptというプログラムを使用しています。 特殊な知識もソフトも必要ありませんが、現状は諦めてください。見た目のために中途半端にその部分だけ覚えるというのはWEBデザインの向上を逆に妨げます。
お礼
ご回答ありがとうございます。 初心者ということで、いきなり難しいものを他人の力を借りて作成するのはダメですね。 プロになりたいわけではないのですが、本を読んでいると面白かったので、本格的に勉強してみようという気になったのです。 ありがとうございました。
お礼
ご回答ありがとうございます。 ビルダーはVer.11です。ですので、上記のチャートで作成してみたところ、イメージに近いものができあがりました。 細かい調整を行えば、自分のイメージと近いものが作成できそうです。 とはいえ、あまりビルダーに頼っているようでは進歩しないと思うので、少しは自力で調べられるようにしたいと思います。 丁寧な解説で大変参考になりました。 ありがとうございました。