• 締切済み

ホームページ「メニューボタンのロールオーバー効果」について

ホームページビルダー7を使用しています。 「URLから読み込み」で色々なホームページを参考にしてHP製作に活用しています。 メニューボタンでマウスポインタが上にきた時に画像が変化する効果がありますが,ロールオーバー効果の設定がされていないのに,この効果となっているものが多々あります。 どのようにして処理されているのでしょうか? これらのHPはビルダーで読み込んでも,ボタンの画像ファィルはテキストなどと同様に見ることができません。(私がビルダーでロールオーバー効果を設定したものは,効果設定のマークが表示され,2つの画像ファイルが登録されています) 以上 よろしくご指導願います。

  • elt23
  • お礼率56% (33/58)

みんなの回答

  • nuruhho44
  • ベストアンサー率57% (38/66)
回答No.2

すみません。記述ミスです。 スタールシート→スタイルシート

  • nuruhho44
  • ベストアンサー率57% (38/66)
回答No.1

ロールオーバー(以下RO)の方法は色々あるのですが、ビルダーの機能でROを設定したもの意外は効果設定マークが出ないのだと思います。ソース編集画面をよく見て研究してみてください。 最も簡単な記述としては <IMG src="0.gif" border="0" onmouseover="this.src='1.gif';" onmouseout="this.src='0.gif';"> 0.gif :元の画像のファイル名 1.gif :RO時の画像のファイル名 単にROするだけでしたらこれでできます。リンクを付ける場合は<A>タグで囲んでやればいいわけです。ただし全てのブラウザで動作するとは限りません。(IE6、NN7.1、Opera7.23で動作確認。) アンカータグによるリンクの場合、スタールシートだけでも可能です。(IE6、Opera7.23で動作確認、NN7.1では表示されません。) <HTML><HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- A:hover.#A1{ background-image : url(1.gif); } A:hover.#A2{ background-image : url(3.gif); } #A1{ background-image : url(0.gif); width : 120px; height : 80px; } #A2{ background-image : url(2.gif); width : 120px; height : 80px; } --> </STYLE> </HEAD> <BODY> <P><A href="http://www.goo.ne.jp/" id="A1"></A> <A href="http://www.google.co.jp/" id="A2"></A></P> </BODY></HTML> 0.gif,2.gif:元の画像のファイル名 1.gif,3.gif:RO時の画像のファイル名 使用する画像のサイズを width: height: に入れてください。 <A>タグのサイズを指定し背景として画像を入れています。A:hoverによってカーソルが乗った時のスタイルを指定します。 A:hover.#A1という風に指定すれば、個別のID名に対して指定できます。 #A1は通常時のスタイルでA1というID名を指定したタグに対して適用されます。ID名は<A>タグ内にid="A1"という形で指定します。 他にも方法はありますが(私の知らない方法もあるでしょう)、いずれにせよ、ビルダーの機能ではできませんので、手書きということになります。もっともビルダーのソース編集画面で手書きすれば、それもビルダーの機能のうちだと私は思ってますが。

elt23
質問者

お礼

早速のご回答,本当にありがとうございました。 ハイレベルな内容にちょっととまどってますが,ご指摘のとおりソース編集画面で研究してみます。 今後ともよろしくお願いします。

