Ikeda->Weblog();

Ikedaの徒然雑記。

[TIPS] アンカーのある画像をクリックした時に一瞬表示される・・・

| 2件のコメント

[] アンカーのある画像をクリックした時に一瞬表示される・・・Lightboxを使っている時に、あるユーザから

「NEXTやPREVをクリックした時に一瞬点線が表示される」

と言われました。

自分の環境()では出てこないので、もしや・・・と試してみると、、、

やはりIEで表示されました。確かに、PREVやNEXTのリンク画像をクリックした瞬間、画像の真中に縦の点線が表示されます。

これ、鬱陶しいので消しちゃいましょう!(^^)b



IE リンク クリック 点線」でGoogle先生へお伺い・・・・お。出てきました。

どうやらIEにおいて、アンカーの中の画像をクリックすると表示されるようですね。フォーカスが来た、というお知らせみたいです。小さな親切大きなお世話、ってやつですよ。

さて、対処方法ですが、参考にさせて頂いたサイトによると、

<a>タグに onFocus=”this.blur()” を追加すると表示されなくなります。

とのこと。

しかし今回はLightboxが生成している画像が対象ですから、Lightbox自体をいぢる必要がありますねー。

lightbox.js (v2.03.3) をエディタで開き、272~280行目付近がPREV/NEXT画像のアンカーエレメントを生成してる部分です。

270 objImageContainer.appendChild(objHoverNav);
271
272 var objPrevLink = document.createElement("a");
273 objPrevLink.setAttribute('id','prevLink');
274 objPrevLink.setAttribute('href','#');
275 objHoverNav.appendChild(objPrevLink);
276
277 var objNextLink = document.createElement("a");
278 objNextLink.setAttribute('id','nextLink');
279 objNextLink.setAttribute('href','#');
280 objHoverNav.appendChild(objNextLink);
281
282 var objLoading = document.createElement("div");


このobjPrevLinkobjNextLinkがアンカーのエレメントになりますから、こいつに直接focusのイベントハンドラを設定してやりましょう。

272 var objPrevLink = document.createElement("a");
273 objPrevLink.setAttribute('id','prevLink');
274 objPrevLink.setAttribute('href','#');
275 objPrevLink.onfocus = function(e) { this.blur(); } // ikeda
276 objHoverNav.appendChild(objPrevLink);
277
278 var objNextLink = document.createElement("a");
279 objNextLink.setAttribute('id','nextLink');
280 objNextLink.setAttribute('href','#');
281 objNextLink.onfocus = function(e) { this.blur(); } // ikeda
282 objHoverNav.appendChild(objNextLink);
283
284 var objLoading = document.createElement("div");


これでOK!点線は表示されなくなるはずです^^)b

参考にさせて頂いた「ふぐり日記(2007)」の関さん、ありがとうございました^^

フリーライター&フォトグラファーの関 行宏のふぐり日記:ブラウザの画像表示

2件のコメント

  1. これ、wordpressに入れてみよう!
    前からやりたかったんだけどなんて言うものなのか知らんかったwww

  2. いれた~~~
    できた~~~~!!!!

    プラグインだけどね・・・(´;ω;`)

コメントを残す