« 本当 に ふぉんと  | トップページ | table »

2009年5月19日 (火)

動画で覚える。

旅行代理店のHP更新でほぼ半日。
残りはECサイトの商品紹介PAGEの作成。

今日は非常に使えるサイトを紹介したい。

http://www.dougamanual.com/index.html


そして今日もHOVERに苦戦。。。。

動作サンプル

通常のボタン

 

hoverでスタイルを指定したボタン
ボタンにマススカーソルをポイントすると、背景色、文字色、マウスカーソルの形状が変わります。

この動作サンプルのソース(主な関連部分)

外部Jsファイルを読み込みます。
<script type="text/javascript" src="allhover.js"></script>


マウスオーバー時のスタイルを指定します。
セレクタの前者は通常ブラウザ向け、後者がこのJavascript向け(IE向け)です。

<style type="text/css">
input.submit:hover , input.submitHover{
background-color:red;
color:white;
cursor:pointer;
}
input.reset:hover , input.resetHover{
background-color:blue;
color:white;
cursor:pointer;
}
</style>


初期化を行います。
<body onload="allhover(['input.submit','input.reset'])">
[ ]内に対象を指定します。


hover処理の対象となる要素です。
<p class="smpl1">
<input type="submit" value="送信ボタン" class="submit">
<input type="reset" value="リセット" class="reset">
</p>



|

« 本当 に ふぉんと  | トップページ | table »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1194467/29689311

この記事へのトラックバック一覧です: 動画で覚える。:

« 本当 に ふぉんと  | トップページ | table »