画像にカーソルを載せた時、違った大きい画像を表示させる方法

画像にマウスを載せた時、違った大きい画像を表示させる方法

こんにちワ。”道路工事きもまろ”こと、ワンタンです^^;

アメブロで、画像にマウスを載せた時、違った大きい画像を表示させる方法をご紹介してみたいと思います。

マウスを載せてみて下さい（↓）
（ふふ、ちょっとびっくり^^;）
※CSS編集用デザインを採用されている方向けです。

1.「ＣＳＳ編集」にコードを記述

まず、CSSの末尾に以下のコードを貼り付けて下さい。

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

2.記事を書く画面にコードを記述

次に実際に表示させたいアメブロの「ブログを書く」欄（編集画面）に以下のタグコードを貼り付けて下さい。

<style type="text/css">a#ID{width:幅px;height:高さpx;background-image:url(画像URL1)}a#ID:hover{background-image:url(画像URL2)}</style><a id="ID" class="myImgBtn" href="リンク先URL"></a>

*1.赤字のID（タグの名前）の箇所に、myImg～好きな半角英数字～を入れて下さい。
例えば、今日の年号、月日、連番を入れて、myImg20150607←のようにします。
*2.三つのIDは必ず同じにして下さい。あと、同じページ内に複数の反転画像を設置する場合は、それぞれのIDは別にして下さい。（画像のURLは違っても、IDが同じだと全部、同じ画像になってしまいます。）
*3.青字の箇所にマウスを乗せない時の（一枚目の）画像のURLを記入して下さい。
*4緑字の箇所にマウスを乗せた時に表示させたい画像のURLを記入して下さい。
*5.画像の幅、高さは二枚目の大きい方の画像の幅、高さを入れて下さい（画像URL2）。
*6.茶色字の箇所に、リンク先のURLを記入して下さい。

※注：「編集エディタ」を新エディタや標準エディタの「ＨＴＭＬ表示」にしても、目に見えない改行タグ<br>が入ってしまい反映されない場合があります。「タグ編集エディタ」を使うと間違いないと思います。

サンプル：少し作ってみました。（↓）

①

②

③

○思うこと
ちょっと時間が空いちゃった時なんかに、こんなのを作ってみるのも楽しいと思います。

☆ブィブィ  ('-^*)/

AKB

ん？？

表示 - 継承 2.1