ツリーメニューと定義済みクラスの指定について

[新着] Webテンプレートを仮オープンしました

0   名前： ポン太 ： 2004/10/11 10:42   ［URL］
http://www.tagindex.com/stylesheet/link/index.html
おそらくこのページに関係があると思うんですが、
ツリーメニューのリンクに画像を使っていて、その画像をクリックし、
ツリーを開いた状態にしたときに画像を変えるというのはどうしたらできるでしょうか？
1   名前： U D ： 2004/10/11 14:37
> ツリーメニュー
それはこの前のこれのことですね。
http://homepage3.nifty.com/west-mira/javascript/etc/TreeMenu.html

<SCRIPT>〜</SCRIPT>に以下のスクリプトを付け足してください。

//◆◆ここから◆◆
if (document.images) {
//画像を設定してください。
var img1on = new Image();
img1on.src = "image/test1.gif";//クリック前の画像
var img1off = new Image();
img1off.src = "image/test2.gif";//クリック後の画像
}
//設定終了、画像切り替えスクリプト
handan=1;
function On(name) {
if (document.images) {
if(handan==0){
document.images[name].src = eval(name + 'on.src');
handan=1;
}
else if(handan==1){
document.images[name].src = eval(name + 'off.src');
handan=0;
}
}
}
//◆◆ここまで◆◆

で、ツリーメニューのリンクを、こうしてください。

<a href="JavaScript:hyouji(1);On('img1')">
<IMG SRC="image/test1.gif" ALT="sample1" BORDER="0" WIDTH="130" HEIGHT="20" NAME="img1">
</a>

こんな感じかと思います。
一番上のツリーメニューと併用するとエラーが出やすくなると思いますが、その辺の報告もよろしくお願いします。
2   名前： U D ： 2004/10/11 14:52
>それはこの前のこれのことですね。
すいません。。。これは勘違い。気にしないでください。

<a href="On('img1')">
<IMG SRC="image/test1.gif" ALT="sample1" BORDER="0" WIDTH="130" HEIGHT="20" NAME="img1">
</a>
これが正しい方です。ツリーメニューなどの方は自分で変えてください。

参考
これをちょっと改造しました。
http://www.tagindex.com/javascript/link/change1.html

※http://homepage3.nifty.com/west-mira/javascript/etc/TreeMenu.htmlのツリーメニュー(ポップアップメニューと書いてありますが。)を基準に作りました。

> 一番上のツリーメニューと併用するとエラーが出やすくなると思いますが、その辺の報告もよろしくお願いします。
これも気にしないでください。勘違いですから。。。
3   名前： ポン太 ： 2004/10/11 15:25   ［URL］
返信ありがとうございます。

ツリーの方は出来ているんですが、クリックしても画像が切り替わりません；

一応URLはここです。
http://www5f.biglobe.ne.jp/~tales-ponta_konta/capture-s/bossdata.html
アイコン（攻略法のところ）をクリック後に違うアイコンに変えたいんです。
4   名前： U D ： 2004/10/11 16:02
<a href="javaScript:treeMenu('treeMenu')" On('img1') class="a3">

これが間違っています。いきなり　On('img1')　と記述しても無意味です。

<a href="javaScript:treeMenu('treeMenu');On('img1')" class="a3">
にしてみてください。

JavaScriptの構文では、「;」が区切れなので、
クリックしたときに２つ以上の動作を指定したい場合は、それで区切ります。
どうでしょうか？
5   名前： ポン太 ： 2004/10/11 16:57   ［URL］
ありがとうございます。上手く動作しました。
6   名前： ポン太 ： 2004/10/16 00:11   ［URL］
突然上げてすいません。

一つめは上手く動作したのですが、
http://www5f.biglobe.ne.jp/~tales-ponta_konta/capture-s/bossdata.html
みていただけると分かると思うんですが、アイコンの２つめ（2段目のテーブル）
が動作しません。
これ以降も数十個同じ動作が必要なんですが・・・

どこをどのように変更すればよいのでしょうか？ご助言お願いします。
7   名前： むむりく ： 2004/10/17 04:36
簡単に書き変えました。

まずソース。

変更点。
<a href="javaScript:treeMenu('treeMenu');On('img1')" class="a3"><IMG SRC="http://www5f.biglobe.ne.jp/~tales-ponta_konta/gazou/c01a.gif" BORDER="0" NAME="img1"></A>

変更後。
<img src="http://www5f.biglobe.ne.jp/~tales-ponta_konta/gazou/c01a.gif" alt="" onclick="treeMenu('treeMenu',this)">

<a>もname=""も要りません。同様に、

<a href="javaScript:treeMenu('treeMenu2');On('img2')" class="a3"><IMG SRC="http://www5f.biglobe.ne.jp/~tales-ponta_konta/gazou/c01a.gif" BORDER="0" NAME="img2"></A>
↓
<img src="http://www5f.biglobe.ne.jp/~tales-ponta_konta/gazou/c01a.gif" alt="" onclick="treeMenu('treeMenu2',this)">

script.js を以下に書き換え。

/* ここから */
// 画像切り替え設定
var imgOn = new Image();
// 閉じているときの画像
imgOn.src = "http://www5f.biglobe.ne.jp/~tales-ponta_konta/gazou/c01a.gif";

var imgOff = new Image();
// 開いているときの画像
imgOff.src = "http://www5f.biglobe.ne.jp/~tales-ponta_konta/gazou/c02a.gif";

function treeMenu(tName,obj) {
if(!document.getElementById) return;
var oDIV = document.getElementById(tName);if(!oDIV) return;
oDIV.style.display = (oDIV.style.display == 'none') ? 'block' : 'none';
obj.src = (obj.src == imgOn.src) ? imgOff.src : imgOn.src;
}
/* ここまで */

ところで、こちらJavaScriptオフだとクリックしても内容見てもらえませんよ。
8   名前： ポン太 ： 2004/10/17 11:43   ［URL］
返信ありがとうございます。
教えていただいた通りにやってみたのですが、今度は画像が切り替わらなくなりました。

お手数をおかけしますが、ご教授願います。
9   名前： ポン太 ： 2004/10/17 11:51   ［URL］
ごめんんさい。今確かめたら、うまく動作していたようです。

ありがとうございました。
一覧へ戻る