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

表示される画像の幅が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 回答日時： 2002/06/07 17:15

画像の高さや幅を扱うプロパティが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>
　

この回答へのお礼

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

お礼日時：2002/06/10 09:13

No.2 回答者： peso 回答日時： 2002/06/07 17:22

一部抜けてました

×　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>

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

補足日時：2002/06/10 09:45

この回答へのお礼

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

<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>

お礼日時：2002/06/10 10:50