hoverで画像を切り替えるCSS

画像リンクのhoverで画像が変わるやつを作る

こんな画像リンク↓これを作るためのソースを作るツールを御紹介します。




このように、マウスが上にのると画像が切り替るCSSを作り出してくれるWEBツールです。



必要な素材は、画像1枚だけ。

例のボタン
このように、上下分割された画像を1つ用意して下さい。
下半分が通常表示。 上半分がリンクhover状態になったときの画像です。
サイズ等は、何でも構いません。


例の画像では、横幅は91px、高さは50pxの画像を使っています。
画像URLは、http://xn--tfr729j.biz/img_hover/ewei.gifです。


画像の情報を、下の入力フォームに入力して下さい。

ご用意して頂きました画像のURLと、画像の横幅と高さを入力し、「作成するボタン」をクリックして頂きます。


画像のURLを入力して下さい:(絶対パス) (半角英数字)

画像の横幅:
画像の高さ:

次へ

スタイルシート側

id名(半角英数字):

「作成するボタン」をクリックすると、リンクhoverで画像が入れ替わるソースを表示します。


次へ