リンクボタンを3種類に変化させる方法

質問

下記サイトのように、リンクボタンを通常時、ロールオーバー時、ページ表示時の3種類に変化させたいと思います。
その方法をご教示願います。

http://www.hut10monji.com/news/index.html

回答No.4

shut0325

No.2です。
一寸説明が悪かったようなので補足を。

準備する画像は3種です。ただ、そのうちの1種はロールオーバーに関係ない画像であるということです。

レイアウト・配置・画像入替（ロールオーバー）にに関してはJavaScriptで書かれているようです。ですので通常のテーブルを使っての配置とは若干勝手が異なりますが、とりあえずはソースをざっと見て概要をつかみ、必要部分を流用して作ると良いかと思います。

回答No.3

X-trail_00

このページでは、たとえば「小屋案内」なら
navi3.gif　マウスオーバー以外
navi3o.gif　マウスオーバー時のみ
となっています。

navi3a.gif　そのページが表示されているときのみ

３種類の画像を使用して差し替えているようですね

これくらいはソフト使用せずメモ帳でも作れます。
そのページを表示させて右クリック　ソースの表示を行って
見よう見真似で作るのみです。

補足

画像の差し替えはJavaScriptを使っているのでしょうか？

回答No.2

shut0325

ソースを見るとわかりますが、JavaScriptで書かれています。関連の書籍を読むか、使用しているソフトによっては簡単に設定できるようになっています。（アドビのGoliveなど）　ちなみに3種類とありますが、実際には2種類（通常とロールオーバー）だけで、ページ表示は確定画像をそのまま配置します。

フリーソフトなどでもあるかもしれません。

補足

早速のご回答ありがとうございます。

>ページ表示は確定画像をそのまま配置します。

ここの部分をもう少し詳しく説明していただきたいのですが、
「ニュース」のページには該当（「ニュース」の）リンクボタンが少し上に出た画像を配置したレイアウトにし、
「小屋案内」のページには該当リンクボタンが少し上に出た画像を配置したレイアウトにしているということでしょうか？

回答No.1

noname#20633

スタイルシートで設定します。
上記ページのソースを見ますと、このように定義されています。

ヘッダの、スタイルシートファイルの定義
<link href="../contents.css" rel="stylesheet" type="text/css">

スタイルシートファイルのリンクを定義した部分。
A:link {color:#FF6600;text-decoration:none}
A:visited {color:#996600;text-decoration:none}
A:hover {color:#FF0000;text-decoration:none}
A:active {color:#FFFFFF;text-decoration:none}

つまり　なんとか.css　というファイルに上記４行を書いておき、ＨＴＭＬのヘッダでそのファイルを読み込む定義をしてください。

補足

早速のご回答ありがとうございます。
JavaScriptの場合ですと、2種類の画像を用意して、通常時とロールオーバー時に画像を入れ替えていますが、
このサイトの場合は画像は1つでスタイルシートで対処しているのでしょうか？
ただ、ページの表示時のリンクボタンは明らかに通常時やロールオーバー時のものと違うような気がしますが…。