ロールオーバーについて

2023/08/16 17:27

このQ&Aのポイント

ロールオーバーをシンプルなjavascriptで実装するとの事でとあるサイトにて、以下のようなスクリプトがありました。
DOMを使ってimgのソースを画像「_off.」から「_on.」に書き換えているんだなということまではわかるのですが、if(document.getElementsByTagName)とか、if(window.addEventListener)等の記述があります。
ifのあとの()の中身はi>0や(i>5)&&(i<=10)等、演算子を用いた条件を記述するタイプした目にしたことがないのですが、これはどういった事を表しているのでしょうか？

ベストアンサー

ロールオーバーについて

2012/12/11 16:36

ロールオーバーをシンプルなjavascriptで実装するとの事でとあるサイトにて、以下のようなスクリプトがありました。 http://css-happylife.com/archives/2007/0621_0010.php ▼▼▼スクリプト▼▼▼ function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } ▲▲▲スクリプト▲▲▲ DOMを使ってimgのソースを画像「_off.」から「_on.」に書き換えているんだなということまではわかるのですが、 if(document.getElementsByTagName) とか、 if(window.addEventListener) 等の記述があります。 ifのあとの()の中身は i>0 や (i>5)&&(i<=10) 等、演算子を用いた条件を記述するタイプした目にしたことがないのですが、これはどういった事を表しているのでしょうか？ご教授お願いいたします。

big-high
お礼率40% (6/15)

JavaScript
回答数2
ありがとう数1

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

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

ベストアンサー

yamada_g
ベストアンサー率68% (258/374)

2012/12/12 13:48 回答No.2

