- ベストアンサー
文字が動くボタンを作成したい
こちらで質問してよいのかどうか悩んだのですが、お願いします。 下記の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デザインの向上を逆に妨げます。
お礼
ご回答ありがとうございます。 初心者ということで、いきなり難しいものを他人の力を借りて作成するのはダメですね。 プロになりたいわけではないのですが、本を読んでいると面白かったので、本格的に勉強してみようという気になったのです。 ありがとうございました。
関連するQ&A
- 送信ボタンについて
こんにちは。実はビルダーを使用してHPを作成しているのですが、よく分からないことがあります。 送信ボタンを作ることは出来ましたが…。その送信ボタンを活用するやり方が分かりません。上手く言えませんがボタンだけ作ってそのボタンが機能しません。これってどうやったら動いてくれるのでしょうか？？教えて下さい。
- 締切済み
- ホームページ作成ソフト
- 戻るボタンの作成
ホームページビルダーを使用している初心者です。 ページ内に「戻る」ボタンを挿入して、前ページへ戻るようにしたいのですが、方法がわかりません。簡単な方法があればご教授ください。
- ベストアンサー
- ホームページ作成ソフト
- Flashボタンがうまく動きません
Flash MX 2004で、カーソルを乗せるとデザインが変わり、クリックするとさらにデザインが変わる、定番のボタンを作りました。 しかし、出来上がったFlashはボタンの上に乗せたままだと普通のカーソルがリンクカーソルになっているのですが、ボタン上で少しでも移動すると移動中は普通のカーソルになり、止めるとリンクカーソルになります。 ボタンの上でマウスを滑らせると普通のカーソルとリンクカーソルが激しく入れ替わり続けるので見た目が悪いです。 これはタグの記述で問題があるのでしょうか？ もしくは作成中の問題でしょうか？ タグで縦横比は合っていました。 パブリッシュで出力されたHTMLをみると正常に見えます。 しかしパブリッシュされたソースをコピーして貼り付けただけでは文字化けしてしまいます。 どのような解決策があるでしょうか。 Flashは初心者なのでできるだけくわしく教えてください。 よろしくお願いします。
- ベストアンサー
- その他(ソフトウェア)
- onmouseoverとoutで画像を切り替えられた・・・けど、何だろう青い枠線；
お世話になります。 ビルダー１１で作成中です。 onmouseover時とonmouseout時に画像を入れ替える処理を入れました。 参考サイトさんを利用して、以下のようなソースです。 <img src="画像.jpg" alt="がぞう" onmouseover="this .src=画像２.jpg';" onmouseout="this .src='画像.jpg';"> でも、上記ソースだと、プレビュー画面で画像の回りに青い枠線が 常時表示されるようになってしまいました（！） ビルダー内蔵のJavaScriptで_HpbImgSwap関数があって、 それを利用していたときはそんなことにはならなかったのですが・・・。 ちなみに、「じゃあ、そっち使えばいいじゃん」とおっしゃる意見も 出ると思うのですが、そちらを利用すると、なんかONMOUSEのときに、 画像が凹む？のです。 それはちょっと都合が悪い、ということで、上記ソースでできるならば、と思いました。 青い枠線を非表示にするには、どうしたらよいでしょうか？ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ よろしくご教示ください。<(_ _)>
- ベストアンサー
- HTML
- カーソルを合わせるとボタンが色つきになるサイトの作成とそのプログラム
http://www.mizutaku.net/ このサイトの、横の「ブランド一覧」項目の各ボタンの上をカーソルを滑らせると、直下のボタンが色付きになります。 そしてそのボタンをクリックすると該当するページに飛び、押したボタンは色つきの画像となってクリックできないようになります。 このようなデザインのホームページを作成したいです。 恐らくCGIとかPHPとかJavascriptとかのhtml以外のファイルが必要になるのだと考えますが、CGIやJavascriptを使えばこのようなホームページを作成することはできるでしょうか。 学校でJavaをポリモフィズムまで学習しましたが、その関係上Javascriptなら勉強しやすいのでは…と考えました。 どのようなプログラムを勉強すればこのようなホームページが作れるようになるのか、どなたかご教示ください。よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- こんなフォントはありますか！？(刻印のような、レトロな。)
お世話になります。 フォントを探しています。 カタカナで使用したいのですが、 レトロで、刻印のような感じの（ちょっとかすれていると嬉しいです） フォントってご存知ありませんか？？ Maniackers designで探してみましたが、見つかりませんでした。 それから、↓の一番上から２行目の青オビ部分 「デザインフォント」の文字は、何と言うフォントでしょうか？ http://www2.wind.ne.jp/maniackers/designfont.html 質問ばかりで申し訳ありませんが、お願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- photoshopで作成したボタンをホームページビルダーに挿入する方法
現在、phtoshopで素材を作成しホームページビルダーでHPを作成しています。現在、ボタンの作成をphotoshopで作成したんですが、ホームページビルダーにその作成したボタンを挿入したところ、白の背景までも挿入されていまいます。 やりたい事は、よくHPにあるTOP ITEM Q&Aなどのボタンを横並びに挿入したいんですが、どうしても背景も一緒に挿入されてしまい、壁紙とうまくなじむようになりません。ボタンのみを挿入できる方法を教えて下さい。よろしくお願い致します。
- 締切済み
- ホームページ作成ソフト
- ボタンについて
以下のソースで、 マウスがボタンの上のある時、 ボタンがoffからonに変わりますが、マウスが離れた時には元にoffに戻ってしまいます。 これを、ほかのボタンを押す前までには、ずっとonの状態にするにはどうすればいいでしょうか？ <a href="news.php" target="FrameMain" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image-lesson','','images/button_on.png',1)"> <img src="images/button_off.png" name="Image-lesson" width="141" height="32" border="0"> </a> よろしくお願い致します。
- 締切済み
- JavaScript
- ホームページ内で使うボタン（アイコン？）で細い文字を使いたい
説明しづらいのですが、ホームページで使われいるボタンで、 画像作成ソフトなどで作れない(？)ようなボタンを見かけます。 （例えばOKWAVEサイトの右上のほうの[マイページ]のボタンとか） 僕はホームページビルダー付属のウェブアートデザイナーを使っているのですが、 小さいボタンをつくろうとした場合に、 細いフォントなどを使っても小さくするとぼやけてしまって上記の[マイページ]のようになりません・・・。 このようなボタンを作るソフトがあるのでしょうか？ もしくは画像ソフトで上手く作れるのでしょうか？ 上手く説明できなくて意味不明なところがあるかもしれませんが、 ご存知の方がおられましたらお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- ホームページ作成して、ウエブで見ると全体の枠組みができません。ビルダー９使用です。初心者です。
ホームページを作成していますが（ホープページビルダー９使用）、インターネットエクスプローラで見ますと、全体の構図がしまりがなく左右の枠組みがありません。フレームを使うのかどうかわかりません。他のサイトは見栄えがいいですが。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
お礼
ご回答ありがとうございます。 ビルダーはVer.11です。ですので、上記のチャートで作成してみたところ、イメージに近いものができあがりました。 細かい調整を行えば、自分のイメージと近いものが作成できそうです。 とはいえ、あまりビルダーに頼っているようでは進歩しないと思うので、少しは自力で調べられるようにしたいと思います。 丁寧な解説で大変参考になりました。 ありがとうございました。