ブログの小技（小技のお勉強）オンマウスのまとめ

FC2ブログ

無料アクセス解析 SEO 対策広告

ブログの小技（小技のお勉強）

便利な小技を求めて彷徨うおバカ。素人ですから違ってても知らん。知らんけど教えて

目次（オンマウスで簡易詳細）

文字

リンク

画像

ボタン

枠

スクロール

オンマウス

クリック技

その他

その他Ⅱ

HTMLタグ

書斎

時計

ボタンで時刻を表示

勝手にリンク

プラウザ情報

あなたのブラウザ情報を　　確認どうぞ

使用可能チェック

使用言語チェック

スクリーンチェック

FLASH

Flashが使用できるかを判定する方法

FC2ブログ

ＩEのバージョンチェック

ヘルプ ↓ バージョン情報 ↓ IEのバージョン情報の画面 ↓ 上の方のバージョン見る ↓ 最初２桁がバージョンNO.

PCスペック簡単調査

スタート ↓ ファイル名指定して実行 ↓ 名前に「dxdiag」 ↓ DirectX診断 ↓ 調べたいタブ押

盗人技（Javascript技）

大っぴらには、タグ公開できません
ここで、ひっそり御開帳
他のもそうやけど・・・

苦労して作成された方々申し訳ないです

管理人

管理人
頭脳	性格	職業
↑オンマウス

ブロとも申請フォーム

この人とブロともになる

リンク

管理人部屋

管理者ページ

管理部屋Ⅱ

スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

【--/--/-- --:--】 | スポンサー広告

オンマウスのまとめ

文字
オンマウス表示

<span onmouseover="document.all.item('moji1').style.visibility='visible'"><br />文字</span><div ID="moji1" style="visibility:hidden;">表示される文字</div>

文字

オンマウス文字

オンマウス表示オフマウス非表示

<span onmouseover="document.all.item('moji2').style.visibility='visible'" onmouseout="document.all.item('moji2').style.visibility='hidden'"> <br />文字 <br /></span><div ID="moji2" style="visibility:hidden;"> <br />オンマウス表示オフマウス非表示 <br /></div>

文字

オンマウス表示オフマウス非表示

オンマウス色変え

<span onmouseover="this.style.color='色指定'">色替文字</span>

色替文字

オンマウス色表示オフマウス色非表示

<span onmouseover="this.style.color='オンマウス色'"onmouseout="this.style.color='元色'">文字色</span>

文字色

オンマウス時大文字

<span onmouseover="this.style.fontSize='25'" onmouseout="this.style.fontSize='17'">対象文字</span>

対象文字

オンマウス時文字変更

<span onmouseover="this.innerText='Z変更後'" onmouseout="this.innerText='A変更前'">A変更前</span>

A変更前

オンマウス時で背景色

<font color="文字の色" style="font-size:15px" onMouseOver="this.style.background='オンマウス時色'" onMouseOut="this.style.background='元色'">変色できとるやろか？</font>

変色できとるやろか？

オンマウスでポップアップ文字＆リンク

<a href="http://www.skyperfectv.co.jp/" title="小技のお勉強">ブログの小技！</a>

ブログの小技！

音
基本

<bgsound src="" id="sd01"><span onmouseover="document.getElementById('sd01').src='効果音先';">入力文字 </span>

触ってみそ

画像
オンマウスで画像消失

<span onmouseover="this.style.visibility='hidden'"><img src="画像先"></span>

オンマウス時画像切替

<img src="元画像" onmouseover="this.src='オンマウス画像';" onmouseout="this.src='元画像';">

オンマウス説明文＆リンク

<a href="リンク先"><img border="0" src="画像先" width="104" height="67" alt="かわええ"></a>

かわええ

テーブル
オンマウスでセル内文字変更

<table border="1" cellpadding="5" cellspacing="2" width="400" bgcolor="#FFFFFF" bordercolor="#3366FF"><tr><td align="center" colspan="3" bgcolor="#CCCCFF"><font color="#3333FF" style="font-size:15px">当サイトの管理人</font></td></tr><tr><td align="center" width="33%" bgcolor="#FFFFFF"><font color="#3333FF" style="font-size:15px; cursor:hand" onMouseOver="document.all['myCel'].innerText='おバカ'" onMouseOut="document.all['myCel'].innerText='↑マウスを乗せてください↑'">頭脳</font></td><td align="center" width="34%" bgcolor="#FFFFFF"><font color="#3333FF" style="font-size:15px; cursor:hand" onMouseOver="document.all['myCel'].innerText='根暗'" onMouseOut="document.all['myCel'].innerText='↑マウスを乗せてください↑'">性格</font></td><td align="center" width="33%" bgcolor="#FFFFFF"><font color="#3333FF" style="font-size:15px; cursor:hand" onMouseOver="document.all['myCel'].innerText='ぷー太郎'" onMouseOut="document.all['myCel'].innerText='↑マウスを乗せてください↑'">職業</font></td></tr><tr><td align="center" colspan="3" id="myCel" class="link" bgcolor="#FFFFFF">↑マウスを乗せてください↑</td></tr></table>

当サイトの管理人
頭脳	性格	職業
↑マウスを乗せてください↑

オンマウスで背景色変更＆リンク

<table border="1" bordercolor="枠の色" cellpadding="15" cellspacing="0" bgcolor="元色指定" id="myTb"><tr><td align="center"><a href="リンク先" onMouseOver="document.all['myTb'].style.background='オンマウス色指定'" onMouseOut="document.all['myTb'].style.background='元色指定'">やさしいJavaScript</a></td></tr></table>

やさしいJavaScript

オンマウスでセルの背景色変更

<table border="0" cellpadding="2" cellspacing="5"><tr><td align="center" bgcolor="#元色指定" id="CE1"><a href="test1.html" onMouseOver="document.all['CE1'].style.background='#オンマウス色'" onMouseOut="document.all['CE1'].style.background='#元色指定'"><font color="文字色">オンマウスでセルの背景色変更</font></a></table>

オンマウスでセルの背景色変更

オンマウスで画像の拡大

<img src="画像先" style="width:50px;height:50px;" onmouseover="this.style.width='300px';this.style.height='300px';" onmouseout="this.style.width='50px';this.style.height='50px';">

*上記のは、styleで画像サイズの初期値（縦横50px）を指定、mouseoverで縦横300pxに、mouseoutで縦横50pxに戻しています。

【2006/12/22 18:43】 | お勉強 | COMMENT(1)

<<クリック技のまとめ | BLOG TOP | スクロールのまとめ>>

この記事に対するコメント

管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

【2011/08/08 15:48】 | # [ 編集]

この記事に対するコメントの投稿

Powered By FC2ブログ. Copyright © ブログの小技（小技のお勉強） All Rights Reserved.
Template By 俺様ちゃん. FC2ブログ