>以下をプレビューすると『id』がないのに、の意図がハッキリと分からないのですが、 >if(document.getElementById){ これは、質問文にあるコードと同様に、「"document.getElementById"が存在するか？」です。 "document.getElementById"という"関数"は存在しますよね？ if(document.getElementById('hoge')){ としたらalertは表示されないはずです。この違いが分かりますか？

質問者

お礼 2012/12/12 17:21

「以下をプレビューすると『id』がないのに、・・・」の意味はhtml部に一意セレクタがあるかどうか。それを調べているのだと思っていました。 1回目に回答していただいた「ブラウザによって実装されている関数が違う事があるので・・・」の意味がようやくわかりました。大変ありがとうございます。ようやく理解できました。感謝です＾＾

その他の回答 (1)

yamada_g
ベストアンサー率68% (258/374)

2012/12/11 17:46 回答No.1

それぞれ、document.getElementsByTagNameとwindow.addEventListenerが存在するかのチェックです。 ifブロックの中で上記関数を実行するので、その前に存在しているかをチェックしているのでしょう。ブラウザによって実装されている関数が違う事があるので、実装されていない関数を呼び出してエラーにならないようにするための対応です。

質問者

補足 2012/12/11 18:53

回答ありがとうございます。いまいち理解が足りないもので申し訳ございません。疑問に感じている箇所を簡略化したソースです。以下をプレビューすると『id』がないのに、アラートが表示されるのは何故なのでしょうか。 ▼▼▼ソース▼▼▼ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">  </script> <title>てすと</title> </head> <body onload="smartRollover()"> </body> </html>

関連するQ&A

smartRolloverのカスタマイズについて
smartRollover.jsを使っています。ロールオーバー時に　〇〇_off.jpg　が〇〇　_on.jpgに画像ファイル名が変更されるようになっています。今は、〇〇_off.jpg　にロールオーバー時に〇〇_on.jpgという　画像ファイルがない場合、何も画像が表示されません。それを〇〇_off.jpgにロールオーバーしたときに〇〇　_on.jpgの画像がない場合に、ファイル名を変更させない（〇〇_off.jpgをそのまま表示する）ようにしたいのですが、どのようにすれば良いでしょうか？よろしくおねがいいたします。 ■smartRollover.js ------------------------- function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } --------------------------
- 締切済み
- JavaScript
IE8でのjavascriptエラーについて
こんにちは。 IE8で表示されてしまうjavascriptエラーで困っています。以前、別の方が同じような質問をされていたのですが、理解できず新たに質問させて頂きました。私はjavascriptに関して全くの素人です。技術者の方、大変お手数ですが素人にも分かるような回答を頂けるととても助かります。ロールーオーバに使用目的で以下のスクリプトをリンクしております。 // JavaScript Document function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } 画像を２枚用意し、ロールオーバ時に●●●_on.jpg、そうでないときに ●●●_off.jpgと分けております。マックサファリ、ファイアーフォックス、ウィンドウズIE6,7は問題なく表示されます。ところがウィンドウズIE8でのみ、このようなエラーが出てしまいます。 `get Attribute()` is null or not an object どうやらこの箇所が怪しいようです。 ↓ ↓ ↓ ↓ if(images[i].getAttribute("src").match("_off.")) ご回答を頂けるととても助かります。どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
【javascript】ロールオーバーと画像自動切換えがバッティングし
【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。 javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。 ≪ロールオーバー≫ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } ≪画像切り替え≫ window.onload = function(){ var num = 1; setInterval(function(){ document.getElementById('link' + num).style.display = 'none'; num = document.getElementById('link' + (num+1))? ++num : 1; document.getElementById('link' + num).style.display = 'block'; },7500); }
- ベストアンサー
- JavaScript
jsを使ったロールオーバーで特定の画像だけ表示できません
インターネット上に同じ様な内容の情報がありましたが、若干今回の問題とずれており、どれを見ても解決できないため質問しました。以下のサイトを参考にjavascriptを使ったロールオーバーを設置しました。 http://css-happylife.com/log/javascript/000157.shtml 以下がjavascriptのコードです。 ---------------------------------------------------- function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } ---------------------------------------------------- 画像に「●●_off」という名前つけると、マウスオーバー時に「●●_on」の画像へ切り替わるというものです。（●●は同じ名前です）特定の画像が表示されないという具体的な内容ですがメニューとして4つの画像を縦並びでリスト表示させているのですが、その一番上の画像だけが表示されません。表示されないのは、通常時に表示されるべき「●●_off.gif」です。 4つの画像は全てgif画像です。 IE6、7、8とFirefox3で試しました。 IE6、7、8は「●●_off.gif」が×印で表示され、そこにマウスオーバーすると「●●_on.gif」の画像が表示されます。マウスを離すとまた×印に戻ります。Firefoxは何も表示されず、マウスオーバーする場所もありません。 2～4つ目の画像については問題なく表示、切り替えも動作します。パスが間違っているのではないかと思い確認し、念のため絶対パスをブラウザのアドレスに直接入力してみましたが、表示されません（404エラー）。確実にサーバーへアップロードしているのに表示されません。こんなことってあり得るのでしょうか？？ ●●_on.gifの方は同様に確認すると表示されました。さらに、jsのせいかもしれないと思い、jsの影響がない別のディレクトリにアップロードしてみました。上記と同様にブラウザに絶対パスを入力して確認しましたが、それでも表示されません。まるでこの画像だけがネットに拒否されているかの様です・・・。さらに、ファイル名が悪いのかと思い（あり得ないですが・・）、別の名前でいろいろと試しましたがやはり_offの方は表示されませんでした。さらに、しつこいですが、4つのリストメニューのうち、一番最初だけが表示されないというバグではないかと思い、とりあえず表示されない「●●_off.gif」のリストだけをhtmlから消去してみました。すると2～4番目にあったものがそのまま表示されます。一番最初だけが・・・というわけではない様です。最後にダメもとで、gifをjpgに変えてアップロードしてみたら、表示されました・・・。いちおう表示できたということで解決したのですが、何が原因だったのか、今後同じことが起こり、どうしてもgifでなければならない際を考えて、また、実はすごく根本的な間違いだったのでは？と思い質問させていただきました。 jsはまだ初心者のため、想像でいろいろと試しましたが解決しませんでした。勉強が足りないのは承知していますが、もし原因がお分かりの方がいらっしゃいましたら、ご教示ください。宜しくお願いします。
- ベストアンサー
- JavaScript
ロールオーバー時の画像切り替えについて
複数の画像ボタンを配置し、ロールオーバーするとある位置に配置している画像を切り替えるようにしているのですが、現状だとロールアウト後に初めの画像、初期値に戻ってしまうので一番最後にロールオーバーした画像でストップさせたいと思っています。現状、下記スクリプトを設置しているのですがお分かりの方が追われましたらご教授頂けないでしょうか。どうぞ宜しくお願いします！ MultiRollover = function(_listener) { this.listener_id = _listener; this.target_id = ""; this.sources = []; } MultiRollover.prototype = { addTarget: function(_target) { this.target_id = _target; }, addSource: function() { for(var i=0; i<arguments.length; i++) { this.sources.push(arguments[i]); } }, create: function() { var listener = document.getElementById(this.listener_id); if(document.getElementById(this.target_id)) { var out_target = document.getElementById(this.target_id); var over_targets = out_target.getElementsByTagName("a"); } for(var i=0; i<over_targets.length; i++) { var over_target = over_targets[i]; var src = this.sources[i]; var callback = (function(_src) { return function() { this.src = _src; }; })(src); this.observe(over_target, "mouseover", listener, callback); (new Image).src = src; src = this.sources[0]; callback = function() { this.src = src; }; this.observe(over_target, "mouseout", listener, callback); } }, observe: function(_el, _func, _listener, _callback) { if(_el.addEventListener) { _el.addEventListener(_func, function(e) { _callback.call(_listener, e); }, false); } else if(_el.attachEvent) { _el.attachEvent("on"+_func, function(e) { _callback.call(_listener, e); }); } } }
- ベストアンサー
- JavaScript
スマートな外部javaでロールオーバーのマウスポインタを変えるには？
お世話になります。スマートな外部javaでロールオーバーさせましたが、マウスポインタが矢印のままで指に変わりません。どうしたらよいのでしょうか？【参照元】 http://blog.bluebox.in/2006/10/javascriptcsstarget_blank.html ドリームウィーバーなどでも簡単にマウスオーバー効果をつけることが出来ますが、img要素内にスクリプトを呼び出すコードが入ってしまうのであまりスマートではありません。この、英語のサイトで紹介されている方法だと、img要素にclass="imgover"というクラスをつければ、src属性で指定したファイルのファイル名に_oを足した名前の画像を読み込んで表示してくれるというJavaScriptです。 /* Standards Compliant Rollover Script Author : Daniel Nolan http://www.bleedingego.co.uk/webdev.php */ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } window.onload = initRollovers;
- ベストアンサー
- JavaScript
オブジェクトがありません
オブジェクトがありませんとエラーが出てしまいます。 operaやNetscapeは動くようなのですがIEは動きません。 document.getElementById(target).style.top = y-offx+"px"; の部分でエラーがでるようなのですが。出さないためにどうすれば良いかが、分かりません。よろしくお願いします。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"></script></head> <body>  <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html>
- ベストアンサー
- JavaScript
ｊａｖａでロールオーバー設定で教えてください
外部ファイルで同じ設定でロールオーバーを設定しているのですがポイントを合わせると画像が動く（ボタンでよくある下にへこむような動作）ものと動かないものが出てきます。ロールオーバー自体はできているのですがその動きの違いは何なのでしょうか？できれば全て動くようにしたいのですが… ＜外部ファイル＞ if (document.images) { var img1on = new Image(); img1on.src = "img/c2.png"; var img1off = new Image(); img1off.src = "img/c1.png"; } function On(name) { if (document.images) { document.images[name].src = eval(name + 'on.src'); } } function Off(name) { if (document.images) { document.images[name].src = eval(name + 'off.src'); } } ＜html＞ <p> <a href="home.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/c1.png" alt="ホームへ" name="img1" border="0"></a> </p> これ以上のことはしていません。（全て統一でこのタグの画像の名前やリンク先しかいじっていません。）今貼り付けたものはへこむ動作はせずにロールオーバーのみが可能なものです。誰か教えていただけませんでしょうか？またへこむような動作はどこで設定されているのでしょうか？色々調べてはいるのですが初心者なもので分かりません… 宜しくお願い致します。
- 締切済み
- JavaScript
input要素の入力制限について
<div id="pict"></div> <form action="post" id="f1"> <ul id="elementSize"> <li><label>縦<input type="text" name="height" value="500" />px</label></li> <li><label>横<input type="text" name="width" value="500" />px</label></li> </ul> </form> このような入力欄で、0～9以外の文字が入力された場合と、801以上の数字が入力された場合に、入力欄の後ろに「800以下の数字を入力してください」という文表示させ、800以下の数値が入力されたらこの文を消すようにしたいです。 function $(e){ return document.getElementById(e); } function WindowOnLoad(){ var heightStr = document.createTextNode("800以下の数字を半角で入力してください"); $("f1").height.onblur = function(){ if(this.value.match(/[^0-9]+/)||this.value>800){ $("elementSize").getElementsByTagName("li")[0].appendChild(heightStr); }else{ if($("elementSize").getElementsByTagName("li")[0].lastChild==heightStr){ $("elementSize").getElementsByTagName("li")[0].removeChild(heightStr); } $("pict").style.height = this.value + "px"; } } } if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); }} if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); } 今、上記のようなJavaScriptを書いて、実装は出来ているのですが、もっとコードを短く出来ないかと思い質問させていただきました。よろしくお願いします。
- ベストアンサー
- JavaScript
・JAVASCRIPTを使って、ホームページを作成しています。
・JAVASCRIPTを使って、ホームページを作成しています。・ JAVAを使って、ホームページを作成しています。・メニューのボタンに、マウスオーバーでボタンの画像を切り替える  ・と同時に任意の画像を切り替える // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> ・というscriptを同時に使いたいのですが、どちらかだけになってしまったり、どちらも作動しません。・一つのボタンに２つのJAVAを使う場合何か特別な入力が必要なのでしょうか？・それとも、ただ単純にボタンのタグが誤っているのでしょうか？・どなたかご教授お願い致します。・ちなみにタグを全て載せると、 <SCRIPT Language="JavaScript">  </SCRIPT> <script type="text/javascript">  </script> とボタンのタグが、 <A HREF="../usatop.html"onMouseOver="On('img2')" "if(document.images) "myImage.src='bbs2.gif'" "onMouseOut="Off()""if(document.images) "myImage.src='bbs.gif'"><IMG SRC="bbs.gif" BORDER="0" name="myImage"></A> ・となっております。・よろしくお願いします！
- ベストアンサー
- JavaScript