=(・。・)= ちゃん
おう、！！ 元気か、…*
=(^。^)=
ﾎｰﾑ へ ｻﾝﾌﾟﾙﾍﾟｰｼﾞ ﾏｳｽｵｰﾊﾞｰ7 mouse_over7.htm
ﾘﾝｸﾒﾆｭｰ文字のﾏｳｽｵｰﾊﾞｰ（被せる）で、離れた定位置に”ﾒｯｾｰｼﾞ”や”画像”、”HTMLｺﾝﾃﾝﾂ”を表示。 DHTML。 ﾘﾝｸﾒﾆｭｰや、〃の配置・配色・ｻｲｽﾞ、ﾒｯｾｰｼﾞ、画像などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。 all 対応。（IE8〜非作動） ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。
ﾃﾞﾓは、” =(^。^)= ちゃん ”などのﾘﾝｸﾒﾆｭｰのｸﾘｯｸなどで。
< ご使用方法 >
・ ﾛｰｶﾙ（=PC）への保存は、mouse_over7.htm を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。 ※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、などで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。
・ このDHTMLの実装方法は、mouse_over7.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head> 〜 </head> の任意の行間に (*1) を、さらに <body> 〜 </body> の任意の行間に (*2) をﾍﾟｰｽﾄします。
･ 編集方法は、hogehoge.html を WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。 下記の（例） (*1) と、(*2) を参考に太字部分の編集を任意に行います。 ﾊﾟﾗﾒｰﾀｰの変更は該当部分で。 ※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。
・ 作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 4.x〜 などで開いて。 更新の確認は、ie、Netscapeやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieでＦ５ｷｰを押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。 Netscapeは、Ctrl+Ｒｷｰで。
･ ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像なども転送/配置し実施。 ※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。 FTPなどで変わったﾌｧｲﾙ名は要修正。 ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。
･ 関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。 Web& Internet Samples、Web Development、XML、DHTMLとは？、ColorTable、HTMLの色指定、色見本。
(*1) ： mouse_over7.htm （例） 挿入先の <head> 〜 </head> の、〜 部分にﾍﾟｰｽﾄします。
| HTMLの編集方法 | (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
| 〔この列ﾍﾟｰｽﾄ不要〕
ｼﾌﾄJIS使用（削除不可） ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）
<style type 〜 </style>は（削除可） ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ 背景色 下線表示
非ﾏｳｽｵｰﾊﾞｰ時の下線非表示（逆も可）
ﾘﾝｸを新しいWinで開くを標準（削除可）※：同じﾌﾚｰﾑ target="_self" 【ﾘﾝｸﾒﾆｭｰ】↓ ﾒﾆｭｰの配置 左・上余白 背景色 ﾒﾆｭｰ文字色 ﾌｫﾝﾄ ｻｲｽﾞ 太さ ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ 背景色 下線表示 ﾒｯｾｰｼﾞの配置 左・幅・上余白 背景色 この間、説明を省略
【ﾘﾝｸﾒﾆｭｰ】↓ ﾌｫﾝﾄ ｻｲｽﾞ
ﾒｯｾｰｼﾞ文字色 幅
ﾃﾞﾌｫﾙﾄﾒｯｾｰｼﾞ ﾒｯｾｰｼﾞ 画像 ｻｲｽﾞ ※:ﾒｯｾｰｼﾞの加減は、”messages[x]= … ”行の追加・削除で。 <br> ： 改行
この間、説明を省略 |
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link REL="SHORTCUT ICON" href="faviconj.ico"> <style type="text/css"><!-- A:hover { COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: underline } A { TEXT-DECORATION: none } --> </style> <base target="_blank"> <title>サンプルページ マウスオーバー 7</title> <style type="text/css"> #divLinks {position:absolute; left:10px; top:10px; visibility:hidden; background-color:#FFFFFF;} #divLinks a {color:#54006C; font-family:MSP Gothic,MS Gothic,sans-serif; font-size:12px; font-weight:700;} #divLinks A:hover {color: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: underline } #divMessage {position:absolute; left:180px; width:300px; top:10px; visibility:hidden; background-color:#FFFFFF;} body {background-color:#F8F5F5;} </style> <script language="JavaScript" type="text/javascript"> ==== この間、説明を省略 === /**** Variables to set ****/ msgFont= "MSP Gothic,MS Gothic" // The font for the message msgFontSize= 12 // Set the fontSize in px msgFontColor="#000000" // Set the fontColor msgWidth= "300" // Set the width of the messageblock here for netscape 4 //Set the text you want to display on mouseover here. messages=new Array() messages[0]="ﾒｯｾｰｼﾞ、ｺﾝﾃﾝﾂ、HTML、画像など 0<br><br> こんにちわ、=(^。^)=<br><br><br><br><br><br>" //This is the default text that appears when you mouse out. messages[1]="ﾒｯｾｰｼﾞ、ｺﾝﾃﾝﾂ、HTML、画像など 1<br><br><img src="1-20al2.jpg" width="112" height="73" alt="" border="0"><br>" ==== この間、説明を省略 === messages[8]="ﾒｯｾｰｼﾞ、ｺﾝﾃﾝﾂ、HTML、画像など 8<br><br> φ(.. ) ここにﾃｷｽﾄなどを記述します。<br><br>=(^。^)= =(・。.・)= ＼^o^／ =（゜。゜）= <br>(*^。^*) =( ﾟ oﾟ )= （・!・）<br>♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪ …*<br> " /******************************************************************************** You don't have to change anything below this ********************************************************************************/ ==== この間、説明を省略 === //If the browser is ok, the init function is called on pageload. if (bw.bw) onload = changeTextInit </script> |
(*2) ： mouse_over7.htm （例） 挿入先の <body> 〜 </body> の、〜 部分にﾍﾟｰｽﾄします。
| HTMLの編集方法 | (*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
| 〔この列ﾍﾟｰｽﾄ不要〕
※：<body> 部の編集 背景 ﾘﾝｸ 表示済みﾘﾝｸﾝｸ ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値） 【ﾘﾝｸﾒﾆｭｰ】↓ URL ﾊｲﾊﾟｰﾘﾝｸ文字 ※:ﾊｲﾊﾟｰﾘﾝｸﾞの加減は、”<a href="#"… ”行の追加・削除で。
ﾌｫﾝﾄ ﾊｲﾊﾟｰﾘﾝｸ文字色 初期ﾒｯｾｰｼﾞ |
<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">
<div id="divLinks"> <a href=" tr0013.htm" onmouseover="changeText(1)" onmouseout="changeText(0)">=(・。・)= ちゃん</a><br> ==== この間、説明を省略 === <a href="http://www.xxxx.xx.jp/xxxxx/xxxxx.html" onmouseover="changeText(8)" onmouseout="changeText(0)">ﾊｲﾊﾟｰﾘﾝｸ 8</a><br> </div> <div id="divMessage"> <font face="MSP Gothic,MS Gothic,sans-serif" size="2" color="#000000"> <br> おう、！！ 元気か、…*<br> <br> =(^。^)= <br> <br><br><br> </font></div> |
< 補足 > 適時参照あれ！。