- 締切済み
画像オンオフの判定
今、javascriptについて勉強しています。 それで、ブラウザで画像表示がオンのときとオフの時で適用するスタイルを変えたいと思っているのですが、javascriptのみでブラウザの画像表示がオンかオフかの判定というのは実際に可能でしょうか？ よろしくお願いします。
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- auty
- ベストアンサー率58% (284/486)
・ １例としてスタイルのvisibilityを使って、ON/OFFとチェックをお行ってみます。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script language="JavaScript" type="text/javascript"> <!-- function ImageChange() { var img = document.getElementById('img1'); if (img.style.visibility == 'hidden') { img.style.visibility = 'visible'; } else { img.style.visibility = 'hidden'; } } function ImageCheck() { var img = document.getElementById('img1'); if (img.style.visibility == 'hidden') { alert('OFF: hidden'); } else { alert('ON: visible'); } } //--> </script> </head> <body> <img id="img1" src="1.jpg" onclick="ImageCheck()"/> <hr /> <button onclick="ImageChange()">ON/OFF</button> <button onclick="ImageCheck()">チェック</button> </body> </html>
関連するQ&A
- JavaScriptによる（連続）自動判定
index.htmlを表示する際に、以下のような条件分岐を行いたいです。JavaScript以外のプログラミング言語でも構いません。 条件１．Javascriptがオンであるか否かを自動で判定する。 結果１．オン：条件２に進む 結果１．オフ：警告表示をする。または、index.html以外の警告HTMLページを表示する。index.htmlは表示しない。 条件２．ブラウザがインターネットエクスプローラであるか否かを自動で判定する。 結果２．正：index.htmlを表示する。 結果２．否：警告表示をする。または、index.html以外の警告HTMLページを表示する。index.htmlは表示しない。 尚、私はJavaScriptに関して全く無知な状態です。HTML、CSSは一通り勉強済みです。その点を踏まえてご回答いただければ幸いです。 お手数ですが、ご回答いただきますよう宜しくお願い致します。
- ベストアンサー
- JavaScript
- ブラウザのスタイルシート設定の検出
多くのブラウザに、「スタイルシートを使用しない」「ユーザースタイルシートを適用」などの設定がありますが、 スタイルシートの設定を、何らかの方法で検出したいので、方法を教えてください。 javascriptが使用できるか判定するように、スタイルについても判定したいのですが、 例えば、あるidに、display:inline; が適用されているか、display:blockが適用されているかを検出する方法であれば、javaScriptでもDOMでもアクションスクリプトでも、方法は問いませんので、よろしくお願いします。
- ベストアンサー
- HTML
- ＰＨＰ化したＣＳＳでブラウザを判定する
ＩＥやファイヤフォックスなどの ブラウザによって、スタイルシートの効果というか 表示のされ方が微妙に違いますよね。 ただ、大幅に違うわけではなく 微妙な違いなので、スタイルシートを別々に つくりたくないのです。 そこでスタイルシートをＰＨＰ化して ブラウザを判定（例えばUserAgentで判定）ということは できないでしょうか？ 仮に#headerというＩＤがあったとして ファイヤフォックスの時には padding:10px; それ以外なら padding:0; という感じです。 申し訳ないんですが具体的な ソースでお示しくださいますよう よろしくお願いします。
- ベストアンサー
- PHP
- javascriptで画像を表示する
javascriptで画像を表示した際に、表示したimgにCSSのidを付与したいのですが、以下のようにしても画像にidはつきませんでした。 document.write("<img src='images/image.jpg' id='example'>"); 一部の画像のみにスタイルを適用したいので、画像それぞれに異なるidを与えたいのですが、javascriptで表示させる場合のやり方がわかりませんでした。 どうやってidを割り当てるのか教えてください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ブラウザの種類、バージョンの判定
今、JavaScriptの勉強をしています。 それで、ブラウザの種類、バージョンによって 書き分けないといけないということらしいのですが、 どうやって判別したらいいのでしょうか？ 「機能があるかないかで調べる」というのを聞いたのですが 実際にはどのように書けばいいのでしょうか？ だれかおしえてください。おねがいします。
- 締切済み
- JavaScript
- Jsで画像同士の当たり判定
タイトルの通りですが、Aという画像がBに当たると当たり判定がなされBという画像が消えるというJavascriptを書きたいです。 Jsの知識が全くないため、どのように書くのかわからないです。 どのように書くのかなどでも良いのでアドバイスお願いします。
- 締切済み
- JavaScript
- JavaScriptでHTML内に記入されている日付を判定して画像を表
JavaScriptでHTML内に記入されている日付を判定して画像を表示させることはできますでしょうか？ 例えばこんなソースがあったとします。 <table style="width: 66%"> <tr> <td style="style1"></td> <td style="style2">2010/11/1</td> <td> </td> </tr> <tr> <td style="style1"></td> <td style="style2">2010/09/09</td> <td> </td> </tr> <tr> <td style="style1"></td> <td style="style2">2010/01/01</td> <td> </td> </tr> </table> テーブルの行の中に今日の日付から７日以内だった場合、該当行の<td style="style1"></td>に「NEW!」っていう画像を入れてあげたいのですがそういうのは可能でしょうか？
- ベストアンサー
- JavaScript
- 画像を切り替えるCGI
ボタンで画像を切り替えるcgiって見たことありますか? Javascriptでは、リロードで画像が元のデフォルト画像に戻ってしまいます。 サイト上で、ボタンを押したら、他のボタンを押し直すまで、選択した画像が表示されるというようなものです。 on・offの二つのボタンがあった場合、どっちを押してもそれぞれに設定してある画像を、押すたびにデフォルトに表示したいのです。
- 締切済み
- CGI
- Javaでブラウザ判定
Javaでブラウザの判定を行いたいのですが 何かありますでしょうか？ なにぶん初心者なもので どうしたらいいか検討もつきません。 JavaScriptでの判定方法は navigator.appNameなどで出来るみたいですが JavaScriptではなく Javaで出来るかどうか探しているのですが 分かる方がいらっしゃいましたら ご教授下さい。 よろしくお願いします。
- ベストアンサー
- Java
- 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
お礼
autyさん、回答ありがとうございます。 すみません、言葉が足りませんでした。 画像が表示されない (ブラウザ側で表示を切っている、リンク切れ) 場合にのみスタイルを適用したいと思っています。 それで、リンク切れの場合には対処できるのですが、ブラウザ側で表示を切っている場合、javascriptでそれを確認することはできるんでしょうか？という意味のつもりでした。 せっかく回答していただいたのにすみません。
補足
とあるぺーじに期待していたスクリプトがあったので、同じ内容で検索された方のためにこの場を借りてURLを載せておきます。 http://gunner.jp/blog/files/