画像にクラス名を指定するだけでロールオーバーイメージに出来るライブラリです。
元の画像に _ （アンダースコア）をつけたファイル名に変更します。
<img src="top.gif" class="swappi">
単純なロールオーバーイメージを作成します。
マウスオーバーで"top_.gif" というファイル名に変更し、マウスアウトで元に戻します。
<img src="top.gif" class="swappe">
クリックごとに "top.gif" と"top_.gif" というファイル名を切り替えます
<a href=""><img src="top.gif" class="swappa"><span>something</span></a>
<button><img src="top.gif" class="swappa"><span>something</span></button>
<a></a>、または<button></button>に入っている画像で使用して下さい。
アンカーやボタンにマウスを重ねたときに、swappaが指定された画像を変更します。
上記の例では"something"に重ねた場合でも、ロールオーバーイメージに変更します。
アンカーやボタン全域ではなく、画像に重ねた場合のみスワップさせるには、swappi クラスを使用して下さい。
この部分もリンク
リンク
右端の画像にはswappaクラスは指定されていません
<p><a href="" class="swappo1">something</a></p>
<p><img src="top.gif" class="swappo1"><img src="top.gif" class="swappo1"></p>
<p><button class="swappo2">something</button></p>
<p><img src="top.gif" class="swappo2"><img src="top.gif" class="swappo2"></p>
アンカーやボタンの一とロールオーバーイメージの位置が離れている場合は、swappoを使用して下さい。
swappo1、swappo2のように連番にすることで、ロールオーバーイメージをグループ化出来ます。
リンク部分 画像の部分はアンカーになっていません。
<img src="blank.gif" class="swappu">
<a class="swappu"><img src="picture1.jpg"></a><a class="swappu"><img src="picture2.jpg"></a>
swappuクラスが指定された画像とアンカーを用意し、アンカーの中に画像を１つずつ配置して下さい。
アンカーのマウスオーバーで、swappuクラスの画像をpicture1_.jpgやpicutre2_.jpgに入れ替えます。
サムネイル画像ファイル名にアンダースコアをつけておくと、アンダースコアをはずしたファイル名に変換します。
picture1.jpg -> picture1_.jpg
picture1_.jpg -> picture1.jpg
サンプル
