・ <p> </p>タグ(paragraph)や、<td>タグ(表)、<form>フォームタグ部分をマウスオーバーで反応する背景色ランダム変化の装飾効果。 色設定可。

=(・。.・)= \^o^/ (-"-;) 〔`。´ 〕
またね…* カレンダー13  スライドショー16a   
       
       
 お名前 :       
 メールアドレス :  
 WebサイトのURL :  
 お奨めサイト :  
 興味・関心事 :  
 ご感想 :  
 ご自由記入 :  
 送信 :     

 

ホームへ       サンプルページ  背景色 1 bg_color1.htm

背景色ランダム変化の装飾効果、<p> </p>タグ(paragraph)や、<td>タグ(表)、<form>フォームタグ部分をマウスオーバーで反応 させる。     色設定可、色数任意。     DHTML。      色、色数、設定対象タグなどのカスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、マウスオーバーなどで。

 

< ご使用方法 >

・ ローカル(=PC)への保存は、bg_color1.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

・ このDHTMLの実装方法は、bg_color1.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、<head> 〜</head>の任意の行間に (*1) を、さらに<body> 〜</body>の任意の行間に (*2) をペーストします。

・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。   アイコン画像などの変更は準備した画像ファイル名を、hogehoge.html などの該当部分に記述。   パラメーターの変更は該当部分で。    ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 6.x〜 などで開いて。    更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。   Netscapeは、Ctrl+Rキーで。

・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像 なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS

 

(*1):bg_color1.htm (例)        挿入先の  <head> 〜 </head>の、部分にペーストします。

HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type 〜</style>は(削除可)
ハイパーリンク文字色 背景色 下線
表示済みの〃
マウスオーバー時の〃
クリック中の〃

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム target="_self"
ページ全体  target="_top"
親フレーム  target="_parent"
お気に入り、タスクバーに表示するページ名(≠ファイル名)

色記号: 色記号2 参照

 

メールフォームの一部 

 

 

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
a:link { color:#55006C; background-color:#FAFAFC; text-decoration:none; }
a:visited { color:#3E0010; background-color:#F3F2F4; text-decoration:none; }
a:hover { color:#8000e2; background-color:#E8E5E9; text-decoration:underline; }
a:active { color:#E700A4; background-color:#E1DDE9; text-decoration:underline; }
-->
</style>

<base target="_blank">
<title>サンプルページ  背景色 1</title>

 

<!-- ☆1 ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<script type="text/javascript">
<!--
/* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Thai Cao Phong :: www.JavaScriptBank.com */
/*             色指定(#無し)、色数任意   */
var ColorCode=new Array("DDD077","CDDD76","77DDCD","AA8CE2","DCD8E3", "E0D3E3","F2CAD9","D1D0F3","DCD8DE","E3FF76","FFD9A8");
function ParaOver(CaoPhong) {
CaoPhong.style.backgroundColor=ColorCode[Math.round(Math.random()*10)];
}
function ParaOut(CaoPhong) {
CaoPhong.style.backgroundColor="transparent";
}
-->
</script>
<!-- ☆1 ----------- ↑ この間をコピー&ペーストします。 ------------ -->
<!-- ☆2 メールフォーム --- ↓ この間をコピー&ペーストします。 --------- -->
<script>
<!--
// Script Editor: Howard Chen
// Author: Javafile.com - http://javafile.com
// Permission granted to SimplytheBest.net to feature script in its DHTML scripts and JavaScripts collection
function checkData()
{
var correct = true
if (document.xxyyzz.name.value == "") {correct = false; alert("お名前を、お願いいたします。")}
if (document.xxyyzz.email.value == "") {correct = false; alert("メールアドレスを、お願いいたします。 無し=0")}
if (document.xxyyzz.website.value == "") {correct = false; alert("WebサイトのURLを、お願いいたします。 無し=0")}
if (document.xxyyzz.osusume_site.value == "") {correct = false; alert("お奨めサイトのURLを、お願いいたします。 無し=0")}
if (document.xxyyzz.kyoumi.value == "") {correct = false; alert("関心・興味のあるものを、教えて下さい。")}
if (document.xxyyzz.comment.value == "") {correct = false; alert("ご感想を、お願いいたします。")}
if (document.xxyyzz.free.value == "") {correct = false; alert("ご自由に記入下さい。 無し=0")}
if (correct){alert("ありがとう、ございました。  =(^。^)=")}
return correct
}
//-->
</script>
<!-- ☆2 メールフォーム --- ↑ この間をコピー&ペーストします。 --------- -->
 

 

(*2):bg_color1.htm (例)        挿入先の  <body> 〜 </body> の、部分にペーストします。

HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)  

<p> </p>装飾(例) 

表装飾(例) 

以下、同様。

 

 表装飾(例) 

以下、同様。

 

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!-- ★1 ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<table width="700" height="" border="1" cellspacing="0" cellpadding="5" bgcolor="#FFFFFF" style="border-collapse: collapse" bordercolorlight="#F1F0FB" bordercolordark="#D5CED3">
<tr><td>
<p onmouseover="ParaOver(this)" onmouseout="ParaOut(this)"> ・ &lt;p&gt; &lt;/p&gt;タグ(paragraph)や、&lt;td&gt;タグ(表)、&lt;form&gt;フォームタグ部分をマウスオーバーで反応する背景色ランダム変化の装飾効果。 色設定可。</p>
<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="500" bgcolor="#F4F4F2" bordercolor="#B9A8D5" id="table1">
<thead border="1" bordercolor="#A390BF">
<tr>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%" bgcolor="#E1DEE4" bordercolor="#B9A8D5" align="center">
<a href="http://xml-xsl.sakura.ne.jp/tr0012.htm" target="_blank" title="窓からやってくる、お友達。(^ ^)">=(・。.・)=</a></td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" bgcolor="#E1DEE4" bordercolor="#B9A8D5" width="25%" align="center">\^o^/</td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" bgcolor="#E1DEE4" bordercolor="#B9A8D5" width="25%" align="center">
(-&quot;-;)</td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" bgcolor="#E1DEE4" bordercolor="#B9A8D5" width="25%" align="center">〔`。´
〕</td>
</tr>
</thead>
<tbody border="1" bordercolor="#FFFFFF">
<tr>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%">またね…*</td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"><a href="http://xml-xsl.sakura.ne.jp/calendar13.htm" target="_blank" title="月刊カレンダー。 祝日、ハイパーリンク、詳細配色。">カレンダー13</a> </td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"><a href="slideshow_16a.htm" target="_blank" title="画像のフェイドイン・アウト切り替え。">スライドショー16a</a> </td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
</tr>
<tr>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
</tr>
<tr>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="25%"> </td>
</tr>
</tbody>
</table>
<!-- ★2 メールフォーム --- ↓ この間をコピー&ペーストします。 --------- -->
<form action="mailto:name@xxxx.co.jp" method="POST" enctype="text/plain" name="xxyyzz" onSubmit="return checkData()">
<table border="0" cellspacing="1" class="example">
<tr>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" bgcolor="#E5E4EA" width="100" valign="top"><font color="#3A0015">&nbsp;お名前 :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></td>
<td><input name="name" size="22"> </td>
</tr>

====  この間、説明を省略。  ====

<tr>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" align="left" width="100" valign="top" bgcolor="#E5E4EA"><font color="#320012">&nbsp;送信 :</td>
<td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)"> <input type="submit" name="B1" value="送信" title="送信を開始する祢。">   <input type="reset" name="B2" value="消去" title="入力データを消してまう。"></td>
</tr>
</table>
<!-- ★2 メールフォーム --- ↑ この間をコピー&ペーストします。 --------- -->
</td>
</tr>
</table>
<!-- ★1 ----------- ↑ この間をコピー&ペーストします。 ------------ --> 

 

 

< 補足 >    適時参照あれ!。

・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。