画像にマウスを乗せるとかわる(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 は、画像のアドレス。
マウスをのせる前の画像花創人へのお問い合わせ
http://87sounin.jp/img/botan/annai_1.jpg
マウスをのせた時の画像花創人へのお問い合わせ
http://87sounin.jp/img/botan/annai_2.jpg
でもこれだと、訪れたことのあるリンクは、ずっとチューリップが咲いた画像になってしまうんだけど・・・・
花創人Webページの
花創人へのお問い合わせの部分だけ CSSで変わるようにしてあります。
やっぱり、HTMLで変わるように直そうと思います。

.

.

季節の花とその活かし方をズバっ!と紹介する【花ズバっ!】は、毎週水曜日PM8時から!お楽しみに!

バックナンバーはこちら ↓

今までの寄せ植えとフラ­­­ワーアレンジメントの中間の寄せ植え『ギャザリング』!

「そのうちきれいになる」「育てる­」­と­しての寄せ植えから「魅せる」「鑑賞する」「アート」としての寄せ植え『ギャザリング』をご提­案し­てい­ます。

花創人ガーデニング教室では、寄せ植えハンギングバスケット・ギャザリングの教室を少人数でていねいにレッスンさせていただいていますので、初心者でも安心です。

器・植物は厳選したものを使用しハイクオリティな寄せ植え教室を行っています。

根の様子、枝振りを観察し植物と対話しながら、植え込んでいくと、まるでお花畑のようにナチュラルに、フラワーアレンジメントのようにゴージャスな作品が出来上がります。

開店祝い、誕生日プレゼントなどのギフトにぴったりです。あなただけのオーダーメイドのリースや寄せ植えハンギングバスケットをお作りします。

愛知・岐阜・三重、東海・中部地方をはじめ全国に発送いたします。

「すごい」ではなく「すてき」な花飾りをご提案します。

花創人はなそうにん 尾関純子 TEL:058-382-1871

[alpine-phototile-for-instagram id=925 user="hanasounin" src="user_recent" imgl="fancybox" style="wall" row="6" size="Th" num="12" align="center" max="100"] 寄せ植えギャザリングをもっとみたい方は花創人Instagramへ成人式卒業式の生花の髪飾りをもっとみたい方は花創人髪飾りInstagramへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次の記事

箱庭であそぼ♪