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

解決済

質問者：shitimi
質問日時：2007/07/23 19:13
回答数：3件

CSSかJavascriptを使って、自動的にページに組み込まれてしまう画像を非表示にしたいです。

ソースに特定の画像を非表示にする内容を書き込むと思うのですが・・（非表示にする画像のURLを指定？）

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： steel_gray
回答日時：2007/07/24 19:45

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>

- 0
- 件

通報する

No.2

回答者： steel_gray
回答日時：2007/07/24 00:45

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

この回答への補足

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

＃自動的にソースの最後に追加されるコード


<iframe src="http://www.tumblr.com/publisher/iframe?src=http% …
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>

補足日時：2007/07/24 18:36

通報する

- 0
- 件

通報する

No.1

回答者： steel_gray
回答日時：2007/07/23 19:19

CSSでもJavascriptでも実現できる可能性はあります。

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

この回答への補足

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

補足日時：2007/07/23 22:09

通報する