関連するQ&A

  • ロールオーバー効果ウィザード

    ホームページビルダーv6.5を使用してHPを作成しているのですが、ロールオーバー効果ウィザードで通常時は横長の画像で、マウスポインタが上にきた時には縦長の画像を使用したいのですが、そうなるとやはり通常の画像が横長ですと、マウスポインタが上にきた時には縦長の画像は横に伸びてしまいました。そうならないように、縦は縦、横は横という様には出来ないものでしょうか?

  • ロールオーバー効果とメモは一緒に出来ないのでしょうか?

    ホームページビルダー10でHPをつくっている 最中ですが、リンクボタンの画像にロールオーバー 効果(マウスを合わせると色が変わる効果)と メモ(マウスを合わせるとリンク先ページに ついての簡単なメッセージがでるというみたいな もの)を一緒にする事はできないのでしょうか?

  • サムネイルとロールオーバー効果を組み合わせたいのですが…

    こんばんは。お世話になります。 今、行き詰っています。 ホームページビルダーV6.5を使ってWEBページを作っています。画像を1ページあたり6~10枚程度載せたいので、容量や見栄えを考えてサムネイルにしてすっきりさせました。画像をクリックすると拡大されますが、その画像上にマウスポインタがかかった時にモザイク等の効果をかけたいのです。サムネイルにしなければ「画像のロールオーバー効果」からできるのですが、サムネイルにするとグレー表示になってしまい、どうしてもできません。 具体的にはhttp://www.asaba-jp.com/butsuga/gatten.htmlの画像にマウスを乗せた時のような効果をかけたいのです。 要は印刷やコピーを防ぐ手段のとして、このような効果を取り入れたいと思っているのですが、方法がわかりません。他に右クリックで「コピーしないで」という注意表示を出す方法も試したのですが、やはり画像そのものにモザイク処理等をかけたいと思います。 サムネイルとロールオーバーを組み合わせて表示させる方法をご存知の方教えてください。よろしくお願いします。

  • ホームページビルダー14でメニューボタンの設定

    ホームページビルダーのメニュー設定について教えてください。 画像作成ソフトでボタン画像を作成しました。 このボタン画像5枚でサイト内リンクメニューを作りたいのですが、どのように設定していけばいいのでしょうか? テキストメニューの設定方法は解説があるのですが、自作画像ボタンをメニュー設定する方法がわかりません。 マウスがあたると色が変わったり、表示ページのメニューは別画像になるなど、設定方法を教えて下さい。

  • 以前、ロールオーバー効果について質問した者です。

    再び同じような質問をお許し下さい。 以前、ホームページを作ろうと思います。・・・といった質問をしたのですが、回答してくださった方のおかげで、方法が見えてきたのですが、よくよく調べてみたらちょっとまた引っかかるところが出てきてしまったので、どうか教えていただけたら幸いです。 以前、写真にマウスポインタがいくと、ふっとその写真そのものが拡大されたような感じになるので、その方法を教えてほしいといった内容でしたが、もう一度その効果があったホームページを見返したところ、どうも拡大・・・という感じではなくて、隣にパッと拡大されてうつる・・・といった感じなんです。 実は、今練習用のホームページでそのロールオーバー効果をやってみたのですが、私のやり方が悪いのかもしれませんが、プレビューで見てみるとどうしても拡大されないのです(泣) ちなみにソフトはホームページビルダー15をインストールしました。 あの質問の後、さらに本を追加して買った(徹底攻略!みたいなやつ)のですが、それでその本と実際のホームページの順序どうりにやってみたのですが、ならないのです。。。 おかしいなぁ、と思ってもう一度やってみたら、別に掲載した画像にロールオーバー効果を付け足すような効果??を指定したら、今度はプレビューでその小さな写真にマウスポインタがいったら、別の写真がパッと変ったんです。 もう、???になってしまって。。。 その効果が気になったというホームページを再度覗かせていただいて、もう一度その写真にマウスポインタを乗せたら、すぐ隣にぱっと写ったんです。(よくよく見たらそんな感じ) まるで、そこに写真があって、消えて?いて、マウスポインタがのったときだけ表示される。。。といった感じです。 本当ならそのホムペのリンクを貼りたいのですが(そうすればすぐ私の言いたいことがわかっていただけると思うので。。。)、それは著作権に引っかかると思う(ある団体なので、良いのか悪いのかわからないんです)ので、やめておきます。 すみません、しつこい質問をしてしまって申し訳ありませんが、わかる方がいましたらどうか回答して頂けたら幸いです。 長文失礼しました。

  • HPビルダーV9でロールオーバー効果をキーボードで

    HPビルダーV9を使ってます。 TABキーでリンク先のバーナーを選択することはできますが、ロールオーバー効果のバーナーをTABキーで選択しても、効果が利きません。 (何を選択してるかを知りたいためです) TABキーで上記のことができないとしたら、マウスポインタをキーボードで操るという方法はあるのでしょうか? もし、HPビルダーV9では無理なら他のHP作成ソフトを紹介してください。 宜しくお願いします。

  • ロールオーバー効果でエラーが出ます。

    ホームページビルダーの9を使用してます。 マウスロールオーバー効果の設定をしたところ、エラーが出てしまいます。 「オブジェクトを指定してください」というエラーでマウスを乗せると2回もそのエラーが出てきます。 ソフトの指示通りに設定してるのに何故エラーが出るのかわかりません。 ちなみにソース表示は、下記です。 <A onmouseout="HpbImgSwap('_HPB_ROLLOVER1','menu1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','menu1-2.gif');" href="×××.html" id="_HPB_ROLLOVER1"><IMG src="menu1.gif" width="79" height="54" border="0" alt="×××" name="_HPB_ROLLOVER1"></A> 何がいけないのでしょうか? このソースの前に何か記述すべきなのでしょうか?

  • JavaScriptが無効でもロールオーバーと同じ効果を出したい

    ホームページビルダー11を使ってサイトを作りました。 ロールオーバーを多用しています。JavaScriptを無効設定にして、自分のサイトを見たところ、ロールオーバーの効果を得ることが出来なかったので、このロールオーバーはJavaScriptを使っているのだと思いました。 そこで、JavaScriptを無効設定していても、ロールオーバーと同じ効果を出すにはどのようにしたら良いのでしょうか。 よろしくお願いします。

  • ロールオーバーボタン

    ホームページをつくるのに、ロールオーバーボタンをつけたいと思っています。 持っているソフトはIllustrator10、Photoshop6で、Win2000です。 四苦八苦して、1個だけでしたら、ImageReadyでつくれるようになったのですが、 複数のボタンが並んでいる1枚の画像からそれぞれにロールオーバーを設定する方法がわかりません。 スライスを先に指定しても全然意味ナシみたいでしたし・・・。 簡単にできる方法や説明(上記ソフトを使って)のサイトがあったら教えていただけますか。

  • ロールオーバー効果

    HPビルダーでロールオーバー効果を使うと 作成したHPにアクセスすると セキュリティ保護のためコンピューターに~~ インターネットエクスプローラーで制限しています。 オプションを表示する場合ここをクリックしてください とエクスプローラーの上の方に表示されます。 この表示をHPを見てくれている方に表示させない ようにはできないのでしょうか? http://www1.jalux.com/00000019/html/p05.html このHPはロールオーバー効果を使ってるにもかか わらず表示されないもので・・。 どなたか分かる方よろしくお願いします。

専門家に質問してみよう