画像にマウスを乗せるとかわる（CSS)
尾関 純子CSSを使って 画像にマウスを乗せるとかわるやり方。
HTMLを使ったやり方は、1月13日の記事
HTMLは、これだけ （annaiは、ID名）
<span id="annai"><a href="goannai/index.html" target="_parent"></a></span>
CSSで 背景を指定します。
#annai a:link{
background-image:url('botan/annai_1.jpg');
width:190px;
height:30px;
margin-left:3px;
}
#annai a:hover{
background-image:url('botan/annai_2.jpg');
width:190px;
height:30px;
margin-left:3px;
}
#annai a:visited{
background-image:url('botan/annai_2.jpg');
width:190px;
height:30px;
margin-left:3px;
}
『 a:link 』 は、リンクが張ってあるもの
『 a:hover 』 は、マウスをのせた時リンク
『 a:visited 』 は、訪れたことのあるリンク
url は、画像のアドレス。
マウスをのせる前の画像
マウスをのせた時の画像
でもこれだと、訪れたことのあるリンクは、ずっとチューリップが咲いた画像になってしまうんだけど・・・・
花創人Webページの
の部分だけ CSSで変わるようにしてあります。
やっぱり、HTMLで変わるように直そうと思います。
レッスンに興味のある方へ
はじめての方も、季節の花を楽しみたい方も、ご自分のペースでご参加いただけます。
体験レッスンや1Dayレッスンの詳細は、レッスンページをご覧ください。
持ち物・費用・参加方法など、よくあるご質問はレッスンFAQにまとめています。
