リンクの有無を判別して画像の表示/非表示を自動で行いたい
こんにちは。
いつもお世話になっております。
<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>
このような記述を行いましたが、オブジェクトを指定してください、というエラーが出てしまいました。
色々なサイト様を参考に試してみましたが、上手く動作せず完全に行き詰ってしまいました。
どなたかご教授下さい。
質問内容に不備がありましたら申し訳ございません。
よろしくお願い致します。
No.8ベストアンサー
- 回答日時:
やっぱり
function nolink(){
if(document.getElementById("link01").getAttribute("href") != ""){
document.getElementById("link01").style.display = 'inline';
}
else{
document.getElementById("link01").style.display = 'none';
}
}
にしてね
ご回答ありがとうございます。
こちらで試してみましたが、やはり正常には動作しませんでした。
ですが、href属性の値取得について調べてみたところ、IEではフルパスで取得してしまうとのことでしたので、getAttribute("href")をgetAttribute('href','2')に変更したところ、無事解決致しました。
何度も回答頂き、大変感謝しております。
yyr446様に記述して頂いたJavaScriptを元に解決しましたので、今回はベストアンサーに選ばさせて頂きます。
ありがとうございました!
No.10
- 回答日時:
#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に備わっている機能を代替するだけなら既存のライブラリで十分ではないでしょうか。
ご回答ありがとうございます。
yuu_x様の記述はCSSだったのですね。
すっかり勘違いしておりまして、<script></script>で囲んでいました・・・。
属性セレクタというものは初めて知ったので、とても役に立ちました。
しかし残念ながら、私が導入を考えているページでは上手く動作しませんでした。
PHPで変数としてhrefを扱っているからかと思います。
また、文章型宣言は入れずにページを構成していた為、このCSSを動かす為に文章型宣言を入れると他のレイアウトが崩れてしまいました。
また、以前の改良版ということで記述を頂いた方ですが、何故かこちらではエラーになってしまいました。
JavaScript-XPathもダウンロードしたのですが・・・。
ですが、非常に役に立つ情報を多数頂き、本当に感謝しております。
JavaScriptやそれに関連することを今後も頑張って勉強していこうと思います。
ありがとうございました!
No.9
- 回答日時:
#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);">
No.6
- 回答日時:
#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を書き直す、ということも出来ません。
ですが、今後の参考にさせて頂きたいと思います。
ご丁寧なご回答、ありがとうございました。
No.5
- 回答日時:
勉強がてら、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;
}
-------------
文字数制限につき、次の記事に続きます。
No.4
- 回答日時:
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()">で呼び出したのですが、どこか間違っているのでしょうか。
重ね重ねの質問で申し訳有りません。
よろしくお願い致します。
No.3
- 回答日時:
エスケープミスでした。
<body onload="document.querySelector('a[href=\'\']').style.display='none';">
この回答への補足
ご回答ありがとうございます。
早速動作確認をしたのですが、「オブジェクトでサポートされていないプロパティまたはメソッドです。」というエラーが出てしまい、正しく動作しませんでした。
当方で使用しているブラウザはIE8なのですが・・・。
我が儘を言って申し訳ないのですが、古いブラウザにも対応していると助かります。
よろしくお願い致します。
No.2
- 回答日時:
javascriptで、1行です。
※古いブラウザーはだめよ(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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
食材の期限を管理するためにGAS...
-
ジェネレーターの作り方
-
このプログラムに、王手をかけ...
-
翌月を取得するGASが分かりません
-
jquaryでsettimeは
-
Coinmarketcap api
-
URLのパラメータを取得しリンク...
-
Javascriptで、以下の様な足し...
-
GASを使ってGoogle Formの選択...
-
google apps scriptの終了のさせ方
-
C言語の質問です HTMLでこのよ...
-
このプログラムに王様の逃げ道...
-
GASでundefinedエラーが出ます
-
ジャバスプリクトについて
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
innerHTML実行後のイベント
-
これで何故震えるのか、とても...
-
document.writeで画面が消える
-
document.write()の()内にタグ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
この将棋プログラムに王様ゲッ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
翌月を取得するGASが分かりません
-
なぜmatchメソッドがエラーにな...
-
gas スプレッドシートがアクテ...
-
C#で、ContextMenuStripに動的...
-
ローカルにあるファイルを検索...
-
VSCODE[Python]の設定について
-
JavaScriptで、現在日時から100...
-
JavaScriptで文字列の特定文字...
-
イベントが初めの一回しか起き...
-
javascriptでテーブルに追加し...
-
シンプルなweb版スタンプラリー...
-
javascriptでiframeのURL変更は?
-
ASP.NETのコントロールの値をJa...
-
ASP.NET MVCでObjectをjsに渡す
-
googleスプレッドシートのApps ...
おすすめ情報