画像に、マウスポインターを置くと、画像が変化.

アメブロの画像にマウスを乗せたときに、画像が変化させる。

こんにちワ　o(^-^)o
アメブロ以外のブログサービス（Fc2やWordPress等）では、画像にマウスを乗せた時に別の画像を表示させるには下のようなコードを使います。

ところが、上のコードはアメブロの場合、「禁止タグ」となってしまい使えないです。
そこでCSSを使うと画像をロールオーバーさせることが出来るのでメモっておきたいと思います。

※アメブロでCSS編集用デザインを採用されている方向けです。

矢印、カーソルを乗せると（オンマウスで）画像が別の画像に変わるようにする方法です。

こんな感じです。 ⇓

菜々緒

まず、CSSの末尾に以下の文字列を貼り付けて下さい。

/*～マウスポインターで画像反転～*/
a.myImgBtn{
display:block;
text-indent:-9999px;
background-repeat:no-repeat;
}

次に実際に表示させたい場所に以下のタグ（山括弧 < > で囲まれた半角英数文字記号）を貼り付けて下さい。

赤字のID（タグの名前）の箇所に、myImg～好きな半角英数字～を入れて下さい。
例えば、今日の年号、月日、連番を入れて、myImg2014011001←のようにします。
※三つのIDは必ず同じにして下さい。あと、同じページ内に複数の反転画像を設置する場合は、それぞれのIDは別にして下さい。（画像のURLは違っても、IDが同じだと全部、同じ画像になってしまいます。←自分の経験談です＾＾；）

青字の箇所にマウスを乗せない時の（一枚目の）画像のURLを記入して下さい。

緑字の箇所にマウスを乗せた時に表示させたい画像のURLを記入して下さい。

あと、画像の幅、高さ、リンク先のURLを記入して下さい（二枚の画像は同じ幅、高さにして下さい）。

少し、作ってみました。⇓

・バイク

GP&TT

・nana tomo
Tomo Nana

・菜々緒-2
菜々緒、反転画-03

・ローラ（一枚目と二枚目の画像サイズを変えてみました）
Rola

・長澤まさみさん
長澤まさみ・反転画-01

・重盛さと美さん
S,S・反転画-01

参考になると、うれしいのですが・・('-^*)/

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

画像に、マウスポインターを置くと、画像が変化.