ソフトウェア

swappi

<img src="top.gif" class="swappi">

単純なロールオーバーイメージを作成します。
マウスオーバーで"top_.gif" というファイル名に変更し、マウスアウトで元に戻します。

サンプル

swappe

<img src="top.gif" class="swappe">

クリックごとに "top.gif" と"top_.gif" というファイル名を切り替えます

サンプル

swappa

<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クラスは指定されていません

フォームボタン

swappo

<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のように連番にすることで、ロールオーバーイメージをグループ化出来ます。

サンプル

リンク部分 画像の部分はアンカーになっていません。

swappu

<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

サンプル