プロが教えるわが家の防犯対策術！

リンクの有無を判別して画像の表示/非表示を自動で行いたい

解決済

  • 質問者：shian_000
  • 質問日時：
  • 回答数：10件

リンクの有無を判別して画像の表示/非表示を自動で行いたい
こんにちは。
いつもお世話になっております。

<a href="リンクURL"><img src="画像URL"></a>
このようなタグで画像リンクを貼り、hrefのURLの値が空欄("")でない場合、画像をdisplayで非表示にするJavaScriptを組もうとしています。
ボタン等は使用せず、ページの読み込みと同時に実行させたいです。
リンクURLはPHPの別プログラムを使用し変数で呼び出しています。

＜JavaScript＞
function nolink(){
if(document.aaa.link01.href != ""){
document.aaa.gazou.style.display = 'block';
}
else{
document.aaa.gazou.style.display = 'none';
}
}

＜BODY＞
<body onload="nolink()">
<form name="aaa">
<a href="{変数}" name="link01"><img src="abc.jpg" name="gazou"></a>
</form>

このような記述を行いましたが、オブジェクトを指定してください、というエラーが出てしまいました。

色々なサイト様を参考に試してみましたが、上手く動作せず完全に行き詰ってしまいました。
どなたかご教授下さい。
質問内容に不備がありましたら申し訳ございません。
よろしくお願い致します。

通報する

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

質問の本文を隠す

A 回答 (10件)

No.8ベストアンサー

  • 回答者： yyr446
  • 回答日時：

やっぱり


function nolink(){
　if(document.getElementById("link01").getAttribute("href") != ""){
　　document.getElementById("link01").style.display = 'inline';
　}
　else{
　　document.getElementById("link01").style.display = 'none';
　}
}
にしてね
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

こちらで試してみましたが、やはり正常には動作しませんでした。
ですが、href属性の値取得について調べてみたところ、IEではフルパスで取得してしまうとのことでしたので、getAttribute("href")をgetAttribute('href','2')に変更したところ、無事解決致しました。

何度も回答頂き、大変感謝しております。
yyr446様に記述して頂いたJavaScriptを元に解決しましたので、今回はベストアンサーに選ばさせて頂きます。

ありがとうございました！

通報する
お礼日時：2010/06/04 09:50

No.10

  • 回答者： think49
  • 回答日時：

#5,6,9 です。



#9で使用した document.evaluate() はライブラリを使うことで旧来のブラウザにも対応することが出来ます。
IE8もOKでした。

JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
http://d.hatena.ne.jp/amachang/20071112/1194856493


ただ…、ここまで書いておいていうのも何ですが、

<style type="text/css"><!--
a[href=""] {
　display : none;
}
--></style>

