- ベストアンサー
特定の画像を非表示にする方法
CSSかJavascriptを使って、自動的にページに組み込まれてしまう画像を非表示にしたいです。 ソースに特定の画像を非表示にする内容を書き込むと思うのですが・・（非表示にする画像のURLを指定？） よろしくお願いいたします。
- shitimi
- お礼率51% (92/178)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
iframeですとCSSでは不可能です。（親ページでどんなスタイルを書いてもiframeの内側は別のページですから） で、Javascriptはたぶんこんな感じ。 （最後に追加される、って事だったけど、消したいimgは最後の「alt="Dashboard"」じゃなくて「alt="ReBlog"」の画像でいいんですよね？） <script type="text/javascript"> window.onload=function(){ var ifr = document.getElementsByTagName('iframe'); var lastIfr = ifr[ifr.length -1]; var anchorList; if(lastIfr.contentDocument) { anchorList = lastIfr.contentDocument.getElementsByTagName('a'); } else if(lastIfr.contentWindow){ anchorList = lastIfr.contentWindow.document.getElementsByTagName('a'); } if(anchorList.length>0) anchorList[0].style.display='none'; } </script>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
CSSでは img[src="画像のアドレス"]{display:none;} このように書くことで src="～"のimgだけを対象にできます。 ただし、メジャーブラウザの中では一番シェアの多いIE6が対応していないセレクタなんで Javascriptも一応一緒に。 <script type="text/javascript"> window.onload=function(){ var imgList = document.getElementByTagName('img'); for(var i=0;i<imgList.length;i++) { if(imgList[i].src=='画像のURL') imgList[i].style.display = 'none'; } } </script> CSSもJavascriptも動作検証はしてないのでうまくいかなかったら状況と自動追加されるコードというのを補足してみてください。
- steel_gray
- ベストアンサー率66% (1052/1578)
CSSでもJavascriptでも実現できる可能性はあります。 どちらにせよ、その画像が特定できる必要性はあります。 必ずページの最初にあるとか、idが付いてるとか、 URLがわかるならURLでもかまわないかも。 とにかく正確に画像を特定できる条件が必要です。 どういった画像なんでしょうか？ 自動的に組み込まれる、というので気になりますが、無料サービスの広告バナーとかであればそれを非表示にする方法はアドバイスできません。
補足
アドバイスありがとうございます。できればCSSで実現できたらと思います。 tumlbrの「reblog」の画像を非表示にして、reblog禁止にしたいと思っています。画像は必ずソースの最後に自動的に追加されます。今はとりあえずdisplay:noneで丸ごと非表示にしているのですが、他の機能も非表示になってしまうので「reblog」の画像のみを非表示にしたいと思っています。画像のURLは分かります。idはついていませんが、form actionというのはついています。よろしくお願いいたします。
関連するQ&A
- 特定のURLからのアクセスがあったら表示されない。
特定のURLからのアクセスがあったら、そのページが表示されないJavaScriptがわかりません。 referrer を取得して・・・ということだけはわかっていますが、なにせ初心なものでそれ以上わかりません。 ・リファラを取得する ・指定したＵＲＬと合致すれば、そのページを開かない ・指定したＵＲＬ以外の場合は、そのページを開く よろしくご教授お願いいたします。
- ベストアンサー
- JavaScript
- 特定のページにのみ特定のCSSを適用させる方法
グーグルブログ(blogger)を利用しています。 特定のタグでページをリスト表示した時のみ、特定のCSSを、あらかじめ指定しておいたdiv部にのみ適用させる。といったJavascriptのコードを教えてください。 *ちなみに、タグでページをリスト化したときのURLは以下です。(exampleは例です) http://example.blogspot.com/search/label/example/ どうぞ宜しくお願いいたします。
- 締切済み
- JavaScript
- popup画像が消えてしまい表示されません
これまではjavascriptを使い、サムネイル画像をクリックしたらサイズを指定した別の小窓に拡大画像を表示するように設定していたのですが、現在表示されなくなってしまいました。サーバー側にアップしたページのソースを見てみると、画像についてのタグの部分が完全に消えてしまっています。popup画像以外の貼り付けた画像はちゃんと表示されていますし、ローカルサイトでは全てがきちんと表示されます。 なお、ソースのhead内に以下のようなおかしな記述が出ていて、意味がわかりません。全てのページに出ています。 <script language="JavaScript"> <!-- function SymError() { return true; } window.onerror = SymError; var SymRealWinOpen = window.open; function SymWinOpen(url, name, attributes) { return (new Object()); } window.open = SymWinOpen; //--> </script>
- ベストアンサー
- JavaScript
- 複数の画像をランダムに表示させるソースを教えて？
画像は50枚前後、画像といってもリンクバーで画像毎にそれぞれの違ったリンク先ＵＲＬも指定したく、（target="_blank"）なおかつ表示箇所はテーブル内のセル8箇所で、重複しないようにランダムに表示させたいです。と、ＸＨＴＭＬで書かれた既存ページで使うのでスクリプトは外部ファイル（ｊｓ）にして、ページコード上では<body onload="____"><img id="～>等で読み込ませたいです。※ＸＨＴＭＬではname属性は使えません。また私はjavascriptについて全くの素人ですので、画像数、ＵＲＬ、パス等を書き換えるだけで直ぐに使えるソースが欲しいです。どなたか教えて頂けると幸いに存じます。
- ベストアンサー
- JavaScript
- JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動
JavaScriptでランダムに画像を表示させ、5秒ぐらいで画像は自動切換え、さらにその画像にリンク先urlの指定のやり方をわかる方いらっしゃいましたら教えてください。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは過去質問でわかったのですが、その画像にリンクさせる方法をお願い致します。 JavaScriptでランダムに画像を表示、5秒ぐらいで自動切換えまでは http://www.tagindex.com/kakolog/q4bbs/201/360.html こちらの質問内記載のタグを参照させて頂きました。 これに個々の画像にリンクをつけたいのです。 よろしくお願い致します。
- ベストアンサー
- インターネットビジネス
- 画像をランダム表示させたい
画像を5枚横並びにランダム表示させたいです。 XHTMLとCSSでサイトを制作しようと考えています。 イメージフォルダに複数の画像データを格納、そこからアクセス毎にランダム（同じものが表示されないよう）表示。 画像をクリックすると指定したページにリンク。 下記URLページ右の真ん中あたりにある感じのものです。 http://picpi.net/main.html 方法としてはCGI、Javascriptなどいろいろあると思うのですが、まったくわからない人間です。 参考になるサイト、もしくは答えまで出して頂けると大変助かります。 以下、参考までにサーバ環境です。 perl5.8.、Ruby1.8.、Python2.4.、PHP4.4.、PHP5.1.、MySQL4.0.25、ColdFusion が使えるそうです。
- 締切済み
- JavaScript
- 画像を左右に表示させる方法
いつもお世話になっております。 ある画像を、 body{background:url(xxx.gif) repeat-y #ffffff; } とcssで指定し左側に表示させました。 この画像を反転させて右側にも表示させたいのですが、 body要素に2つbackgroundを挿入すると、 当然後に指定した画像しか表示させません。 何か良い方法があればご教授下さい。
- ベストアンサー
- HTML
- 画像の一部分をスクロールして表示する方法
画像の一部分をスクロールして表示する方法 初めて質問させていただきます。 一枚の画像の一部分を表示させ、画像をスクロールさせる→次の画像へ移る という見せ方をしたいと思っています。 参考サイト：http://www.kmad.jp/index.html ここのトップページのような形が出来たらと思っています。 HTMLとCSSには少し慣れてきたのですが、JavaScriptは初心者で全く分からない状態です。 もしJavaScript以外の方法でいいやり方があれば、そちらも教えていただけるとありがたいです。 すみませんが、詳しい方、宜しくお願いします。
- ベストアンサー
- JavaScript
- 画像をCSSのurlを使って表示する方法
./gazou/background/bg005.gifこちらに画像ファイルがあるのですが、この画像をCSSのurlを使って表示するときどのように指定すればよいのでしょうか？ ./basecss.cssに background-image :url("./gazou/background/bg005.gif");と記載してもうまくいきません。 カレントデイレクトリはすべて同じデイレクトリです。 CSSもカレントデイレクトリは./ではないのでしょうか？ほかのフォルダにある画像ファイルは問題なく表示されます。 {background-image:url("../test/gazou/background/bg006.gif"); 上記はうまくいく。
- ベストアンサー
- CSS
- クリックしたらJavaScriptで数カ所に一度に画像を表示させたい
以下のようなことがJavaScriptでできるでしょうか？ できる場合、関数等のヒントをいただけないでしょうか。 webページにおいて、 「画像を表示」というリンク、あるいは同様のボタンをクリックすると、 同ページ内の複数の場所（特定）に、それぞれ指定した画像を一度に表示させる。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
補足
度々ありがとうございます。CSSとJacascript両方を試してみたところ、うまく行きませんでした。このコード自体は正しいと思うのですが、恐らく画像のソースがフレームで追加されるためうまく行かないのだと思われます。以下がソースです。 よろしくお願いいたします。 ＃自動的にソースの最後に追加されるコード <!-- BEGIN TUMBLR CODE --> <iframe src="http://www.tumblr.com/publisher/iframe?src=http%3A%2F%2Fsmd.tumblr.com%2Fpost%2F6598611&pid=6598611" border="0" scrolling="no" width="278" height="25" allowTransparency="true" frameborder="0" style="position:absolute; top:0px; right:0px; border:0px; background-color:transparent; z-index:1337; overflow:hidden;"></iframe> <!-- END TUMBLR CODE --> ＃フレーム内のソース <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body style="background-color:transparent; margin:0px; padding:0px;"> <div style="border-bottom:solid 2px #1c1c1c; position:absolute; top:0px; right:0px; white-space:nowrap; height:23px;"> <img src="/images/iframe_left_border.gif" alt="" style="width:5px; height:23px; border-width:0px; display:block; float:left; background-color:#858585;"/> <a href="/reblog/xxxxxxx " target="_top"><img src="/images/iframe_reblog.gif" alt="ReBlog" style="height:23px; width:73px; border-width:0px; display:block; float:left;"/></a> <form action="/add_friend" method="post" style="display:block; float:left;"> <input type="hidden" name="id" value="xxxxx"/> <input type="image" src="/images/iframe_add_to_friends.gif" style="width:109px; height:23px; border-width:0px; display:block;" alt="Add to friends"/> </form> <a target="_top" href="http://www.tumblr.com/dashboard"><img src="/images/iframe_dashboard.gif" alt="Dashboard" style="height:23px; width:91px; border-width:0px; display:block; float:left;"/></a> </div> </body> </html>