ご教授願いますで貼り付けたごっごるてぃーちゃーの検索結果画像から、なんとなく思いつきで
出来上がった画像をその場で切り替えるjavascriptコードですが、意外に使いやすくてびっくり。
せっかくなので、画像以外にも使えて表示/非表示が出来るよう拡張してみました。
ソースコードはこんな感じです。
var links;
var show = function() {
this.nextSibling.style.display = "";
this.onclick = hide;
return false;
}
var hide = function() {
this.nextSibling.style.display = "none";
this.onclick = show;
return false;
}
window.onload = function() {
links = document.body.getElementsByTagName( "a" );
for( var i = 0; i < links.length; i++ ) {
links[i].onclick = ( links[i].nextSibling.style.display == "none" ) ? show : hide;
}
}
ウィンドウが読み込まれた後コールバックされるwindow.onloadでリンクを抽出し、スタイルの
displayがnoneだったら表示機能を、そうでなければ非表示機能をonclickにセットしています。
ターゲットがリンクを貼ったタイトルの次のタグという前提必須ですが、逆に構造を絞り込んで
コードをかなり短縮しています。ちなみにjavascriptを切っていれば、素直にジャンプします。
警告：Firefoxでご覧のお客様は、回れ右してお帰りいただければ私が幸いです。
＃本職の方は、本当に尊敬します。