を使うと、属性セレクタを使用可能なIE7以降、モダンブラウザは対応できています。(#1さんの回答より)

スタイルシート［CSS］/CSSの基本 - TAG index Webサイト
http://www.tagindex.com/stylesheet/basic/index.h …

JavaScriptを利用するなら、「属性セレクタ」未対応のブラウザにだけ定義すべきですが、そのぐらいなら、IE9.js を利用するのが一番手っ取り早いと思います。

ie7-js - Project Hosting on Google Code
http://code.google.com/p/ie7-js/

queryProperty() はCSSで表現できない振る舞いを定義するのには良い方法ですが、元々CSSに備わっている機能を代替するだけなら既存のライブラリで十分ではないでしょうか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

yuu_x様の記述はCSSだったのですね。
すっかり勘違いしておりまして、<script></script>で囲んでいました・・・。
属性セレクタというものは初めて知ったので、とても役に立ちました。

しかし残念ながら、私が導入を考えているページでは上手く動作しませんでした。
PHPで変数としてhrefを扱っているからかと思います。
また、文章型宣言は入れずにページを構成していた為、このCSSを動かす為に文章型宣言を入れると他のレイアウトが崩れてしまいました。

また、以前の改良版ということで記述を頂いた方ですが、何故かこちらではエラーになってしまいました。
JavaScript-XPathもダウンロードしたのですが・・・。

ですが、非常に役に立つ情報を多数頂き、本当に感謝しております。
JavaScriptやそれに関連することを今後も頑張って勉強していこうと思います。

ありがとうございました！

通報する
お礼日時：2010/06/04 09:47

No.9

  • 回答者： think49
  • 回答日時：

#5,6です。


IEでも動作するようにしました。

------
<script type="text/javascript" src="./javascript-xpath-latest-cmp.js"></script>
<script type="text/javascript"><!--
function queryProperty(styleSheets, properties){
　var trimReg = /^\s+|\s+$/g;
　var result = [];
　var index, match;

　properties = (properties.replace(/^\(\s*|\s*\)$/g, '')).split(/\)\s*and\s*\(/);
　for(var i=0, l=properties.length; i<l; i++){
　　index = properties[i].indexOf(':');
　　properties[properties[i].substring(0,index).replace(trimReg, '')] = properties[i].substring(index+1, properties[i].length).replace(trimReg, '');
　}

　for(var i=0,l=styleSheets.length; i<l; i++){
　　for(var j=0, cssRules=styleSheets[i].cssRules||styleSheets[i].rules, m=cssRules.length; j<m; j++){
　　　for(var key in properties){
　　　　if(properties.hasOwnProperty(key)){
　　　　　match = (cssRules[j].style[key] === properties[key]) ? true : false;
　　　　}
　　　}
　　　if(match){
　　　　result.push(cssRules[j]);
　　　}
　　}
　}
　return result.length ? result : null;
}

function selectorText2XpathExpression(selectorText){
　var xpathExpression;
　selectorText = selectorText.match(/^([a-zA-Z]+)\[([a-z]+=(?:"[^\u0022]*"|'[^\u0027]*'))\]$/);　// IEの selectorTextプロパティ は A{href=''} を返す
　xpathExpression = '//'+selectorText[1].toLowerCase()+'[@'+selectorText[2]+']';
　return xpathExpression;
}

function diplayNone(event){
　var doc = event.target || this.document;
//　var cssRules = queryProperty(doc.styleSheets, '( display: none ) and ( -think-display: none )');　// 独自に拡張したプロパティ(-think-display) はGoogleChrome4.1で拾えない
　var cssRules = queryProperty(doc.styleSheets, '( display: none ) and ( color: white )');　// CSS規定のプロパティは拾える
　var targets;

　for(var i=0, l=cssRules.length; i<l; i++){
　　targets = doc.evaluate(selectorText2XpathExpression(cssRules[i].selectorText), doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

　　for(j=0, m=targets.snapshotLength; j<m; j++){
　　　targets.snapshotItem(j).style.display = 'none';
　　}
　}

}
//--></script>
</head>
<body onload="diplayNone(event);">
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： yyr446
  • 回答日時：

yyr446です。


ごめんなさい。<a>はインライン要素だから、
display='block'じゃなくdisplay='inline'
でした。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： think49
  • 回答日時：

#5の続き。



-------------
function diplayNone(event){
　var doc = event.target || this.document;
//　var cssRules = queryProperty(doc.styleSheets, '( display: none ) and ( -think-display: none )');　// 独自に拡張したプロパティ(-think-display) はGoogleChrome4.1で拾えない
　var cssRules = queryProperty(doc.styleSheets, '( display: none ) and ( color: white )');　// CSS規定のプロパティは拾える
　var targets, index;

　for(var i=0, l=cssRules.length; i<l; i++){
　　index = cssRules[i].cssText.indexOf('{');
　　targets = querySelectorAllCustom(doc, cssRules[i].cssText.substring(0,index));
　　for(j=0, m=targets.length; j<m; j++){
　　　targets[j].style.display = 'none';
　　}
　}
}
//--></script>
</head>
<body onload="diplayNone(event);">

<ul>
　<a href="http://examle.com/"><img src="test.png" alt="test" /></a>
　<a href=""><img src="test.png" alt="test" /></a>
　<a href=""><img src="test.png" alt="test" /></a>
　<a href=""><img src="test.png" alt="test" /></a>
</ul>
------------

IE8で動作しなかったり、独自プロパティに反応しなかったり、とまだまだ改良の余地はありそうです。

この回答への補足

ご回答ありがとうございます。

せっかく頂いたご回答なのですが、当方の使用ブラウザがIE8ですので、IE8で動作しない、というのは大変困ります。(当方の説明不足でした。申し訳有りません。)
また、JavaScriptの知識もまだまだ未熟ですので、頂いたJavaScriptを書き直す、ということも出来ません。

ですが、今後の参考にさせて頂きたいと思います。
ご丁寧なご回答、ありがとうございました。

補足日時：2010/06/03 17:26
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： think49
  • 回答日時：

勉強がてら、queryProperty(styleSheets, properties) と querySelectorAllCustom(doc, selector) なる関数を作ってみました。


(全角空白は半角空白に置換してください)

------------
<style type="text/css"><!--
a[href=""] {
　display : none;
　color: white;
　-think-display: none;
}
--></style>
<script type="text/javascript"><!--
function queryProperty(styleSheets, properties){
　var trimReg = /^\s+|\s+$/g;
　var result = [];
　var index, match;

　properties = (properties.replace(/^\(\s*|\s*\)$/g, '')).split(/\)\s*and\s*\(/);
　for(var i=0, l=properties.length; i<l; i++){
　　index = properties[i].indexOf(':');
　　properties[properties[i].substring(0,index).replace(trimReg, '')] = properties[i].substring(index+1, properties[i].length).replace(trimReg, '');
　}

　for(var i=0,l=styleSheets.length; i<l; i++){
　　for(var j=0, cssRules=styleSheets[i].cssRules, m=cssRules.length; j<m; j++){
　　　for(var key in properties){
　　　　match = (cssRules[j].style[key] === properties[key]) ? true : false;
　　　}
　　　if(match){
　　　　result.push(cssRules[j]);
　　　}
　　}
　}
　return result;
}
function querySelectorAllCustom(doc, selector){
　var trimReg = /^\s+|\s+$/g;
　var selectorReg = /^([a-z]+)\[([a-z]+)="([^\u0022]*)"\]/;
　var index, match, node, result = [];

　match = selector.replace(trimReg, '').match(selectorReg)

　if(match.length){
　　node = doc.getElementsByTagName(match[1]);
　　if(match.length > 1){
　　　for(var i=0, l=node.length; i<l; i++){
　　　　if(node[i].getAttribute(match[2]) === match[3]){
　　　　　result.push(node[i]);
　　　　}
　　　}
　　}
　}
　return result;
}
-------------

文字数制限につき、次の記事に続きます。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yyr446
  • 回答日時：

IE8でエラーが出る


＝＞ああ、標準モードになってないんですね。
文章型宣言（<!DOCTYPE ～）が何もないのでしょう。
古いブラウザにも対応云々は別として、HTML4.01 Trasitionalぐらいは準拠しましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">

を付けましょう。

ある程度新しいブラウザーなら、よくある方法としてお手軽なのは、
対象要素にidを付加して

<a href="{変数}" id="name1" name="link01"><img src="abc.jpg" name="gazou"></a>

document.getElementById("link01")で要素を拾います。

こう↓なります。
function nolink(){
　if(document.getElementById("link01").href != ""){
　　document.getElementById("link01").style.display = 'block';
　}
　else{
　　document.getElementById("link01").style.display = 'none';
　}
}
で、<A>要素ごと非表示になるはずです。

id付けるのがいや（同じnamenoの要素がない前提で）なら、
　document.getElementsByName("link01")[0]
を代わりに使えます。

この回答への補足

ご回答ありがとうございます。

文章型宣言をしたところ、「';' がありません。」というエラーが発生してしまいました。
また、こちらの説明不足だったのですが、複数の画像にこの処理を行いたいです。
前回教えて頂いたJavaScriptですと、複数の画像リンクを挿入すると正しく動作しなくなってしまいました。

今回教えて頂いたidを付けて、という方はエラーは発生しませんが、正常に動作しませんでした。
hrefに値が有っても無くても画像が表示されてしまいます。
3行目のblockをnoneに替えるとどの場合でも画像が非表示になってしまいました。
function nolink(){～}を<script language="JavaScript" type="text/javascript"></script>で<HEAD></HEAD>に記述し、<BODY onload="nolink()">で呼び出したのですが、どこか間違っているのでしょうか。

重ね重ねの質問で申し訳有りません。
よろしくお願い致します。

補足日時：2010/06/03 17:23
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

エスケープミスでした。


<body onload="document.querySelector('a[href=\'\']').style.display='none';">

この回答への補足

ご回答ありがとうございます。

早速動作確認をしたのですが、「オブジェクトでサポートされていないプロパティまたはメソッドです。」というエラーが出てしまい、正しく動作しませんでした。
当方で使用しているブラウザはIE8なのですが・・・。

我が儘を言って申し訳ないのですが、古いブラウザにも対応していると助かります。

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

補足日時：2010/06/03 14:34
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yyr446
  • 回答日時：

javascriptで、１行です。


※古いブラウザーはだめよ（IE8以上とかFirefox3.1以上とかChromeとか）
<body onload="document.querySelector('a[href=""]').style.display="none";">
<form name="aaa">
<a href="" name="link01"><img src="abc.jpg" name="gazou"></a>
<span name="xx" ></span>
</form>
</body>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yuu_x
  • 回答日時：

[CSS]


a[href=""] {display : none;} /*Firefox 1+ Opera 8+ IE 7+ Safari ?*/
[/CSS]

この回答への補足

ご回答ありがとうございます。

知識不足で申し訳ないのですが、どこに記述すれば良いのかがわかりません。
記述する場所をもう一度ご教授頂けますでしょうか。

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

補足日時：2010/06/03 13:44
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報