人気ブログランキング | 話題のタグを見る
<< 今年もよろしくお願いいたします。 NORADサンタ追跡プログラム >>
 

リンクで遊ぶ

はじめに

 リンクにマウスを乗せると可愛いアイコンやイメージを表示する初心者向けの記事です。リンク関連のネタは簡単だけど、面白いことがまだできるところなので、いろいろ工夫をすると楽しいですよ。

ここにマウスを置いてね





HTML編集

リンクすべてに対して処理するよりも、クラスを指定したリンクについてのみ処理することにしました。
適用するアンカータグにクラス名 clickme を指定します。
CSS編集


<a href="URLアドレス" class="clickme" >ここにマウスを置いてね</a>




CSS編集

リンクの上にマウスカーソルを乗せると動作させたいので hover に対して処理を施すことにしました。CSS編集で以下のようにコードを追加します。

CSS編集


a.clickme:hover{
  background-image:url('イメージURLアドレス');
  background-repeat:no-repeat;
  background-position:center;
  padding-top:31px;
}




難易度:★


今日のポイント
  • アンカータグの定義済みクラスhover はマウスカーソルがリンクの上に重なったときに動作します。
  • padding-topで上にイメージをずらしています。


記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-12-30 12:13 | │├リンク
<< 今年もよろしくお願いいたします。 NORADサンタ追跡プログラム >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。