約３年も前の話、「リトル・レディ」という作品をChromeで動くようにしたい！ という思いのもと、勝手に復活開発日誌を始めた。
この開発は一気に進み、２年弱放置の後に完結宣言が行われた。
この記事は？
この記事はいわば番外編。今風のコードに書き換えていく活動の上で何をしたか記録していく。
目下目的はHTML5に馴染む形に書き換えること。野心はSingle Page Applicationにすること。 自分でアプリケーションを設計して、脚本を読み込むようにする。 そして、リトル・レディの脚本を抽出・変換ツールを用意することで、自分以外の人に体験してもらえる状況に持ち込むのが到達点。
画像の差し替え処理を書き換える
スタート画面では、<a>タグをボタンに見立て、中に画像を配置している。
/index.htm
<script language="JavaScript"> // プリロード if(document.images) { var imgPreload1 = new Image() ; imgPreload1.src = "image/basis/menu1-2.png"; // ...つづく } </script> <a href="javascript:topS()" onMouseOver="menu1.src='image/basis/menu1-2.png'" onMouseOut="menu1.src='image/basis/menu1-1.png'"><img SRC="image/basis/menu1-1.png" border=0 name="menu1"></a> <!-- つづく -->
<img>はname属性で識別され、ボタンへのマウスオーバー（アウト）、で差し替えている。
スムーズに差し替えられるよう、ホバー用の画像はコード上で食わせて、プリロードとしている。
body以下のツリーに足したりしていないので、現代のブラウザでプリロードが行われるのか不安だったが、問題なくプリロードされているようだった。
修正後
<style> .btn-base, .btn-hover { border : 0; } .btn .btn-base { display: inline-block; } .btn:hover .btn-base { display: none; } .btn .btn-hover { display: none; } .btn:hover .btn-hover { display: inline-block; } </style> <a href="javascript:topS()" class="btn" ><img class="btn-base" src="image/basis/menu1-1.png"><img class="btn-hover" src="image/basis/menu1-2.png"></a> <!-- つづく -->
<a>の中に通常時、ホバー時の画像を指定してしまい、CSSの:hover疑似クラスとdisplay:要素で表示制御するようにした。
行数は多少増えてしまった感があるが、HTMLにハードコードされたonMouseOver, onMouseOutを排除することができた。
また、ボタンの数に対する編集箇所が一箇所に集まったのでこの方法が好きかな。（今後増えたりする見込みはないけれど…）
ほかにもCSSでボタンごとにa.btn-start:hover { background-image: url(...) }とかも考えたけれど、気にするところが増えたのでやめた。*1, *2
余談
完結宣言から１年経って手を付け始めたのだけれど、タイトルが予言されてて笑ってしまった。
これから手を加えるのは、より現代ブラウザ向けの修正になるので、"リファクタリング：リトル・レディ"とかのタイトルでやろうかな。
