ベストアンサー

画像の上に重なるように違う画像をだしたい

2003/01/29 22:37

画像の上にマウスがのると同じ位置で違う画像をだしたいのですが以下のプログラムだとブラウザ上で画像が表示されません。訂正個所をご指摘いただけませんでしょうか。よろしくお願いします！  </SCRIPT> 中略 <a href="http://www＊＊/" target="_blank" onMouseOver="chgImg(1)"onMouseOut="rstImg(0)"><img src="＊＊1.gif" BORDER="0" width="128" height="24"; return true;. ><img scr="＊＊＊.gif" BORDER="0" width="128" height="24"; return true;.></a> <TD></table>

amanatu
お礼率60% (35/58)

JavaScript
回答数7
ありがとう数5

みんなの回答 （7）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yellowocean
ベストアンサー率60% (3/5)

2003/02/02 03:50 回答No.6

NO.2, NO.3 のレスをした者です。以前に記したスクリプトをこう書き換えてください。 ------- 以前のもの ○ これを <HEAD> ～ </HEAD> の間に <SCRIPT LANGUAGE="JavaScript"></SCRIPT> ----------------- window.document.images[NNNNN].src=ImageURL; 上記の部分を window.document.NNNNN.src=ImageURL; にする。これでいいと思います（動作確認 Mac OS 9.1, IE 5.1.4）。なんでなのかよくわかりませんが images[] で画像を指定すると動かなかったようです。申し訳ないです。

質問者

お礼 2003/02/03 22:14

お返事遅くなりもうしわけないです（汗） lead1976さんのやり方でもできるようになりましたが、 yellowoceanさんのやり方でもうまくいきました！！（感涙）！本当に、丁寧にご指導いただいて感謝してます！勉強になりました！！！ありがとうございます！（＾＾）

その他の回答 (6)

yellowocean
ベストアンサー率60% (3/5)

2003/02/02 04:18 回答No.7

ここからはオマケ。スクリプトの動作が確認できたら試してみてください。 <A HREF="#" onMouseover ～ > のように、 <A> タグ内に onMouseover, onMouseout を書いて <IMG> を囲むと、 Mac では、リンクの効果の範囲が画像の横にまではみ出てしまうことがあります（Mac IE はそういうもの）。これがイヤな場合、 <IMG> タグ内に直接 onMouseover, onMouseout を書くと（<A> は消します）画像の上にマウスがのったときだけ、画像がキレイに入れ換わります。ただし、IE, NN のうち IE 4 以上、NN 6 以上でないと動きません。 NO.2 の回答で「うまくいかないとき」を書いたのは、このためです。

noname#199778

2003/02/01 23:02 回答No.5

すみません、一つ見落としていました。はじめの状態で画像が表示されていて、ロールオーバー(画像の入れ換え)が起きたときの画像が表示されないとしたら、スクリプト中で記述してある画像のURLを書き間違えたせいで異常が起きているものと思います。 chgImg[0].src = "../home_notes/prabil1.gif"; //マウスアウト時の画像 chgImg[1].src = "../home_notes/incrogo1.gif"; //マウスオーバー時の画像この記述ですが、このファイルと同じ階層にあるhome_notesフォルダ内にそれぞれの画像ファイルがあるとすれば、 chgImg[0].src = "home_notes/prabil1.gif"; chgImg[1].src = "home_notes/incrogo1.gif"; こう記述するべきでした。申し訳ありません。おそらく、こちらで記述したURLが間違っていたので、指定してある場所に当該の画像ファイルがみつからず、画像の表示ができなかったものと思います。上の部分を修正すれば、おそらく動作するのではないかと思います。失礼しました。

質問者

お礼 2003/02/03 22:07

お返事遅くなり申し訳ないです（汗）教えていただいた部分を修正したところ、おかげさまで無事できるようになりました！！！（感涙）本当に丁寧なご指導ありがとうございました！おかげでとても勉強になりました（＾＾）本当にありがとうございました！

noname#199778

2003/02/01 16:56 回答No.4

#1です。横槍のようになってしまいますが、失礼して… <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <meta name="generator" content="Adobe GoLive 5"> <title>home 2</title> <STYLE TYPE="text/css"></STYLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </head> <body> 中略 <div align="right"> <a href="http://www＊＊＊.or.jp/＊＊/" target="_blank" onMouseover="ChangeIMG(0,1)" onMouseout="ChangeIMG(0,0)"><img src="home_notes/prabil1.gif" width="128" height="26" border="0"></a></div> </body> </html> このようにしてはいかがですか? 上記のスクリプトでは、関数ChangeIMG()は、画像の配列番号(引数i)で中身を入れ換える画像を特定し、入れ換える画像をプレロードした画像の配列(番号は引数j)で指定していますので、もしこの他に画像ファイルがページ内にある場合は、対象部分の画像の前にあるimg要素の数だけ、a要素内のイベントハンドラ(onMouseover等)の"ChangeIMG(0,*)"の「0」の値を増やしてください。もしくは、img要素に名前を付けて、変更する画像を特定する方法も取れます。その場合は、function内を、 function ChangeIMG(i){ document.shfl.src=chgImg[i].src; //「shfl」はimgタグにつけた任意の名前 } HTML部分を <a href="http://www＊＊＊.or.jp/＊＊/" target="_blank" onMouseover="ChangeIMG(1)" onMouseout="ChangeIMG(0)"> <img src="home_notes/prabil1.gif" name="shfl" width="128" height="26" border="0"></a> に変えてください。こちらは、name属性で入れ換える画像の要素を特定しますので、<img>タグ内には必ずname属性で名前を指定し、スクリプトの方でもその属性名を正確に記述してください(大文字小文字もきちんと正確に記述する必要があります)。横槍失礼しました。

