画像にカーソルを乗せると違う画像を表示させるには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

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

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


テーマ:
こんにちは。

渡辺麻友


※1)アメブロでCSS編集用デザインを採用されている方向けです。
※2)[ブログを書く]で[タグ編集エディタ]にして下さい。
別アカウントのアメブロでテストしたら、[標準エディタ]
や[新エディタ]を[HTML表示]にしても、動作が反映
されませんでした。



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


こんな感じです。                  

菜々緒

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

/*~オンマウスで画像反転:08-20~*/
a.myImgBtn{
display:block;
text-indent:-9999px;
background-repeat:no-repeat;
}



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

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


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

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

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

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


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

・バイク
GP&TT



・nana tomo
Tomo Nana



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


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


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



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


・時間が空いちゃった時、こんな物を
作ってみるのも楽しいかもですね・・

☆ブヒ__v('-^*)/


巴投げ:アチョー!!

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