ロールオーバー

クロスフェードするロールオーバー処理をお手軽に実装するJavaScript を参考に最近導入したダウンロードページ(CrystalDiskInfo)に適用してみました。

ちょこっと改造して、width と height を元の画像と同じにしています。こうすることによって、縮小表示している画像でもちゃんと動作するようになっています。

CrystalDiskInfo 3 や CrystalDiskMark 3 を高 DPI 環境で動作させると画像はぼやけてしまうので、CrystalDiskXXXX 4 では、200% サイズの画像を必要に応じて縮小するという作戦を採用するつもりです。しかし、background-image では、200% サイズの画像を縮小して表示するということはできないため、img タグを使う必要があるわけです。

でも、そうなると簡単にロールオーバーは出来なくなる…ということで今回の実験です。