• 締切済み

rel属性を複数使用したい

XHTML 1.0 Strictなのでtarget="_blank"の代用で外部jsに function externalLinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") anchor.target = "_blank"; } } window.onload=externalLinks; として読み込みリンクに<a rel="external" ..........>としています。 その他にhighslide.jsを使用しているのですがrel属性が重複しているためか highslide.jsの動作は正常なのですがtarget="_blank"の代用の効果がありません。 rel属性が重ならないようにしたいのですが解決策はありますでしょうか？ highslide.jsのURLです↓ http://vikjavev.no/highslide/

noname#65793
noname#65793

みんなの回答

回答No.1

別件でclass属性について http://okwave.jp/qa3110635.html class="external"と指定したタグに対して有効なスクリプトも class="external attention" とすると動かなくなったりしますが、そういうことでしょうか。 もしそうなら、rel="external" と、１つだけ指定するか、 JavaScriptを、スペース区切りの指定に対応する様に自分で作り替えるか、 その制作者に作り直してもらう様にお願いするしかないと思います。 でなければTransitionalにしてtarget属性を使う、ということになるんじゃないでしょうか。 classだったら、HTMLの構造が変わってしまいますが <div class="external"><div class="attention">～</div></div>と、無理矢理２つに分けることもできるんですけどねぇ。。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 外部CSSの@charasetの取得

    外部CSSに@charsetがある場合と無い場合で、そのCSSを読み込んでいるlink要素に対して同じcharaset属性を追加したいと思っています。 (@charasetは必ずcssの1行目にあります。) 以下途中までは書いたのですが、肝心の@charasetを参照する部分がわかりませんでした。 window.onload = function() { var Link=document.getElementsByTagName('LINK'); for (var i=0;i<Link.length;i++){ var Rel= Link[i].getAttribute("rel"); if(Rel=='stylesheet' || Rel=='alternate stylesheet'){ Link[i].setAttribute("charaset", ); }}}; 対応させたいブラウザがSafariのみなのでIEに対応したりする必要はとくにありません。 よろしくお願いします。

  • javascript／他ページ内リンクでもスムーズスクロールさせたい

    javascript／他ページ内リンクでもスムーズスクロールさせたい お世話になります。 page1.htmlのページ内リンクにスムーズスクロールを設定しています。ページ内に#aとアンカー設定し、page1.html内で移動するときはもちろん問題ありません。 これをpage2.htmlからpage1.html#aにリンクさせる際にもスムーズスクロールで移動させるにはどうしたら良いのでしょうか？ そもそもそんなことはできないのでしょうか？ ソースを書かせていただきたいのですが、文字数が足りません。とりあえず最初の方だけ書きます。 var ss = { fixAllLinks: function() { var allLinks = document.getElementsByTagName('a'); for (var i=0;i<allLinks.length;i++) { var lnk = allLinks[i]; if ((lnk.href && lnk.href.indexOf('#') != -1) && ( (lnk.pathname == location.pathname) || ('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) { ss.addEvent(lnk,'click',ss.smoothScroll); } } }, smoothScroll: function(e) { if (window.event) { target = window.event.srcElement; } else if (e) { target = e.target; } else return; if (target.nodeName.toLowerCase() != 'a') { target = target.parentNode; } if (target.nodeName.toLowerCase() != 'a') return; anchor = target.hash.substr(1); var allLinks = document.getElementsByTagName('a'); var destinationLink = null; for (var i=0;i<allLinks.length;i++) { var lnk = allLinks[i]; if (lnk.name && (lnk.name == anchor)) { destinationLink = lnk; break; } } 続きは補足欄に書かせていただけそうなら書きます。 中途半端な情報かつ長文で申し訳ありません。 どんな些細なことでも構いませんので、アドバイスいただけないでしょうか。 どうぞよろしくお願いいたします。

  • html内＞テーブル内に複数のjavascriptの設置方法を教えてご教授下さい・

    皆様のお力をお借りし、javascriptを利用してリンク先の変更を無事解決できました。 次に行おうとしたのが外部ファイル(js)にて呼び出そうと試みましたが、 jsファイル内にhtmlが入っている為、不可能だということも解かりました。 html内に複数のjavascriptを、しかもテーブル内に載せてみたのですが 全てが同時に動いたり、全て動かなかったり、上のテキスト領域に記入したのに 下のリンク先が変更になっていると言う様な、良く解からない状況になりました。 下記が現在の状況なのですが、どなたか改善点をご教授願えませんでしょうか？ ・・贅沢と我侭を言えば、正解をそのまま記載していただきたいです・・・。 ＝＝＝ここから＝＝＝＝ <table border="1" width="300" height="100"> <tbody> <tr><td height="100"> <script> function change(){ var change=document.getElementById("change"); var tags=document.getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ var url="http://aaa.bbb.ccc/"; var url2="?ddd="; var url3="eee"; var url4="&fff="; if(tags[i].href.match(url)){ tags[i].href=url+url2+url3+url4+change.value; }; } } </script> <a href="http://aaa.bbb.ccc/?ddd=eee&fff=xxxxx" target="_blank"> <img src="http://aaa.bbb.ccc/image/ddd.gif"></a> <br> <input type="text" id="change"><input type="button" value="変換" onclick="change()"> </td> </tr> </tbody> </table> <br> <table border="1" width="300" height="100"> <tbody> <tr><td height="100"> <script> function change(){ var change=document.getElementById("change"); var tags=document.getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ var url="http://000.111.222/"; var url2="?333="; var url3="444"; var url4="&555="; if(tags[i].href.match(url)){ tags[i].href=url+url2+url3+url4+change.value; }; } } </script> <a href="http://000.111.222/?333=444&555=xxxxx" target="_blank"> <img src="http://000.111.222/image/333.gif"></a> <br> <input type="text" id="change"><input type="button" value="変換" onclick="change()"> </td> </tr> </tbody> </table> ＝＝＝ここまで＝＝＝＝ 自分の出来る範囲を超えているのは重々承知しておりますが 何とか実現したい事ですので、どうか宜しくお願いします。

  • javascript getelementsbytagnameについてです。

    var keisan=document.getElementsByTagName('input'); for(i=0;i<=keisan.length;i++){ if(keisan[i].getAttribute('value').match('Click')){ keisan[i].onclick=add(); } } function add() { var a = document.getElementById('number1').value; var b = document.getElementById('number2').value; var c = a - -b; alert(c); } 上のプログラムを入れると、"keisan[i]はnullです"といったエラーがでます。 kaisan.length=0になっているみたいです…。 xhtmlだと作動するのですが、htmlだと作動しません。 対応してないのでしょうか？ 宜しくお願いいたします。

  • スマートな外部javaでロールオーバーのマウスポインタを変えるには？

    お世話になります。 スマートな外部javaでロールオーバーさせましたが、マウスポインタが矢印のままで指に変わりません。どうしたらよいのでしょうか？ 【参照元】 http://blog.bluebox.in/2006/10/javascriptcsstarget_blank.html ドリームウィーバーなどでも簡単にマウスオーバー効果をつけることが出来ますが、img要素内にスクリプトを呼び出すコードが入ってしまうのであまりスマートではありません。 この、英語のサイトで紹介されている方法だと、img要素にclass="imgover"というクラスをつければ、src属性で指定したファイルのファイル名に_oを足した名前の画像を読み込んで表示してくれるというJavaScriptです。 /* Standards Compliant Rollover Script Author : Daniel Nolan http://www.bleedingego.co.uk/webdev.php */ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } window.onload = initRollovers;

  • ロールオーバーについて

    ロールオーバーをシンプルなjavascriptで実装するとの事でとあるサイトにて、以下のようなスクリプトがありました。 http://css-happylife.com/archives/2007/0621_0010.php ▼▼▼スクリプト▼▼▼ function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } ▲▲▲スクリプト▲▲▲ DOMを使ってimgのソースを 画像「_off.」から「_on.」に書き換えているんだなということまではわかるのですが、 if(document.getElementsByTagName) とか、 if(window.addEventListener) 等の記述があります。 ifのあとの()の中身は i>0 や (i>5)&&(i<=10) 等、演算子を用いた条件を記述するタイプした目にしたことがないのですが、 これはどういった事を表しているのでしょうか？ ご教授お願いいたします。

  • JavaScriptで変更した属性の元の値の取得

    いつもお世話になっております。 ページの画像をとある条件で変更しようとしております。 HTML5のdata-を利用して変更後の画像のパスをimg要素内に持たせております。 JavaScriptでimg要素を取得し画像の変更は実現できております。 その後もとの画像に戻したいのですが、JavaScriptでimg要素を取得してもsrc属性が変更後の値になっており変更前の値が取得できません。 変更前の値の取得方法を教えてください。 ■HTMLソースの一部 <p><img src="img/moto.gif" alt="" data-mimage="img/ato.gif"></p> ■JavaScriptの一部 function wid(){ var image=document.getElementsByTagName('img'); if(window.innerWidth>=320){ for(var i=0;i<image.length;i++){ image.item(i).src=image.item(i).getAttribute("data-mimage"); } }else{ // ここに元の画像に戻すためのスクリプトを書きたい } } } wid関数を作ってそのなかでimg要素を取得し、条件を満たしたらすべてのimg要素のdata-mimageの属性値を元のsrc属性に上書きします。 次に条件が満たされていない場合はHTMLにもともと書いてあったsrc属性の属性値をsrc属性値に戻したいのですがこの値が取得できません。 img/moto.gifをimg/ato.gifに変更することは出来ます。 img/ato.gifに変更した後img/moto.gifに戻すことが出来ません。 もちろんdata-mimage2="img/moto.gif"を追加すれば可能なのは分かっていますが、現状のHTMLを変更することなく実現したいです。 よろしくお願いします。

  • 複数のランダム表示について

    現在、外部のjsを読み込み、 ランダムではなく下記の方法で ４バナー表示をしております。 【index.html】 <script type="text/javascript" src="js/banner.js"></script> 【banner.js】 document.write("<ul class=\"banner\">"); document.write("<li><a href=\"http://1.jp/\" target=\"_blank\"><img src=\"http://1.jp/img/1画像.jpg\" alt=\"1\" width=\"200\" height=\"80\" /></a><br />1テキスト</li>"); document.write("<li><a href=\"http://2.jp/\" target=\"_blank\"><img src=\"http://2.jp/img/2画像.jpg\" alt=\"2\" width=\"200\" height=\"80\" /></a><br />2テキスト</li>"); document.write("<li><a href=\"http://3.jp/\" target=\"_blank\"><img src=\"http://3.jp/img/3画像.jpg\" alt=\"3\" width=\"200\" height=\"80\" /></a><br />3テキスト</li>"); document.write("<li><a href=\"http://4.jp/\" target=\"_blank\"><img src=\"http://4.jp/img/4画像.jpg\" alt=\"4\" width=\"200\" height=\"80\" /></a><br />4テキスト</li>"); document.write("</ul>"); 【ブラウザ】 1画像.jpg 1テキスト -------- 2画像.jpg 2テキスト -------- 3画像.jpg 3テキスト -------- 4画像.jpg 4テキスト 教えて頂きたいのは、下記のように ランダム表示で４つのバナーを表示させたいのですが どうしたらいいか分かりません。 【ブラウザ】 4画像.jpg 4テキスト -------- 2画像.jpg 2テキスト -------- 1画像.jpg 1テキスト -------- 3画像.jpg 3テキスト 詳しい方おりましたらお教え頂けないでしょうか？ よろしくお願いします。

  • VBAに変換してほしい

    java でプログラムして何とか完成できました。 var links = document.getElementsByTagName( "link" ), filtered = [], i = links.length; while ( i-- ) { links[i].rel === "prev" && filtered.push( links[i] ); } alert( filtered[0].href ); このjavaプログラミングをVBAで動作させるためにはどのようにすればよいですか？ VBAに詳しいどなたか　おしえてください。

  • 1ページ内で複数のwindow.onload = functionの動作

    Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する