- ベストアンサー
オンマウスで、画像切り替え＋別箇所の画像も同時に切り替えられのでしょうか？
お世話になっております。 もしJavascriptのカテゴリーと違うものでしたらすみません。 オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、 オンマウス時にそのような画像切り替えをすると同時に 別部分にある画像エリアの画像、（もしくはHTML）も切り替える事は可能なのでしょうか。 別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。 何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。
- haluo
- お礼率70% (21/30)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
やり方はいろいろ考えられます。 手っ取り早いのはidを振ってsrcを変えてしまうことでしょう。 その他グルーピングしたり、スタイルシートを併用したり いろいろありそうですが、まぁフロー的にはそんなに変わりません <img src="1.jpg" onmouseover="this.src='3.jpg';document.getElementById('another').src='4.jpg'" onmouseout="this.src='1.jpg';document.getElementById('another').src='2.jpg'" ><img src="2.jpg" id="another">
その他の回答 (1)
- aleister
- ベストアンサー率31% (11/35)
下記URLを参考にしたらどうでしょうか？？ http://copicopi.com/onmousepic.html
関連するQ&A
- オンマウスで画像とテキストの切替
メニューバーのメニューにオンマウスすると、すぐ横の画像が切り替わるようにしたのですが、その下の説明も画像と連動させて同じ切替をしたいのですが。。
- 締切済み
- JavaScript
- formのsubmitボタンを画像にして、オンマウスで画像を切り替えた
formのsubmitボタンを画像にして、オンマウスで画像を切り替えたい。 HTMLとCSSでHP制作しています。 formのsubmitボタンを自作のボタン画像に変えて、ボタンにマウスを乗せると 画像の色を変えるという事をやりたいと思っています。 例えば赤ボタンをオンマウスで青ボタンにするという感じです。 ネット検索してボタンを画像に変える事は出来ました。 ですが、オンマウスで画像を切り替えるやりかたがよくわかりません。 javascriptを使ったものを見かけたように思うのでこちらで質問してみました。 CSSで普通のリンクボタンの画像切り替えは出来るのですが、 formではそういうわけにはいかないのでしょうか？ javascriptがよくわかならいのですが、そんな私にも出来るでしょうか？ どこか参考サイトがありましたら、紹介して頂けるとありがたいです。 アドバイスよろしくお願い致します。
- ベストアンサー
- JavaScript
- onmouseoverにて画像切り替え
JavaScript初心者です。 基礎的な質問や初歩的な質問でしたら申し訳ありません。 現在WEBサイトを作成しており、HTMLタグに下記のように記述するとして、 <img src="../images/testimg-1.jpg" name="slide"> と画像を貼り付けてあります。 そこで上記画像にオンマウスしたときに、 testimg-1.jpg~testimg-9.jpgの9枚の画像を オンマウスしている間、testimg-1.jpgから順に画像が 入れ替わるJavaScriptを作成したいのですが、 ご教授お願いできませんでしょうか？ まだ、検索不足なのかもしれないのですが、 メニュー等で使われているような、2枚の画像の入れ替えしか見つからず、 思考錯誤しているのですが、スキル不足のためかどうもうまくいきません。 どなたかアドバイスいただけないでしょうか？
- ベストアンサー
- JavaScript
- javascriptによる画像切り替えについてわからなくて困っています
javascriptによる画像切り替えについてわからなくて困っています。 初心者ですので説明もわかりにくいかもしれませんが、ぜひご指導をお願いします。 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいのです。 「javascript ロールオーバー 切り替え クリック リンク」といったキーワードで検索したのですが、ロールオーバー切り替えはできるけれどリンク先に移動できなかったり、ボタン画像画像そのものが切り替わるものだったり、なかなか思ったとおりのサンプルを見つけることができません。 カスタマイズするだけの知識もないので、大変困っています。 このようなサンプルスクリプトを紹介しているところがあったら教えていただけないでしょうか？
- ベストアンサー
- JavaScript
- リンクと画像に触れると数カ所の画像が替わる
わかりづらいかもしれませんので、例をあげながら質問いたします。 アルファベットのリンク画像にマウスが触れると、 同じ場所に読みであるカタカナの画像を表示させるためには、 オンマウスのタグを入れてあげればいいんですよね。 ところがもう一つ、別の場所（テーブル）に写真画像も入れ替えて表示させたいのです。 アルファベットのリンク画像がいくつかリストになっていて、 触れると同じ場所に読みの画像が入れ替わって教えてくれると同時に、 別のテーブルに１ケ所だけ写真サイズの画像のスペースがあり、 そこにリストに合わせた写真画像を入れてあげたいのですが。 オンマウスオーバーとオンマウスアウトを2個ずつ入れてあげることになりますが、 連動で数カ所の複数の画像を表示、非表示で入れ替えるのは可能なのでしょうか。 何度組み合わせても、ひとつしか替わらないのです。 別のテーブルにある画像を表示させるのにはHTMLで、 同じ場所にある画像を変化させるのにはリンク画像に触れるJavascriptを使いました。 オンマウスオーバーとオンマウスアウトの記述を 2つ並べて記述するのが間違ってるんだと思うのですが。 連動で同じ箇所と別の箇所に複数の画像を表示させてリストごとに替わる記述法があれば、ぜひ教えてください。 また、リンクに対するオンマウスではなく、 画像に対するオンマウスっていうのはあるんでしょうか。 知識不足で、しかも長文になり申し訳ありません。 お忙しいところ恐縮ですが、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- プルダウンの切り替えについて
ページのある部分のみjavascriptで別ファイルを読み込ませ（includeのような形）、 プルダウンでその部分が切り替わるように設定したいと考えております。 プルダウンをリンクとして使用したり、画像の切り替えなどは検索で探すとよく見掛けるのですが、 上記のような形は検索で探しても見つからず、困っております。 下記のURLは画像の切り替えですが、この画像の切り替え部分をそのままHTMLファイルを読み込ませて表示させるようになれば、と思っております。 http://www.geocities.co.jp/HeartLand-Kaede/3853/jyouhoufile/im6.html やりたい事 ・プルダウンの切り替えでページの一部分に別ファイルを読み込ませ表示させる ・プルダウンの項目を変えると同時に表示も変わる ・プルダウンの項目はそのまま差し替わった時の項目を指している javascript初心者の為、自分で組もうにも全くと言っていいほど分からなかったので、こちらで質問させて頂きました。 分かりにくい文章で申し訳ありませんが、どうぞお力をお貸しくださいますようお願い致します。
- ベストアンサー
- JavaScript
- オンマウスでの別Windows表示について
オンマウスで別画面を開きたく 検索でQNo.1933900を参考に次のように記述してみたのですが、 オンマウス状態だと、別画面が瞬間的に開閉が繰り返されてしまい固定 してくれません。どこか記述がまちがっているのでしょうか。 なお、当方javascriptは初心者につき知識はあまりありません。 <A HREF="#" onmouseover="mywin=window.open('window.htm','','width=640,height=480');" onmouseout="mywin.close();"> <IMG SRC="aa.jpg" WIDTH="142"HEIGHT="106" ALIGN="BOTTOM" BORDER="0" NATURALSIZEFLAG="3"> 今までオンマウスで同じページ内での拡大画像表示をしていたのですが、オンマウス部分をインフレーム内にとじこめてしまったため、親ページで表示できなくなってしまいました。（小さなインフレーム内で表示されてしまう） そこで、上記のようにインフレーム内からのオンマウスでも、別画面で表示をすればと同様のことができると考えたものです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQuery、画像を2箇所同時にロールオーバー
こんばんは。お世話になります。 jQueryを使ったJSについての質問です。 div.colにカーソルを合わせた時に、div内の画像2つを 同時にそれぞれロールオーバーさせたいです。 <div class="col"> <img src="image01.jpg"> <img src="image02.jpg"> </div> <div class="col"> <img src="image03.jpg"> <img src="image04.jpg"> </div> ・ ・ ・ オンマウス用の画像は、 image01.jpg→image01_on.jpg image02.jpg→image02_on.jpg という風に、すべて統一で「_on」を付けてあります。 画像自体をオンマウスするとロールオーバーするJSはよく見るのですが、 それらを格納しているdivをオンマウスした時に画像をロールオーバーさせる方法を 見つけられませんでした。 何か解決策がありましたら、お力をお貸しいただきたいです。 お手数ではありますが、何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
- オンマウス時に別画像を上に重ねる方法。
オンマウス時に別画像、png画像を重ねたいと思っています。 置き換えではありません。 a.jpgを用意して マウスオーバーで b.pngを重ねたいです。 常にa.jpgは表示し続けるという意味ですがどうやればいいのでしょうか。 ※a.jpgにb.pngが重なっているc.jpgを用意して、置き換えるという答えはなしでお願いします。 説明不足の場合補足いたします。 どうぞよろしくお願いします。
- ベストアンサー
- CSS
- Javascript/オンマウスで画像を変える
洋服のネットショップを作成中です。 一つのタイプで数色ある洋服（例えば、黒、白、赤、青の4種類）の場合、「Javascriptのオンマウスで画像を変えるhttp://www.aimix.jp/javascrip.html」を利用し、「黒」「白」「赤」「黒」と表示された部分にマウスをあてると、洋服の画像が変わるようにしたいと思っています。 この場合、そのページは画像1枚毎に重く(開く時間が長く)なっていくのでしょうか。 つまり、色が4色の場合と色が10色の場合とでは、表示されている画像は一枚ですが、開く時間は4画像分と10画像分の違いが発生するのでしょうか。 ご存知の方、教えていただければ幸いです。
- 締切済み
- ホームページ作成ソフト
お礼
御礼が大変遅くなりまして、申し訳ございません！ ご教示頂いた方法で、希望していた動作が出来ました。本当に助かりました！ 有り難うございます。 さらに勉強を積んで行きたいと思います。