onMouseOverで差替える画像のサイズが違う場合は？

MEW [E-Mail] 1999/07/21(水) 16:50:49
JavaScriptで困っています。どなたかわかる方がいらっしゃったら、教えて下さい！よろしくお願いします。

onMouseOver・Outで2つの画像を差替える、というよくあるスクリプトを使っているのですが、元から表示されている画像と、onMouseOverの時の画像のサイズが異なる場合、onMouseOverで表示される画像サイズが元の画像と同じサイズになって表示されてしまいます。これは、仕方の無いことなのでしょうか？それとも、サイズを変えないで表示する・・・というような指定の仕方があれば、教えていただけますでしょうか？本来は、同じサイズのものを差替えるためのものだとは思うのですが、事情があって一時的にWIDHTの違う画像にしたいのです。ちなみに、高さは同じです。
以上は、WinのNC4.6での状況です。他に必要情報があれば、ご指摘下さい。よろしくお願いします。

みんこ 1999/07/21(水) 16:57:43
サイズ違いはJavaScriptでは無理だと思います。
（レイヤーとかDHTMLは知りません）
どうしても、と言う場合は大きい画像のサイズにそろえて
余分な背景を透明GIFにするとか。

Tmb 1999/07/21(水) 16:59:32
一般的にJavaScriptでは例えばimages.widthやimages.heightは参照は出来ても
書き換えができないプロパティだったと記憶してます。
画像の大きさが変われば表示されてる文字のレイアウトなどにも影響を及ぼすことも
あるわけで，仕方ないと言えば仕方ないのでしょう。
IEのDHTMLを使ったり，NNならばレイヤーを使えば可能だと思いますが。
それか，古いブラウザに配慮するなら，すべての画像を最大の横幅に合わせて
その分の余白をつけた画像にするとか。
＃サイズは大きくなるでしょうけど。

Ｓ [E-Mail] [HomePage] 1999/07/21(水) 17:57:28
かなり昔のことなのであやふやな記憶ですが、私は逆にサイズが変
わって苦労したことがあります。ページが揺れて酔いそうでした。そ
のときは、widthとheight指定して解決したと思います。

逆に考えてみてください。

みんこさんがはっきり無理と言っておられるので、全く自信なしです。

zizz... [HomePage] 1999/07/21(水) 18:36:03
MEWさんの言うものと少し違いますが、
Mozilla 5のMilestone 8 では、以下のスクリプトで動作しました。

---------- ここから ----------
<html>
<head>
<title>Style Sheet Test</title>
<script type="text/javascript">

</script>
</head>
<body>
<img src="../nn4.gif" width="25" height="25" onmouseover="zoom()">
</body>
</html>

やも 1999/07/22(木) 00:23:30
こういうのはどうでしょうか。
+------++------+
| || |
+------++------+
・・・と、画像を二つ並べます。
初期状態：左に元画像、右は背景色か透過GIF
onMouseOver：左、右に、分割した入れ替え画像。
以前吹き出しを作るのに使いました。これなら、
最初の画像を大きく作らないでいいし、背景色or
透過GIFは1pxで済むからサイズも気になりません。

やも 1999/07/22(木) 00:25:46
あららまたやっちゃった。図は２枚の画像を左右に並べているイメージです(^^)

MEW [E-Mail] 1999/07/22(木) 19:19:02
[[解決]]
MEWです。皆様、ご親切なお答え、どうもありがとうございました。
height/widthの指定など試してみたのですが、指定の仕方が悪いの
か、うまくいきませんでした。2枚の画像を・・・というものは、
対象画像が10枚以上あり、それぞれがサイズの違うものだったので、今
回は試してみなかったのですが、今後の参考になりました。ありがとう
ございます。また、zizz... さんのご提案についても、応用してみよ
うとがんばったのですが、応用の仕方が不適切だったらしくてうまく
いきませんでした（＾＾；）
最終的に、スクリプトでなんとかする方法をあきらめ、大きい方の画像
にあわせて余白をつけた画像を作りなおして解決しました。
もともと、サイズの違うものは差替えられないと知らなかった初心者
に、いろいろと詳しく教えていただき、どうもありがとうございました。また、よろしくお願いします。

zizz... [HomePage] 1999/07/22(木) 19:44:17
うまくいかなかったそうですが、上のサンプルはMozilla 5でないと動きません。
現在のMozilla 5の普及度を考えると、自分でも自己満足な投稿だ、と思っていたのですが。
上のサンプルは少し改造すると IE 4以上でも動作します。多分。

Ｓ [E-Mail] [HomePage] 1999/07/23(金) 03:12:13
私のフォローの意図が伝わらなかったみたいで、出血大サービス。
MEW さんのために、サンプルを書いて、アップしました。ソースを
持っていってください。

http://www5.big.or.jp/~susumu/test/

で、私の環境(win98+MSIE5)ではちゃんとサイズが違うものを差し
替えできています。NN では確認していません。

> もともと、サイズの違うものは差替えられないと知らなかった

それは嘘です。だまされてはいけません。

Ｓ [E-Mail] [HomePage] 1999/07/23(金) 03:18:17
付け足しです。ソースをみても単純すぎて、ポイントを見落とされる
かもしれないとおもいまして。

サイズ違いの画像を入れ替えるポイントは、widthとheightを IMG
のタグの中で指定しないことです。

私は逆にそれがわからずに、マウスを乗せるたびに画像サイズが変
わって、レイアウトが崩れて揺れるページに苦労しました。

みんこ 1999/07/23(金) 09:20:39
＞Ｓさん
Mac+NN4.5だと小さい画像サイズに合わせて大きな画像が縮小表示されてました。
（一応大きい画像も開いて確認）
これってでも、画像の下に文字とか入れたらレイアウトどうなるんですかね？

ちなみにMacIE3だとエラー。

Ｓ [E-Mail] [HomePage] 1999/07/23(金) 18:44:54
ありゃ NN だとそうなんですか？

> これってでも、画像の下に文字とか入れたらレイアウトどうなるんですかね？

ぐちゃぐちゃです。

やも 1999/07/23(金) 23:08:23
NNだとMSIEのような動的なリドローは行われなかったと思います。もしｓさんの方法でネスケにMSIEと似たような動作をさせようと思ったら、ページのリロードが要るかも、です。
普通のロードの時も、サイズが不明な画像より下のレンダリングをサイズ取得まで保留しているような雰囲気なので。

[上に] [前に] [次に]