ポイント時に画像切り替えでクリックした後

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： GEN ： 2005/06/08 11:48
はじめまして。
JavaScriptでどうしてもわからない事があり、
質問させていただきたいと思います。

こちらのサイトの「ポイント時に画像を切りかえる（1）」を使用して
サイトのメニューを作成したいのですが、例えばメニュー画像をクリックした後、
ポインタを画像から離しても画像が切り替わった状態にしたいのですが、
色々無知なりに試行錯誤してみたのですが、どうしてもわかりません…

いまいち自分の文章力ではわかりにくいかもしれませんが、具体的には
http://www.doublefaith.net/
↑こちらのサイトのメニュー部分のようにしたいです。
（このサイトはクリック後にもう一枚画像が切り替わっていますが）
ソースを開いてみたのですがさっぱりでした…

どなたかお力を貸していただけないでしょうか？
よろしくお願いいたします。
1   名前： Pid ： 2005/06/08 11:48
どもです。

mouseover で画像を切り替えるのと同じ要領で，click 時に画像を入れ替えるだけです。ただし，「前回切り替えた画像」を記憶しておいて，次の click 時に前回の画像を元に戻さねばならないのが，若干ややこしいかもしれません。

まあ，難しく考える必要はないので，チャレンジしてみて下さい。もしうまくいかない点，不明な点があれば，（作りかけで構いませんので）実際に書いてみたソースを見せてもらえると助かります。


※例のサイト（Dreamweaver を使ったのでしょう）では，画像の記憶用として document オブジェクトや img 要素オブジェクトに新しいプロパティを追加しています（これが適切な方法かどうかは意見の分かれる所でしょう）。
2   名前： Pid ： 2005/06/08 11:48
まだ見ておられるか分かりませんが。

<script type="text/javascript">
var MEMO = { img : null, src : '' };
</script>

<p>
<img src="入れ替え前" alt=".." onclick="
if (MEMO.img) MEMO.img.src = MEMO.src; // 前回の画像を元に戻す
MEMO.img = this;
MEMO.src = this.src;
this.src = '入れ替え後';
">
</p>

もちろん，一つ一つの画像に onlick 属性を埋め込むのは手間ですから，実際には onload 時に一括でイベント登録すべきでしょう。
3   名前： GEN ： 2005/06/08 11:48
Pid様、お返事遅れてしまい申し訳ありません。
丁寧に解説していただきありがとうございました。
最初に書くのを忘れてしまったのですが、
何分JavaScriptに関して初心者なもので、
できればこちらのサイトの「ポイント時に画像を切りかえる（1）」の
記述にどのように書き加えればよいのか
教えていただけないでしょうか…
とりあえず「ポイント時に画像を切りかえる（1）」はうまく作動している状況です。
（というよりはそのままです。）
わがままを言ってしまい申し訳ありませんが、
何卒もう一度お力をお貸しいただければと思います。
4   名前： Toru ： 2005/06/08 11:48
クリック時に、入れ替えた状態の画像を固定する（第三の画像は必要ない）
ということなら、>>2 を使わせてもらって、スクリプト最後尾にでも追加。

var MEMO = { img : null, onmouseout : null };

function clickOn(img) {
if (!img.parentNode.onmouseout) return;
if (MEMO.img) {
MEMO.img.parentNode.onmouseout = MEMO.onmouseout; // onmouseout を元に戻す
MEMO.img.parentNode.onmouseout(); // onmouseout を実行する
}
MEMO.img = img;
MEMO.onmouseout = img.parentNode.onmouseout;
img.parentNode.onmouseout = null; // onmouseout を空にする
}


img要素にonclick属性を追加。

<img src="" alt="" onclick="clickOn(this)">
5   名前： GEN ： 2005/06/08 11:48
Pid様、Toru様　ありがとうございました。
おかげさまで希望通りのメニューを
作ることができました。
一覧へ戻る