- ベストアンサー
特定の画像を非表示にする方法
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というのはついています。よろしくお願いいたします。
補足
度々ありがとうございます。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>