https://www.bravotouring.com/~yano/archives/2006/11/19/ Recent content in 2006/11/19 on Yano's digital garage Hugo en-us Sun, 19 Nov 2006 16:17:43 +0900 https://www.bravotouring.com/~yano/diary/it/20061119.htm Sun, 19 Nov 2006 16:17:43 +0900 https://www.bravotouring.com/~yano/diary/it/20061119.htm <p>先の五島ツーリングレポートは<a href="https://www.bravotouring.com/~yano/diary/tour/2006/20061103.htm">上五島編</a>と<a href="https://www.bravotouring.com/~yano/diary/tour/2006/20061104.htm">福江島編</a>に分けてようやく脱稿。今回は<a href="http://maps.google.co.jp/" target="SubWindow">GoogleMaps</a>航跡図の位置調整などを行ったので結構手間取ってしまったが、更に写真のスライドショー的な機能を追加した。</p> <p>やっぱり料理の写真で全景とクローズアップのどちらを使うか悩ましかったので、いつものようにアニメーションgifで順繰りに表示しようとしたのだが、画像が汚くてちっともうまそうで無くなってしまったのがそもそもの発端。</p> <p>かといって食い物画像ばかり掲載するのはページ全体のバランスを欠くし、何より興味の無い人にとって不要な画像はウザイだけだ。そういうわけで、マウスのクリック操作でスライドショーよろしく画像を次々と差し替える<span class="Software">JavaScript</span>を実装してみたわけ。</p> <p>その<span class="Software">JavaScript</span>を公開すると <blockquote class="Log"><script language=JavaScript><br/> <!--<br/> function SlideShow(img,rtx){<br/> var baselen, imgix;<br/> baselen=img.src.lastIndexOf(".");<br/> imgix=Number(img.src.substr(baselen-1,1));<br/> imgix++;<br/> if ( rtx < imgix ) imgix=1;<br/> img.src=img.src.slice(0, baselen-1)+String(imgix)+img.src.slice(baselen);<br/> }<br/> //--><br/> </script> </blockquote>という感じ。これをヘッダーとかに入れておいて、 <blockquote class="Log"><img src="https://www.bravotouring.com/~yano/images/20061104a1.jpg" <span class="Strong">onClick="SlideShow(this,4);"</span> /></blockquote> という感じで呼び出せば良い。<span class="Strong">".jpg"</span>の前の<span class="Warning">数字1桁</span>をカウントアップしていき、<span class="Warning">引数の4</span>を越えたら1に戻る単純な仕組みだ。可変部分が<span class="Strong">数字1桁</span>なので<span class="Warning">最大9画像という制限</span>はあるものの、取り敢えず充分だろう。</p> <p><span class="Software">JavaScript</span>が使えなかったり、禁止している場合も最初の1枚が表示される。</p> <p>できてしまえば何という事の無いコードだが、汎用化させるのに結構頭を使ってしまった。その甲斐あって初版コードに比べて随分コンパクトになったわけで、やはり「優れたコード程シンプルである」という金言を再確認した次第。</p> <p>実質5ステップの<span class="Software">JavaScript</span>にオリジナリティを立証するのも馬鹿らしいので、気に入ったらパクるなり参考にするなり自由に使って頂きたい。</p>