オンマウスで画像を反転させる方法③

以前、ご紹介した「オンマウスで画像を反転させる方法」をちょっとアレンジしてみました。

以下は、以前、ご紹介したものです。

------------------------

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

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

こんな感じです。 ⇓

菜々緒

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

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

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

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

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

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

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

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

・バイク

GP&TT

・nana tomo
Tomo Nana

---------

以上は以前、ご紹介したものですが、CSSに書き込む要素、IDに関しては、まったく同じで、「もしかして？」と思って、①マウスを乗せない時の画像URLコードに小さいサイズの画像URLを入れてみました。（↓）

Tomo Nana

一枚目と二枚目をサイズだけ違う同じものにしてみました。

Tomo Nana

マウスを乗せた時、ちょっと飛び出すようなイメージになると思います。

こんな事やったからといって、何かの役に立つわけでもないですが・・（笑）

ちょっとした暇つぶしにはなるかもです^^;

あ、もし、これをやって遊ばれる時は、IDを他のものと変えるのを忘れないでください。みんな同じものになってしまいますので。←自分、やってしまいました（汗）。

☆ブィブィ(　´,_ゝ｀)ｸｯｸｯｸ･･･

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

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

オンマウスで画像を反転させる方法③