セレクトボタンに画像を反映させる

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

0   名前： てつし ： 2006/05/21（日） 04:30  ID:K69ynwFD
セレクトボタンを選択することによって、
同じページにある画像を変更するjavascriptですが、
mac osx「safari1.3.2 (v312.6)」で試した所大丈夫だったのですが、
「IE5.2 for mac」で試した所、反映されませんでした、、

原因がさっぱり分かりません。
以下
**************************************************************

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
function changeImage(){
imgnum=document.myform.imgselect.selectedIndex;
if(imgnum==0){
document.myimg.src="test01.jpg";
}else if(imgnum==1){
document.myimg.src="test02.jpg";
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG src="test.jpg" name="myimg" border=0>
<FORM name="myform">
<SELECT name="imgselect" onChange="changeImage()(this.options[this.selectedIndex].value)">
<OPTION>イメージ1
<OPTION>イメージ2
</SELECT>

</FORM>
</CENTER>
</BODY>
</HTML>

**************************************************************
以上

どういったことなのでしょうか？
私はjavascriptに精通してなく、細かな原因究明ができません。
もしどなたか原因が分かりましたらご指導よろしくお願い致します。
1   名前： 私も精通はしていませんが。 ： 2006/05/21（日） 04:30  ID:SZ3rMWuH
おそらく凡ミスかと
<SELECT name="imgselect" onChange="changeImage()(this.options[this.selectedIndex].value)">

↓
<SELECT name="imgselect" onChange="changeImage(this.options[this.selectedIndex].value)">

あと
var imgnum=document.myform.imgselect.selectedIndex;

の方が良い（？）あんまり自身ありませんが、、、
2   名前： Pid ◆byEkK9OALr ： 2006/05/21（日） 04:30
> の方が良い（？）

はい，その方が良いです。もっと言えば，

var imgnum = document.forms['myform'].elements['imgselect'].selectedIndex;
document.images['myimg'].src = 'test01.jpg';


と省略せずに書いた方が良いでしょう（JavaScript 1.0 以来の省略記法は，オブジェクトとプロパティの関係を混乱させるので，いい加減止めるべきです）。
3   名前： てつし ： 2006/05/21（日） 04:30  ID:6RQ7ToGQ
ありがとうございます！！
しかし、早速試した所、やはり
「safari」→OK
「IE」→　×
です。セレクトボタンを変えても画像が変化しません、、、
何故なんでしょう、、、、

4   名前： Pid ◆byEkK9OALr ： 2006/05/21（日） 04:30
MacOS 9 上の IE 5.x の場合，インデントするときに空白では駄目で，タブだとうまくいくという，俄には信じがたい報告をもらったことがありますが……。

試しに，改行・インデントを全部消してみるとどうなりますか。また，エラーメッセージは出ていませんか。

ついでに，
・img 要素には alt 属性が必須です。それから，念のため id 属性を付けて下さい。
・script 要素には type 属性が必須です。language 属性は（特別な理由がなければ）もう書かないで下さい。
5   名前： 解決しました！てつし ： 2006/05/21（日） 04:30  ID:6RQ7ToGQ
＞試しに，改行・インデントを全部消してみるとどうなりますか。

完璧です。うまくいきました。

いやーそうなんですね。初めて知りました。
ありがとうございます。
6   名前： 次なる問題が、、、てつし ： 2006/05/21（日） 04:30  ID:6RQ7ToGQ
このscriptの目的は、
複数個全く同じものを並べたいのですが、（ちょっとわかりずらくてすいません）
こんな感じです。
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
function changeImage(){
    imgnum=document.myform.imgselect.selectedIndex;
    if(imgnum==0){
        document.myimg.src="test01.jpg";
    }else if(imgnum==1){
        document.myimg.src="test02.jpg";
    }
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>

<!--１列目-->
<table>
<tr>
<td><IMG src="test.jpg" name="myimg" border=0></td>
<td>
<FORM name="myform">
<SELECT name="imgselect" onChange="changeImage()(this.options[this.selectedIndex].value)">
<OPTION>イメージ1
<OPTION>イメージ2
</SELECT>

</FORM>
</td>
</tr>
</table>

<!--２列目-->
<table>
<tr>
<td><IMG src="test.jpg" name="myimg" border=0></td>
<td>
<FORM name="myform">
<SELECT name="imgselect" onChange="changeImage()(this.options[this.selectedIndex].value)">
<OPTION>イメージ1
<OPTION>イメージ2
</SELECT>

</FORM>
</td>
</tr>
</table>
</CENTER>
</BODY>
</HTML>


しかし、こういう風にやると、一つ目の画像すら変化しなくなりました。
かなり初歩的なことかもしれませんが、、、どうすればよいのでしょうか？
7   名前： てつし ： 2006/05/21（日） 04:30  ID:6RQ7ToGQ
修正していない状態のものを貼付けてしまいました。すいません。
以前の修正箇所は、変更した上でのことです。
一覧へ戻る