- 締切済み
ホームページ「メニューボタンのロールオーバー効果」について
ホームページビルダー7を使用しています。 「URLから読み込み」で色々なホームページを参考にしてHP製作に活用しています。 メニューボタンでマウスポインタが上にきた時に画像が変化する効果がありますが，ロールオーバー効果の設定がされていないのに，この効果となっているものが多々あります。 どのようにして処理されているのでしょうか? これらのHPはビルダーで読み込んでも，ボタンの画像ファィルはテキストなどと同様に見ることができません。(私がビルダーでロールオーバー効果を設定したものは，効果設定のマークが表示され，2つの画像ファイルが登録されています) 以上 よろしくご指導願います。
- elt23
- お礼率56% (33/58)
- ホームページ作成ソフト
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- nuruhho44
- ベストアンサー率57% (38/66)
すみません。記述ミスです。 スタールシート→スタイルシート
- nuruhho44
- ベストアンサー率57% (38/66)
ロールオーバー（以下ＲＯ）の方法は色々あるのですが、ビルダーの機能でＲＯを設定したもの意外は効果設定マークが出ないのだと思います。ソース編集画面をよく見て研究してみてください。 最も簡単な記述としては <IMG src="0.gif" border="0" onmouseover="this.src='1.gif';" onmouseout="this.src='0.gif';"> 0.gif ：元の画像のファイル名 1.gif ：ＲＯ時の画像のファイル名 単にＲＯするだけでしたらこれでできます。リンクを付ける場合は<A>タグで囲んでやればいいわけです。ただし全てのブラウザで動作するとは限りません。（ＩＥ６、ＮＮ7.1、Ｏｐｅｒａ7.23で動作確認。） アンカータグによるリンクの場合、スタールシートだけでも可能です。（ＩＥ６、Ｏｐｅｒａ7.23で動作確認、ＮＮ7.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：ＲＯ時の画像のファイル名 使用する画像のサイズを width: height: に入れてください。 <A>タグのサイズを指定し背景として画像を入れています。A:hoverによってカーソルが乗った時のスタイルを指定します。 A:hover.#A1という風に指定すれば、個別のID名に対して指定できます。 #A1は通常時のスタイルでA1というID名を指定したタグに対して適用されます。ID名は<A>タグ内にid="A1"という形で指定します。 他にも方法はありますが（私の知らない方法もあるでしょう）、いずれにせよ、ビルダーの機能ではできませんので、手書きということになります。もっともビルダーのソース編集画面で手書きすれば、それもビルダーの機能のうちだと私は思ってますが。
お礼
早速のご回答，本当にありがとうございました。 ハイレベルな内容にちょっととまどってますが，ご指摘のとおりソース編集画面で研究してみます。 今後ともよろしくお願いします。