掲示板/HTML質問板/過去ログ/一覧/ マウスを乗せるとメニューの色が変わる

0 名前： pes ： 2007/02/20（火） 03:08 ID:eniE5yaa sub-t1: 下記のサイトのようなメニューを作りたいのですが、
どなたかやり方を教えていただけないでしょうか？

http://mag.heteml.jp/special/000004/

トップページ　インタビュー　スぺシャルとありますが

通常は背景が白　文字が黒で表示されていますが、
クリックすると緑になって白文字で表示されます。

メニューのひとつをクリックするとそこの部分だけ
色をつける方法を教えて欲しいのですが、
よくわかりませんよろしくお願い致します。

説明が下手ですいません。

1 名前： Newのり太 ： 2007/02/20（火） 03:08 ID:HAaT9rBJ sub-1h: 「トップページ」のインタビューのボタン
http://mag.heteml.jp/_tmpl/images/menu/interview.gif
「インタビューのページ」のインタビューボタン
http://mag.heteml.jp/_tmpl/images/menu/interview_current.gif

開いているページに対応するボタン画像の色をかえているだけかと。

2 名前： PES ： 2007/02/20（火） 03:08 ID:eniE5yaa sub-t1: NEWのり太さん

返信ありがとうございます。
あんまり難しい話ではなにのでしょうが
初心者の私には具体的にどうしたらいいのか
わかりません。　

画像の色を変更する方法を
教えていただけないでしょうか？

よろしくお願い致します。

3 名前： Newのり太 ： 2007/02/20（火） 03:08 ID:HAaT9rBJ sub-1h: > 画像の色を変更する方法を
> 教えていただけないでしょうか？

>> 開いているページに対応するボタン画像の色をかえているだけかと。

ああ、確かにちょっと舌足らずでしたね。

これは、なんらかのスクリプト等で色を変更しているわけではなく、
白背景に黒文字の通常時のボタン（1）、緑背景に白文字の現在地のボタン（2）、
それぞれ2種類の画像を用意し、ページ作成時に
ページに対応するボタンのみ（2）の画像を貼り付けているだけ。ということです。

4 名前： Newのり太 ： 2007/02/20（火） 03:08 ID:HAaT9rBJ sub-1h: 画像の作成方法は、お使いの画像作成ソフトのマニュアル等を見てください。

あと、気になっていたのですが、
「マウスを乗せるとメニューの色が変わる」というタイトルですが、
該当部分に限っては、マウスをのせても色は変わりません。

5 名前： PES ： 2007/02/20（火） 03:08 ID:BKLaQLiE sub-t1: 早速の回答ありがとうございます。

＞ページ作成時に
＞ページに対応するボタンのみ（2）の画像を貼り付けているだけ。ということです。

うーんすいませんなんとなくわかるのですが

トップページ」のインタビューのボタン
http://mag.heteml.jp/_tmpl/images/menu/interview.gif
「インタビューのページ」のインタビューボタン
http://mag.heteml.jp/_tmpl/images/menu/interview_current.gif

どうならべればよいのでしょうか？？？

<table border="0" cellspacing="0" cellpadding="0" bordercolor="#cccccc">
<tr>

<td><a href="サイト"><img src="ボタン画像LOGOHOMEGREEN11020.jpg" width="110" height="20"
alt="HOME" border="0"></a><td>

あーーよく分かりません

教えていただけますか？？
よろしくお願いします。

6 名前： Newのり太 ： 2007/02/20（火） 03:08 ID:HAaT9rBJ sub-1h: > トップページ」のインタビューのボタン
> http://mag.heteml.jp/_tmpl/images/menu/interview.gif
> 「インタビューのページ」のインタビューボタン
> http://mag.heteml.jp/_tmpl/images/menu/interview_current.gif
>
> どうならべればよいのでしょうか？？？

上記2つの画像は、同一ページに同時に並べるというわけではありませんよ？
その辺の理屈は大丈夫ですか？

もう一回説明を試みてみます。

http://mag.heteml.jp/
↑のトップページのメニューのボタンは、「トップページ」「インタビュー」「スペシャル」「ラボ」「ヘテムルブログ」すべて「白地に黒文字」の画像を使っています。

それに対し、
http://mag.heteml.jp/interview/000024/
↑のインタビューのページは、「トップページ」「スペシャル」「ラボ」「ヘテムルブログ」のボタンは、トップページと同じ「白地に黒文字」の画像を使っていますが、「インタビュー」のボタンだけ、トップページの「インタビュー」のボタンとは別の「緑地に白文字」の画像を使っています。

http://mag.heteml.jp/special/000004/
↑スペシャルのページも同様、「トップページ」「インタビュー」「ラボ」「ヘテムルブログ」のボタンは、トップページと同じ「白地に黒文字」の画像を使っていますが、「スペシャル」のボタンだけ、トップページの「スペシャル」のボタンとは別の「緑地に白文字」の画像を使っています。

# これでも理屈が分からなければ説明をあきらめしばらく山に篭ります。

それとも、レイアウトについての質問ですか？

<div class="menu_bottom"></>内を見ればわかるように、ボタンの画像をズラ～っと並べているだけのようですが？
# ボタンの間に区切りの下記画像をはさんでいますが。
http://mag.heteml.jp/_tmpl/images/menu/bar.gif

お書きのように、表でレイアウトするという手もありますが、マークアップ的には「メニューのリスト」とみなし、「箇条書きリスト」としてマークアップし、スタイルシートで見栄えを整えるといったところが無難かと。

7 名前： Pes ： 2007/02/20（火） 03:08 ID:eniE5yaa sub-t1: Newのり太さま

こんなに詳しい説明して頂き本当にありがとうございます。

初心者なのでよくわからなかったけど
はじめにご説明して頂いたどおりなんですね　
開いているページに対応するボタン画像の色を
変えている。　完璧に理解できました。　
これでほんとできそうです。

もう一度
ご丁寧に説明していただきありがとうございました。