ウェブサイトを見やすくする場合、必ずしもプレーンテキストが最良ではない場合があります。しかしimgタグやCSSによるIRが多くなるとドキュメントとしての存在意義に疑問符がつきかねません。

本スクリプトはHTMLの存在・定義を最大限に尊重し、かつユーザが見た場合に見やすくなるようにJavascriptで再レンダリングするという趣旨で作られています。

規則性に沿ったID指定によりCSSの肥大化を防ぐとともに、HTML主体のマークアップを実現するためになかなか良い出来栄えなんじゃないの？いいんじゃないの？と和田もご満悦です。

画像置換したいタグのIDを以下のルールで指定します。

ir-ファイル名-横幅-高さ-拡張子

例）ir-sitename-300-50-gif

Site Name

aタグのIDを以下のルールで指定します。

ir-ファイル名-横幅-高さ-拡張子

例）ir-nv_01-150-50-gif

するとこういう感じになります。

マウスオーバー、マウスアウト、現在ページ、クリック時のアクションで画像のbackground-positionが変化します。

画像は以下のように各アクションが一枚に統合された形で用意します。

また、domainが異なる場合、勝手にtargetが_blankになるという蛇足付き。

特定のIDにマウスオーバーした際に表示するオブジェクトのIDを以下のルールで指定します。

pd_特定のID_navigator

例）pd_ir-nv_01-150-50-gif_navigator

やってくれるのはオン／オフだけなので、後はposition等をうまく使ってCSSで対処してください。

背景を敷きたいオブジェクトのIDを以下のルールで指定します。

bg-ファイル名-横幅-高さ-拡張子

例）bg-example-740-360-jpg

または

bg-ファイル名-拡張子

前者の場合はサイズ指定とno-repeatが付きますが、後者の場合はbackground-imageを指定するだけです。