トップページの画像表示を変更

トップページの画像表示方法を変更し、マウスポインタを載せると車種名、年式などがオーバーレイされるようになりました。一見して何の車両だかわからない場合はマウスを載せてみてください。また、画像をクリックすることで詳細ページへ移動することが出来るようになりました。



今思いましたけど、これ、タッチデバイス（iPhone / iPad）では有効ではないですね。こうしたデバイスへの対応は将来的に行なっていく予定です。

ちなみに、オーバーレイはjQueryというJavaScriptのライブラリとプラグインの組み合わせで動いています。

最初はjquery.imageoverlayというライブラリ（公式サイト、ダウンロードサイト）で開発を行っていたのですが、処理のタイミングにより画像が表示されたり、表示されなかったりすることがありました。問題がわからずjquery.imageoverlay 1.3.2のソースコードまで追いかけたところ、環境によっては既知の問題のようでTODOの記載がありました。

imageoverlayの使用を諦め、別のオーバーレイ用ライブラリを探し、現在はcaptifyというjQuery用のライブラリを採用しています（公式サイト）。こちらは大変シンプルなライブラリで、10行くらいの導入部とスタイルシートを記述するだけでオーバーレイを実現することが出来ました。

ここ数日、少しずつ見た目の変更を行っているのですが、いかがでしょうか？開発環境がMacのため、実はApple Safari, Google Chrome, Firefoxのみでしか確認を行っていません。もしMicrosoft Internet Explorerでおかしな表示などを見かけましたらご連絡いただけますと助かります。