Highslide JS用のタグの属性を自動で付加するJavascript

このブログでも使用している Highslide JS を使用する場合、画像のアンカーに加える必要のあるonclick属性。それをJavaScriptを使用してその手間を省く。

具体的には、Highslideを使用するには該当画像のアンカーに以下の二つの属性を追加する必要があります。

1. class="highslide"
   
2. onclick="return hs.expand(this)"

この 『class="highslide"』 を拾ってonclick属性『onclick="return hs.expand(this)"』を追加します。

今後は『class="highslide"』のみを書き加えるだけで済むようになります。

私自身が作ろうと思っていたのですが、既にMTユーザーの方がupしていたのでそれをBlogger用にちょっと書き替えただけです。

元ネタ参考:HighSlide JS の onclick 属性を JavaScript で登録する@小粋空間

編集後のサンプルコード:

function addhsAttr() {   
    var isIE = (document.documentElement.getAttribute('style') == document.documentElement.style);   
    var hsAncs = document.getElementById('Blog1').getElementsByTagName('a');   
    for (var i = 0, len = hsAncs.length; i < len; i++) {   
        if (hsAncs[i].className == 'highslide') {   
            if (!hsAncs[i].getAttribute('onclick')) {   
                isIE ? hsAncs[i].setAttribute('onclick', new Function('return hs.expand(this)')) :  
                         hsAncs[i].setAttribute('onclick','return hs.expand(this)');   
            }   
        }   
    }   
}

気になる以下の行

var isIE = (document.documentElement.getAttribute('style') ==　document.documentElement.style);

これはIEに対応したもので、実際に私自身も試しましたが、IEの場合だけ以下のように処理します。

hsAncs[i].setAttribute('onclick', new Function('return hs.expand(this)'))

このような形でなければonclick属性を追加出来ないようです。


参考元では

引用:onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。

と書かれていますが、サイトを閲覧していて、画像を見るために画像にフォーカスを移してからEnterKeyなりを押して画像を表示させるという行動が私には想像出来なかったため、不要と考えonkeypress属性の対応は削除しました。
必要と思われる場合は適宜追加して下さい。