- ベストアンサー
リンクと画像に触れると数カ所の画像が替わる
わかりづらいかもしれませんので、例をあげながら質問いたします。 アルファベットのリンク画像にマウスが触れると、 同じ場所に読みであるカタカナの画像を表示させるためには、 オンマウスのタグを入れてあげればいいんですよね。 ところがもう一つ、別の場所（テーブル）に写真画像も入れ替えて表示させたいのです。 アルファベットのリンク画像がいくつかリストになっていて、 触れると同じ場所に読みの画像が入れ替わって教えてくれると同時に、 別のテーブルに１ケ所だけ写真サイズの画像のスペースがあり、 そこにリストに合わせた写真画像を入れてあげたいのですが。 オンマウスオーバーとオンマウスアウトを2個ずつ入れてあげることになりますが、 連動で数カ所の複数の画像を表示、非表示で入れ替えるのは可能なのでしょうか。 何度組み合わせても、ひとつしか替わらないのです。 別のテーブルにある画像を表示させるのにはHTMLで、 同じ場所にある画像を変化させるのにはリンク画像に触れるJavascriptを使いました。 オンマウスオーバーとオンマウスアウトの記述を 2つ並べて記述するのが間違ってるんだと思うのですが。 連動で同じ箇所と別の箇所に複数の画像を表示させてリストごとに替わる記述法があれば、ぜひ教えてください。 また、リンクに対するオンマウスではなく、 画像に対するオンマウスっていうのはあるんでしょうか。 知識不足で、しかも長文になり申し訳ありません。 お忙しいところ恐縮ですが、よろしくお願いいたします。
- t-lifestyle
- お礼率51% (40/77)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
onMouseoverとonMouseoutを2個ずつ入れているということですが、 <a href="#" onMouseover="document.img1.src='***1.jpg'" onMouseout="document.img1.src='***0.jpg'" onMouseover="document.img2.src='+++1.jpg'" onMouseout="document.img2.src='+++0.jpg'">リンク</a> のように記述しているということでしょうか。 こういう状態でしたら、それぞれのイベントハンドラの中身を統合して、 <a href="#" onMouseover="document.img1.src='***1.jpg'; document.img2.src='+++1.jpg'" onMouseoout="document.img1.src='***0.jpg'; document.img2.src='+++0.jpg'">リンク</a> のように記述することでも対処可能と思います。 JavaScriptでは「;」を文の区切りとして認識するので、ひとつのイベントハンドラ(この場合はonMouseoverとonMouseout)で複数の処理をさせたいときには、「;」で区切って二つの処理を書き込めばよいでしょう。 ただ、同じような処理が複数の場所に設定されている場合は、関数に処理をまとめて定義しておき、それをonMouseoverやonMouseoutから呼び出す方法をとったほうが、ソースの見通しやメンテナンス性もよくなるので、よりスマートかと思います。 リンクに対するオンマウスではなく画像に対するオンマウスで処理を起動する方法としては、単純に考えるなら画像をリンクで囲ってしまえばよいでしょう。 <a href="#" onMouseover="***"><img src="***.jpg"></a> こうすれば画像もリンクの一部として機能しますので、結果的にご質問に挙げられている動作になると思います。 imgタグに直接onMouseoverなどのイベントハンドラを記述してもよいと思いますが、古いブラウザではそれを認識できない場合もありますので、それなりの配慮は必要かもしれません。 また、リンクであることでユーザーがそこに仕掛けがあることを認識できるケースもあるので、そこに仕掛けがあることを明示したい場合は、画像をリンクの中にいれてしまうほうがよいと思います。 参考になれば幸いです。
その他の回答 (2)
- shizuku
- ベストアンサー率33% (25/74)
以前、私が質問して答えていただいたものです。 私はまったくの素人なので、これがt-lifestyleさんの参考になるかどうかもわかりませんが・・・。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=419232
- urusyun
- ベストアンサー率52% (10/19)
ちょっと、言葉を誤解されているようなので、補足です。 「タグ」というのは、 <table> とか、 <body> とかのことです。 <table width="100"> の「width」は属性とか、コンテナ、といいます。 onMouseOverとか、onClickとかは、どちらかというとイベント、ということになります。 ちょっと、気になったもので ^^;; で、お答えですが、このようにすればできます。 -------------------------------------- <html> <head> <title>sample</title> <script type="text/javascript"> <!-- function ImageChange(intType) { var strURL1; var strURL2; if (intType == 1) { // Inイベント strURL1 = "in1.jpeg"; strURL2 = "in2.jpeg"; } else { //Outイベント strURL1 = "out1.jpeg"; atrURL2 = "out2.jpeg"; } //画像表示 document.img1.src = strURL1; document.img2.src = strURL2; } // --> </script> </head> <body> <p> <span onMouseOver="javascript:ImageChange(1);" onMouseOut="javascript:ImageChange(0)">ここでも変更</span><br> <span onMouseOver="javascript:ImageChange(1);" onMouseOut="javascript:ImageChange(0)">ここでも^^;;</span> </p> <p> 画像触っても変化・・・<br> <img name="img1" src="out1.jpeg" onMouseOver="javascript:ImageChange(1);" onMouseOut="javascript:ImageChange(0)"> <img name="img2" src="out2.jpeg" onMouseOver="javascript:ImageChange(1);" onMouseOut="javascript:ImageChange(0)"> </p> </body> </html> -------------------------------------------- 基本はこんな感じですが、リストの意味がわかりませんが、HTMLの <SELECT> で作成されるselectboxのことであれば、 選ばれた場所の情報（Index）をImageChange関数の引数に追加してあげて、それも判断材料にすればよいと思います。 ちょっと、何をやりたいのかわからなかったため、簡潔にしたソースがあるとわかりやすかったのですが…
お礼
ごめんなさい。 わかりづらかったようで。 すべてトータル的にタグと答えてました。 イベントとかオブジェクトとかもまとめて・・・。 会社で作る際に上司に説明するんですけど、 上司が混乱してしまって、説明するにも埒があかなくなってしまい、 すべてにおいてそういうタグというふうにいってたので。 記述してくださったソースは画像が２つ場所を設けているんですよね。 画像の位置はひとつだけなんです。 リストが英語で、それに触れると日本語に訳し。 リストにマウスを乗せるだけで、中央にある１つの画像スペースの画像が入れ替わる。 それだけでなくて、また別の場所にコメントをいれる。 一度に３つのオンマウスを使う形になるんですよ。 ２つはどうにか動くんですが、３つ目のコメントが表示されなかったんですよ。 わかりづらかったらすみません。 もうちょっと研究してみます。 ありがとうございました。
お礼
ありがとうございます！ 複数でオンマウスを機能させるためには、 ；でまとめて入れてあげればいいんですね。 文字の画像リンクと同じ場所に入れ替わる画像と、 同じリンク場所とはまた別の場所にも入れ替わる画像があるのは、 それぞれJavascriptの設定が違うのでまとめてだと効かなかったんですよ。 Javaのネームもありますし。 けれど、Javaのない部分はできたので参考になりました。 あと、リンクではなく画像の説明だけでも、 リンクを指定しなければならないんですよね。 Aタグが必要なので、＃で架空に作ってあげればいいんですね。 ありがとうございました。