人に聞けない痔の悩み、これでスッキリ >>

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0

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


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

<!-- BEGIN TUMBLR CODE -->
<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>
<!-- 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>

補足日時:2007/07/24 18:36
    • good
    • 0

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


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

この回答への補足

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

補足日時:2007/07/23 22:09
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSを利用して、特定のリンクや画像を非表示にしようと思っています。

CSSを利用して、特定のリンクや画像を非表示にしようと思っています。

img[src="画像URL"] {display:none !important;}
a[href^="URL"]{display:none !important;}

これで、Opera、Firefox、Safariではできたのですが、
IE6ではできません。
IE6で有効な方法を教えてください。

Aベストアンサー

子供・隣接・属性などのセレクタは、IE6以下は未対応です。
非常に便利なのですが、
IE6シェアがまだ10%以上あると言われていますので、使えません。
IE6撲滅運動もあるようですが、シェア1%程度になるには、
おそらく、2014年以降になると思います。
それまでは、
id や class を割り当てて対応するか、IE6以下を無視するかしかありません。
----------------------------------
方法は、知っている思いますが、
個別に対応するしかないでしょう。一応書いておきます。

<a href="/" class="del">消える</a>
<img src="test.gif" width="50" height="50" alt="*" id="del" />

#del , .del{display:none !important;}

--------------------------
ハックや分岐させても良いですが。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QJavaScriptで文字列の特定文字以降を取得する方法

変数 url に以下のような文字列が代入されています。
var url='http://www.example.com?id=2&page=3';

ここから?以降の文字列だけを取得したいのですが、どのようにすれば良いのでしょうか?
「id=2&page=3」←このような結果が欲しいです。

ブラウザのurlから直接?以降を取得するには location.search を使えば良いというのは調べてわかりましたが、変数に文字列としてurlが代入された場合の方法がわかりません。

ご回答よろしくお願いいたします。

Aベストアンサー

文字列から抽出するのであれば、indexOfを使うか正規表現かでしょうね
深く考えなければ前者、複雑なデータを取りたいなら後者でしょうか

<script>
var url='http://www.example.com?id=2&page=3';
if(url.indexOf("?")>=0){
var str1=url.substring(url.indexOf("?")+1,url.length);
}
document.write(str1+"<br>");

var reg=new RegExp("\\?(.+?)$");
if(url.match(reg)){
var str2=url.match(reg)[1];
}
document.write(str2);
</script>

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Q表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか?

複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。
なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。
最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか?

●例えば、test1を押した際、test2と3は非表示としたいです。

<script language="JavaScript" type="text/JavaScript">
<!--
function ChDsp2(strShow,strHidden){
var obj='';
obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow);
obj.style.display = "block";
obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden);
obj.style.display = "none";
}
//-->
</script>

<a href="javascript:ChDsp2('text1','text2');">1を表示</a>
<a href="javascript:ChDsp2('text2','text1');">2を表示</a>
<a href="javascript:ChDsp2('text3','text1');">3を表示</a>


<span id="text1" style="display:block;">111111</span>
<span id="text2" style="display:none;">222222</span>
<span id="text3" style="display:none;">333333</span>


どなたか教えてください。お願いします。

複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。
なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。
最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか?

●例えば、test1を押した際、test2と3は非表示としたいです。

<script language="JavaScript" type="text/JavaScript">
<!--
function ChDsp2(strShow,strHidden){
var obj='';
obj=document.all && ...続きを読む

Aベストアンサー

きれいに消しこみができていませんね。
こういうのはグルーピングした方がすっきりします。
こんな感じでどうでしょ?

<style>
.hide{display:none;}
.r{ background-Color:red;}
.g{ background-Color:green;}
.b{ background-Color:blue;}
</style>
<script>
function ChDsp2(strShow,classHidden){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className.match('textALL')){
tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,"");
if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide';
}
}
return false;
}
</script>

<a href="#" onclick="return ChDsp2('text1','textALL');">1を表示</a>
<a href="#" onclick="return ChDsp2('text2','textALL');">2を表示</a>
<a href="#" onclick="return ChDsp2('text3','textALL');">3を表示</a>


<div id="text1" class="textALL r">111111</div>
<div id="text2" class="textALL g hide">222222</div>
<div id="text3" class="textALL b hide">333333</div>

きれいに消しこみができていませんね。
こういうのはグルーピングした方がすっきりします。
こんな感じでどうでしょ?

<style>
.hide{display:none;}
.r{ background-Color:red;}
.g{ background-Color:green;}
.b{ background-Color:blue;}
</style>
<script>
function ChDsp2(strShow,classHidden){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className.match('textALL')){
tags[i].className=tags[i].className.replace(/hid...続きを読む

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む


人気Q&Aランキング