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

解決済

質問者：elt23
質問日時：2003/12/28 04:04
回答数：2件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： nuruhho44
回答日時：2003/12/28 12:31

ロールオーバー（以下ＲＯ）の方法は色々あるのですが、ビルダーの機能でＲＯを設定したもの意外は効果設定マークが出ないのだと思います。

ソース編集画面をよく見て研究してみてください。

最も簡単な記述としては

<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">

</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"という形で指定します。

他にも方法はありますが（私の知らない方法もあるでしょう）、いずれにせよ、ビルダーの機能ではできませんので、手書きということになります。もっともビルダーのソース編集画面で手書きすれば、それもビルダーの機能のうちだと私は思ってますが。