ベストアンサー

特定の画像を非表示にする方法

2007/07/23 19:13

CSSかJavascriptを使って、自動的にページに組み込まれてしまう画像を非表示にしたいです。ソースに特定の画像を非表示にする内容を書き込むと思うのですが・・（非表示にする画像のURLを指定？）よろしくお願いいたします。

shitimi
お礼率51% (92/178)

JavaScript
回答数3
ありがとう数0

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

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

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2007/07/24 19:45 回答No.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)

2007/07/24 00:45 回答No.2

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も動作検証はしてないのでうまくいかなかったら状況と自動追加されるコードというのを補足してみてください。

質問者

補足 2007/07/24 18:36

度々ありがとうございます。CSSとJacascript両方を試してみたところ、うまく行きませんでした。このコード自体は正しいと思うのですが、恐らく画像のソースがフレームで追加されるためうまく行かないのだと思われます。以下がソースです。よろしくお願いいたします。＃自動的にソースの最後に追加されるコード  <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>  ＃フレーム内のソース <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>

ログインすると、全ての回答が全文表示されます。

steel_gray
ベストアンサー率66% (1052/1578)

2007/07/23 19:19 回答No.1

CSSでもJavascriptでも実現できる可能性はあります。どちらにせよ、その画像が特定できる必要性はあります。必ずページの最初にあるとか、idが付いてるとか、 URLがわかるならURLでもかまわないかも。とにかく正確に画像を特定できる条件が必要です。どういった画像なんでしょうか？自動的に組み込まれる、というので気になりますが、無料サービスの広告バナーとかであればそれを非表示にする方法はアドバイスできません。

質問者

補足 2007/07/23 22:09

アドバイスありがとうございます。できればCSSで実現できたらと思います。 tumlbrの「reblog」の画像を非表示にして、reblog禁止にしたいと思っています。画像は必ずソースの最後に自動的に追加されます。今はとりあえずdisplay:noneで丸ごと非表示にしているのですが、他の機能も非表示になってしまうので「reblog」の画像のみを非表示にしたいと思っています。画像のURLは分かります。idはついていませんが、form actionというのはついています。よろしくお願いいたします。

ログインすると、全ての回答が全文表示されます。