- ベストアンサー
文字が動くボタンを作成したい
こちらで質問してよいのかどうか悩んだのですが、お願いします。 下記のHPのボタンを見て下さい。 http://www2.wind.ne.jp/maniackers/index-2.html カーソルをあわせると文字がくるっと動きますよね。このボタンを作成してみたいのですが、どうやればよいのか、どうやって調べればよいのかがよくわかりません。ソースを見てみたのですが、onmouseoutや onmouseoverといった内容がそれに当たるように思えます。 ホームページビルダーを使用していますが、枠組みだけに使用するのであまり活用してはいません。WEBデザインに興味はありますが、初心者です。 こういったボタンを作成するのには特殊なソフトや知識が必要なのでしょうか？ずっと作ってみたいと思っていたボタンなので、ぜひ作成方法を伝授していただきたいです。 よろしくお願いします。
- ama-miya
- お礼率64% (46/71)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
HPビルダーV9の場合で説明します。バージョンが違う場合は、多少異なる点があるかも知れませんが、ご了承下さい。 ロールオーバーでの画像の切り替えと、回転は アニメーションGIF ですね。HPビルダーでも似たような物は簡単に作れますよ。 まず、文字が回転する アニメーションGIF を作ります。HPビルダーと一緒にインストールされる「ウェブ アニメータ」を使います。 スタート → 全てのプログラム → HPビルダー → ツール → ウェブアニメータ 起動後、ウィザードを使います。 アニメーションウィザード → 文字アニメーション・・・ → 次へ 背景を適当に選択 → 次へ 効果の種類で、「スクロール」を選択、方向は「↓」、「通過」にチェック。 その他は適当に。（取り合えず、時間は１秒、フレームは８枚位で） → ＯＫ → 完了 イメージの順番を変え、文字が中央にあるイメージを最後にします。 中央より少し下から始まり、下へ消える、上から出てくる、中央で終わり。 ↑上記のような順番に並べ替えます。 ８フレームの場合は、SHIFTを押しながら、１～４のイメージをクリックして選択。 それをドラッグして、８の後へもって行きます。 名前を付けて保存します。 回転しない、通常の文字も、同様に作ります。 効果の種類は「なし」を選択します。 ２つのGIF画像が用意できたら、次はHPビルダーです。 基本的な事は省略します。 画像を入れる場所で、挿入 → 画像の効果 → ロールオーバー効果 通常の画像に、回転しない通常の文字の画像 マウスポインタが上に来た時の画像に、回転する文字の画像 後は適当に・・・完了 取り合えず、似たような物になると思います。 あとは、細かい調整を行って下さい。 ----------------------------------------------------------- 上記の操作でスクリプトも自動で挿入されます。 自動挿入されるスクリプトの内容はやや複雑で、すぐには理解できないと思います。 とりあえずは、理解できなくても問題ありませんので、そのまま利用すれば良いと思います。 スクリプトの勉強をするのであれば、もう少し簡単なところから始めた方が良いと思います。 http://www.google.co.jp/search?hl=ja&q=javascript+%E5%85%A5%E9%96%80&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=
その他の回答 (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です。ですので、上記のチャートで作成してみたところ、イメージに近いものができあがりました。 細かい調整を行えば、自分のイメージと近いものが作成できそうです。 とはいえ、あまりビルダーに頼っているようでは進歩しないと思うので、少しは自力で調べられるようにしたいと思います。 丁寧な解説で大変参考になりました。 ありがとうございました。