xx時間毎に表示します。
任意のテキストを記述。 xx時間毎にコンテンツを表示、DIVや画像に付したID毎に時間指定。 クッキー使用、DHTML。
|
xx時間毎に表示します。
 |
ホームへ サンプルページ 訪問 3 visit3.htm
xx時間毎にコンテンツを表示、DIVや画像に付したID毎に時間指定。 クッキー使用、DHTML。 コンテンツなどのカスタマイズはテキストエディターなどで可。 Internet Explorer5.x〜 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
デモは、[F5]キー などで、再読込(≠再アクセス)を。
表示は、【Internet Explorer】-[ツール]-[インターネットオプション]-[Cookieの削除]で、あるいは”xx時間”を”1
hr”から”0.1 hr”に変更。
< ご使用方法 >
・ ローカル(=PC)への保存は、visit3.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法は、visit3.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ
1 や hogehoge.html(=任意の挿入先ファイル名) の、<head> 〜</head>の任意の行間に (*1)
を、さらに<body> 〜</body>の任意の行間に (*2) をペーストします。
・ 編集方法は、hogehoge.html を
WordPadや SmipleTextなどのテキストエディター、あるいはホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 アイコン画像などの変更は準備した画像ファイル名を、hogehoge.html などの該当部分に記述。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 6.x〜 などで開いて。 更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー
を押し最新データ読み込みで行います(≠再アクセス)。 Netscapeは、Ctrl+Rキーで。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像 なども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 :
色記号6、2、スタイルシートリファレンス、ホームページ開設入門が便利!。 Web Development、Web開発、MSDN
IE8 HTMLとCSS。
(*1)
: visit3.htm (例) 挿入先の <head> 〜 </head>の、〜部分にペーストします。
|
HTMLの編集方法 |
(*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
シフトJIS使用(削除不可)
ieなどに表示するアイコンファイル名(削除可)
<style type 〜</style>は(削除可)
ハイパーリンク文字色 背景色 下線
表示済みの〃
マウスオーバー時の〃
クリック中の〃
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム target="_self"
ページ全体 target="_top"
親フレーム target="_parent"
お気に入り、タスクバーに表示するページ名(≠ファイル名)
連番 ID 時間〔表示テストは、”1
hr”から”0.1 hr”に変更。〕
|
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<link REL="SHORTCUT ICON" href="faviconu.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>サンプルページ 訪問 3</title>
<!-- ☆ ----------- ↓ この間をコピー&ペーストします。
------------ -->
<script type="text/javascript">
/***********************************************
* Frequency Cap Content script- ゥ Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//["ID of content to frequency cap", "Display frequency interval (full hours
only)"]
var capcontent=new Array()
capcontent[0]=["okaxx0", "1 hr"]
capcontent[1]=["okaxx1", "1 hr"]
capcontent[2]=["okaxx2", "1 hr"]
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
==== この間、説明を省略。 ====
}
document.write('</style>')
</script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
|
(*2)
: visit3.htm (例) 挿入先の <body> 〜
</body> の、〜
部分にペーストします。
|
HTMLの編集方法 |
(*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
※:<body> 部の編集 背景 リンク 表示済みリンク アクティブリンクの各色(任意値)
ID コンテンツ #1
ID コンテンツ #2
ID コンテンツ #3
|
<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">
<!--webbot bot="HTMLMarkup" startspan -->
<!-- ★ 1 ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<!-- 表示枠位置 表示枠サイズ 座標 表示枠背景色 -->
<div id="okaxx0" style="position:absolute; top:10; left:10; width:400;
height:1; z-index:0; visibility:visible; background-color:#FFFFFF;
background-image: url('');" title="=(゜。.゜)=">
<table width="400" height="50" border="1" cellspacing="0" cellpadding="10"
bgcolor="#FFFFFF" style="border-collapse: collapse"
bordercolorlight="#F1F0FB" bordercolordark="#D5CED3">
<tr>
<td bgcolor="#FFFFFF" align="left"
background="wttec.gif">
<script>
//Random link plus text description script
//By Michael Dillon (http://www.mikenz.com)
//Script featured on Website Abstraction (http://wsabstract.com)
//specify total # of random links
var totallinks=154
var descriptions=new Array(totallinks)
descriptions[0]="理性もまた、奔走する情熱の一種である。 夜の女王(魔笛)の登場は、戦慄と思慕の混沌とする。"
descriptions[1]="人生に影響を与えない文章は、文学ではない。 だから政治家ににふさわしい。"
==== この間、説明を省略。 ====
descriptions[152]="過ぎ去った過去と、来るべき未来はベストに思える。 現在の事柄は悪い。- シェークスピア"
descriptions[153]="正しき者は、悩み多し。- 旧約聖書"
var okaxxxxx=Math.floor(Math.random()*totallinks)
</script>
<script>
var cont=descriptions[okaxxxxx]
document.write(cont)
</script>
</td>
</tr>
</table>
</DIV>
<!-- ★ 1 ----------- ↑ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" endspan i-checksum="15004" -->
<p> </p>
<p> </p>
<!-- ★ 2 ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<table border="0" width="400px" cellspacing="" cellpadding="5">
<tr>
<td valign="top" width="50%"
background="wttec.gif"> xx時間毎に表示します。<br>
<div id="okaxx1" style="border:1px solid #D5CED3; padding: 5px;
background-color: #FFFFFF; width: 160px; height:
160px">任意のテキストを記述。 xx時間毎にコンテンツを表示、DIVや画像に付したID毎に時間指定。 クッキー使用、DHTML。</div>
</td>
<td valign="top" width="50%"
background="wttec.gif"> xx時間毎に表示します。<p>
<a href="image_change14.htm"
target="_blank" title="縮小画像の変速横スクロール、クリックで拡大画像などを開く。">
<img id="okaxx2" border="0"
src="http://xml-xsl.sakura.ne.jp/sea8.jpg" width="103"
height="106"></a></td>
</tr>
</table>
<!-- ★ 2 ----------- ↑ この間をコピー&ペーストします。 ------------ -->
|
< 補足 > 適時参照あれ!。
・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。