質問者

補足 2003/02/01 20:38

教えていただきありがとうございます！！大変うれしく思っております！！早速、そのままコピペしてやってみましたが、うまく作動しません（苦悩）。ブラウザでみるとマウスが乗る前の画像が表示されていますが、マウスを載せるとその画像が表示されず、またもう一つの変わるはずの画像もでません。教えていただいたのに大変恐縮しております（滝汗）・・・・。もし、さしつかえなければ、原因として考えられる要因など思い当たることございましたら、お教えいただけますとありがたいです・・・（汗）（私の制作環境の問題など考えられますでしょうか・・・？！ osはmac9.01、ソフトはgo live、ブラウザはIEです）実は結構必死になっております。どうぞよろしくお願いいたします。

yellowocean
ベストアンサー率60% (3/5)

2003/01/30 05:19 回答No.3

NO.2 の記事に訂正を。 ----- これが正解 ○ うまくいかないときはこっち。 <A HREF="#" onMouseover="ChangeIMG('SSSSS')" onMouseout="ChangeIMG('DDDDD')"> <IMG SRC="DDDDD" BORDER="0" WIDTH="XXX" HEIGHT="XXX" NAME="NNNNN"> </A> ----- でおねがいします。 onMouseout="Change のつぎに IMG つけるの忘れてました。

yellowocean
ベストアンサー率60% (3/5)

2003/01/30 05:14 回答No.2

とりあえず、完成スクリプトを記します。 ○ これを <HEAD> ～ </HEAD> の間に <SCRIPT LANGUAGE="JavaScript"></SCRIPT> ○ 目的の <IMG> タグ周辺はこうしてください。 <IMG SRC="DDDDD" BORDER="0" WIDTH="XXX" HEIGHT="XXX" NAME="NNNNN" onMouseover="ChangeIMG('SSSSS')" onMouseout="ChangeIMG('DDDDD')"> ○ うまくいかないときはこっち。 <A HREF="#" onMouseover="ChangeIMG('SSSSS')" onMouseout="Change('DDDDD')"> <IMG SRC="DDDDD" BORDER="0" WIDTH="XXX" HEIGHT="XXX" NAME="NNNNN"> </A> ○ 説明・NNNNN というところは、IMG タグにつける名前です。　NAME 属性で指定してあげてください。　おもに半角英字ならなんでもかまいません。・SSSSS には入れ換えて表示する画像の URL を、　DDDDD には元画像の URL が入ります。・XXX は画像のサイズですね。注意 : 　onMouseover="ChangeIMG('SSSSS')" onMouseout="Change('DDDDD')" の　ChangeIMG('') のカッコ内で文字を囲んでいるのは　「'」(シングルクォート) なので、間違えないように。補足 : 　タグを書いている途中 (「<>」の中で) で改行してますが、　属性と属性の間を改行しているので問題ありません。

質問者

補足 2003/02/01 14:44

お返事遅くなり申し訳ないです。とても丁寧にわかりやすく教えていただき感謝します！！！教えていただき早速やってみたのですが、上手く作動しません・・・昨日もいろんなサイトをみたり参考になりそうな所も調べてみていたのですが、教えていただいたものでなぜ自分のプログラムが作動しないのかわかりませんでした（T T）さしつかえなければ以下のプログラムをみてやっていただけませんでしょうか。どうぞよろしくお願いします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <meta name="generator" content="Adobe GoLive 5"> <title>home 2</title> <STYLE TYPE="text/css"></STYLE> <SCRIPT LANGUAGE="JavaScript"> </SCRIPT> </head> 中略 <div align="right"> <a href="http://www＊＊＊.or.jp/＊＊/" target="_blank"><img src="home_notes/PPPPP.gif" width="128" height="26" border="0"></a></div></td>

noname#199778

2003/01/30 00:16 回答No.1

onImg[0] = new Image(128,24) onImg[1] = new Image(128,24) この行が、明示的に文節を区切られていないので、スクリプトが動かないのではないでしょうか? とりあえず、 onImg[0] = new Image(128,24); onImg[1] = new Image(128,24); とすれば、一応は動くと思います。ご希望通りの挙動をするかどうかは判りませんが… 質問文のスクリプトでは改行で文節を区切っているところが多くありますが、スクリプトは一文節ごとに「;」で明示的に区切りを入れておいた方が、問題は少ないと思いますよ。あと、このスクリプトには、少々無駄なところがあると思います。画像をプレロードする部分では同じ内容の配列を二つ作っていますし、関数についても同じ挙動をするものが二つあるように思います。これらは統合できそうな気がしますが、いかがでしょうか。それと、HTMLのimgタグに、「; return true;.」という文字が入っていますが、これは無意味のように思います。見当違いでしたらごめんなさい。参考になれば幸いです。

質問者

お礼 2003/02/01 14:44

お返事遅くなり申し訳ないです（汗）大変参考になりました！ありがとうございます！！でも、まだうまく作動しなかったりします・・・・勉強が少したりないようです（汗）またなにかありましたらよろしくお願いしますm( )mペコリ

画像の上に重なるように違う画像をだしたい