画像のサイズを動的に変更する

質問

表示される画像の幅が250picよりも大きい場合、その画像の幅を250picに縮小して再表示させるようなスクリプトを記述したいと思っています。
(表示される画像はPHPによってランダムに変更されます)

以下のように記述したところ、IE6.0.2では期待したとおりの動作をしましたが、NN4.7ではサイズが変更されずに表示されてしまいます。(エラーは出ませんでした)
どのように記述したらよいのか教えてください。

＜記述したスクリプト＞
<SCRIPT>
<!--
　function img_width(){
　　if (document.logo.width > 250){
　　　document.logo.width = 250;
　　}
　}
// -->
</SCRIPT>

・・・中略・・・
<img src="<? echo $l_pass; ?>" name="logo"　border=0>

回答No.1

peso · ベストアンサー

画像の高さや幅を扱うプロパティがNNとIEでは違うためにおこることですね。
image の height と width のプロパティはNNでは読取専用になっています。
なので
document.logo.width = 250;
とやっても無視されます。（エラーが出たほうがいい気がするけど・・・）
なので、NN4.xではレイヤで何とかする必要があります。

<SCRIPT language = "JavaScript">
<!--
　function img_width(){
　　if (document.layers){
　　　if (document.lay1.document.logo.width > 250){
　　　　document.lay1.document.open("text/html");
　　　　document.lay1.document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0' width='250'>");
　　　　document.lay1.document.close();
　　　}
　　}
　　else{
　　　if (document.logo.width > 250){
　　　　document.logo.width = 250;
　　　}
　　}
　}
// -->
</SCRIPT>

・・・中略・・・
<SCRIPT language="JavaScript">
<!--
if (document.layers){
　document.wirte("<LAYER top='xxx' left='xxx'>");
　document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0'>");
　document.write("</LAYER>");
}
else{
　document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0'>");
}
//-->
</SCRIPT>

お礼

早速の回答ありがとうございます。
参考にさせて頂きますね。

回答No.2

peso

一部抜けてました

×　document.wirte("<LAYER top='xxx' left='xxx'>");
○　document.wirte("<LAYER id='lay1' top='xxx' left='xxx'>");

xxxには適当な位置を指定してください。

お礼

すみません・・・
上記のスクリプトに誤りがあったので訂正いたします。
画像が表示されないというより、レイヤーが表示されていないように思えるのですが・・・。
どのようにすればレイヤーが表示されるのでしょうか？
（初心者もいいところですよね・・・）

<SCRIPT language = "JavaScript">
<!--
　function img_width(){
　　if (document.layers){
　　　if (document.lay1.document.logo.width > 250){ 　←この行でエラーが出ているようです。
　　　　document.lay1.document.open("text/html");
　　　　document.lay1.document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0' width='250'>");
　　　　document.lay1.document.close();
　　　}
　　}
　　else{
　　　if (document.logo.width > 250){
　　　　document.logo.width = 250;
　　　}
　　}
　}
// -->
</SCRIPT>

・・・中略・・・
<SCRIPT language="JavaScript">
<!--
if (document.layers){
　document.wirte("<LAYER id='lay1' top='170' left='742'>");　←この行でもエラーが出ているようです。
　document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0'>");
　document.write("</LAYER>");
}
else{
　document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0'>");
}
//-->
</SCRIPT>

補足

再度教えてください。
教えていただいたようにスクリプトを記述したのですが、画像が表示されないのです。（スクリプトエラーも出てしまいます・・・）
なにぶん初心者なものですから分からないことばかりで・・・申し訳ありません。
どのようにすればよいのかご教授ください。

<SCRIPT language = "JavaScript">
<!--
　function img_width(){
　　if (document.layers){
　　　if (document.lay1.document.logo.width > 250){ 　←この行でエラーが出ているようです。
　　　　document.lay1.document.open("text/html");
　　　　document.lay1.document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0' width='250'>");
　　　　document.lay1.document.close();
　　　}
　　}
　　else{
　　　if (document.logo.width > 250){
　　　　document.logo.width = 250;
　　　}
　　}
　}
// -->
</SCRIPT>

・・・中略・・・
<SCRIPT language="JavaScript">
<!--
if (document.layers){
　document.wirte("<LAYER id='lay1' top='170' left='742'");
　document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0'>");
　document.write("</LAYER>");
}
else{
　document.write("<img src='<? echo $l_pass; ?>' name='logo'　border='0'>");
}
//-->
</SCRIPT>

※IE6.0とNetscape 6.0では正常に稼動しています。