- ベストアンサー
複数画像のロールオーバーの効率的な外部JS
複数の同じような画像を外部JSで、 効率的にロールオーバーさせる方法を教えて下さい。 複数のhtmlページのメニュー部分に使用しているので、 出来るだけhtmlソースを汚さずに、 外部のＪＳにまとめたいのです。 知っている方がいましたら、教えて下さい。
- ro911
- お礼率38% (21/55)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
document.onmouseover = function(ev){ var ev = (!ev) ? event : ev; var e = (ev.srcElement) ? ev.srcElement : ev.target; if(e.src){ e.src = (e.src.indexOf('menu') != -1) ? e.src.replace(/out/,'over') : e.src; } } document.onmouseout = function(ev){ var ev = (!ev) ? event : ev; var e = (ev.srcElement) ? ev.srcElement : ev.target; if(e.src){ e.src = (e.src.indexOf('menu') != -1) ? e.src.replace(/over/,'out') : e.src; } } <img src="menuout0.gif"> <img src="menuout1.gif"> <img src="menuout2.gif"> <img src="menuout3.gif"> <img src="menuout4.gif"> アドバイス 一般人 自信なし
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
たとえばこんな感じ。 ファイル名に法則性があるならidの振り方を調整してもっとシンプルな 書き方もできると思います。 //html部分 <html> <head> <script type="text/javascript" src="include.js"></script> </head> <body> <img src="hoge1.jpg" id="id001"> <img src="hoge2.jpg" id="id002"> <img src="hoge3.jpg" id="id003"> </body> </html> //スクリプト部分 include.js window.onload=function(){ var imgs=new Object; imgs["001"]=new Object; imgs["001"]["obj"]=document.getElementById("id001"); imgs["001"]["org"]=new Image; imgs["001"]["org"].src="hoge1.jpg"; imgs["001"]["new"]=new Image; imgs["001"]["new"].src="hoge1over.jpg"; imgs["002"]=new Object; imgs["002"]["obj"]=document.getElementById("id002"); imgs["002"]["org"]=new Image; imgs["002"]["org"].src="hoge2.jpg"; imgs["002"]["new"]=new Image; imgs["002"]["new"].src="hoge2over.jpg"; imgs["003"]=new Object; imgs["003"]["obj"]=document.getElementById("id003"); imgs["003"]["org"]=new Image; imgs["003"]["org"].src="hoge3.jpg"; imgs["003"]["new"]=new Image; imgs["003"]["new"].src="hoge3over.jpg"; for(var i in imgs){ imgs[i]["obj"].onmouseover=function(){this.src=imgs[i]["new"].src} imgs[i]["obj"].onmouseout =function(){this.src=imgs[i]["org"].src} } }
- yambejp
- ベストアンサー率51% (3827/7415)
＞出来るだけhtmlソースを汚さずに、 ＞外部のＪＳにまとめたいのです。 極端に書けば、htmlの必要要素にidだけふってあれば、 jsのonload時にidごとにonmouseoverなどの設定はできると思います。 そうでなければonmouseoverをhtmlソース内に書き、 functionを外に出すようにしてください。 なおfunctionで出す場合は、引数にidを指定して、オブジェクトを 特定できるようにすると管理がしやすいでしょう。
補足
回答ありがとうございます。 ＞jsのonload時にidごとにonmouseoverなどの設定はできると思います。 外部JSのソースはどんな感じになるかわかれば補足をお願いしたいのですが。 現在は、onmouseoverはhtml内に無いとうまくロールオーバーしてくれないので・・・。
関連するQ&A
- yuga.jsを使うとロールオーバー画像が表示されない
お世話になっております。質問させてください。 現在メニューの画像をyuga.jsに入っていないスクリプトで ロールオーバーさせているのですが、 ある1ページにだけ yuga.js関係のスクリプトを使用した所、 そのページのメニュータイトル画像だけが 表示されなくなってしまいました。 （マウスを載せるとロールオーバー後の画像は出てくるのですが） http://www.geocities.jp/meguri_mizu/test/pc/2008.html ↑こんな感じです…。左上の「役に立つパソコン」の部分です。 firefoxだとずっとマウスオーバーした時の画像が表示されたままになってしまいます。 yuga.jsでできる、名前に_onをつけてのロールオーバーにしても やっぱり自ページのメニューだけがうまく表示されません。 なぜなのでしょうか…？ スクリプトが読めないのでどう直していいのか全然わかりません；； よろしければご教授ください。お願いします…。
- ベストアンサー
- JavaScript
- 画像にロールオーバーするとメニューが出てくる
画像にロールオーバーするとプルダウンメニューが出てくるものを作りたいと思っています。 さらに、画像に対してのメニューの位置も色々に設定したい(画像の上、下、左、右など)のですが、可能でしょうか。 可能であればどのように作ればよいのか教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ロールオーバーした時に画像が切り替わる時間について
ロールオーバーしたときに、画像が切り替わる時間が違うものがあります。 Webサイトによっては、グローバルメニューの時は瞬時に切り替わるが、他の画像の時はスローで切り替えたりしています。 例えば、次のサイトでは、スライドショーの左側にある3つの画像はスローで切り替わっております。 http://www.treasurekaitori.com/ 私は、HTMLとCSSを使い、瞬時に切り替えることはできたのですが、スローで切り替える方法がわかりません。 もしかしたら、いろいろな方法があるのかもしれません。 いろいろな方からのご教示をお待ちしております。お願い致します！！
- ベストアンサー
- CSS
- ロールオーバーで画像を固定
今、写真のアルバムのページを作っていて、 小さい画像の上にマウスを置くと、 小さい画像と、隣にある大きい画像が切り替わるようにロールオーバーの設定をしています。 そこで質問なのですが、マウスを置いた小さい画像をクリックしたら マウスが離れた後でも、大きい画像を 他の小さい画像をクリックするまで 固定しておくにはどのようにすればいいですか？
- ベストアンサー
- HTML
- ロールオーバーで切り替えられるのは出来るの画像だけ？
リモートロールオーバーで、サイトの更新情報を表示しようと思っています。 テーブルを組んで、サイトの各コンテンツの名前をオンマウスすると、横のセルに画像が表示されるようにしました。 更新情報だけは、画像が半分のサイズで、もう半分にテキスト（更新情報）を表示したいのです。 （以前はインラインフレームでこの方法を取っていたので、フレームを組んだページを表示させていたので問題なかったのですが、オンマウス表示にしたくて、悩んでいます） ロールオーバーの機能では画像だけしか切り替えが出来ないのでしょうか？ また、テーブルの一つのセルの中に、画像とテキストの２種類をオンマウスで表示させる事は可能でしょうか？ 御回答頂けると嬉しいです。
- ベストアンサー
- JavaScript
- ロールオーバを保持したい
いつもお世話になってます。 ロールオーバの保持をしたいのですがどのように行っていいのかがわかりません。わかるかたいましたらご協力お願いします。 例 トップページからリンクページに移動する際にリンクのボタンにカーソルをあわせると違う画像になります。もちろんカーソルを話すと元の画像に戻ります。リンクボタンを押してリンクのページに移動したらカーソルをあわせたときの画像のままにして強調させたいんです。 誰か方法わかりましたらご教授お願い致します。
- 締切済み
- JavaScript
- ロールオーバーした画像の保存
カーソルを合わせると変わる画像ってありますよね？普通画像を保存するときは画像にカーソルを合わせて右クリックで画像の保存にしますが、ロールオーバーされた画像の場合、カーソルを合わせる前の画像を保存できません。どうにか保存することができる方法はありますか？ 教えてください。
- 締切済み
- Java
- 外部.jsファイルを使用したものについて
外部.jsファイルを読み込んで動きのあるものを作りたいと思っており、 様々なサンプルを試してはいるのですがなかなか上手く動作しません。 http://jsajax.com/EditRunDemo.aspx 上記のソースをコピーしてhtmlで保存。 jquery-1.2.6.jsをダウンロードし実行してみたのですが、 SlidePanelのオレンジの部分が表示されません。 http://interface.eyecon.ro/demos/windows.html また同じように上記のソースをhtmlで保存。 jquery.js、interface.jsをダウンロードし実行してみたのですが、 ウィンドウが表示はされても閉じるボタンや縮小ボタンなど、 周りの緑色の部分が表示されません。 特に1番目のものは外部ファイルは何も弄らなくても大丈夫 と書いてあるので、正常に動作しない理由が分かりません・・・ 使用ブラウザはFirefox2.0.0.17です。 初心者で申し訳ありませんが回答の方よろしくお願いいたします。
- ベストアンサー
- JavaScript
- Java Scriptのロールオーバについて
現在ホームページを作成しています。 メニューボタンをJava Scriptのロールオーバで画像を変えたいのですが、１つの画像をオンマウスすると2つの画像が同時に変わるということはできますか？
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 試してみたのですが、 hoge1→hoge3over hoge2→hoge3over hoge3→hoge3over の、様に、 一番最後のロールオーバーの設定しか 読み込んでくれないようなのですが・・・。