ﾎｰﾑ へ ｻﾝﾌﾟﾙﾍﾟｰｼﾞ ﾒｯｾｰｼﾞｽｸﾛｰﾙ25 message_sr25.htm
2行のﾒｯｾｰｼﾞの自動ｽｸﾛｰﾙ（ﾎﾟｰｽﾞﾎﾞﾀﾝ・再開ﾎﾞﾀﾝ・DIVﾁｪﾝｼﾞﾎﾞﾀﾝ）。 DHTML。 ﾒｯｾｰｼﾞ、DIVｻｲｽﾞ、配色などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。 all 対応。 ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。
ﾃﾞﾓは、ﾎﾞﾀﾝﾌﾟｯｼｭやﾊｲﾊﾟｰﾘﾝｸのｸﾘｯｸなどで。
< ご使用方法 >
・ ﾛｰｶﾙ（=PC）への保存は、message_sr25/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、message_sr25.htm、001265777.js、001265777.css を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。 ※: 変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。
・ このDHTMLの実装方法は、message_sr25.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 10.x〜 などで開いて。
更新の確認は、[F5]ｷｰ を押し、最新ﾃﾞｰﾀ読み込み、で。 あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄ ｵﾌﾟｼｮﾝ] -
[閲覧の履歴] - [削除] などでも。
･ ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.js、*.css なども転送/配置し実施。 ※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。 FTPなどで変わってしまったﾌｧｲﾙ名は要修正。 ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。
･ 関連情報 ：
色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。 Web Development、Web開発、IE10
互換性ｸｯｸﾌﾞｯｸ、〃開発者向けｶﾞｲﾄﾞ、IE
API ﾘﾌｧﾚﾝｽ、IE 開発
> HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、XML、〃ﾘﾌｧﾚﾝｽ、DHTML。
(*1)
： message_sr25.htm （例） 挿入先の <head> 〜 </head> の、〜 部分にﾍﾟｰｽﾄします。
|
HTMLの編集方法 |
(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
|
〔この列ﾍﾟｰｽﾄ不要〕
ｼﾌﾄJIS使用（削除不可）
互換表示
ieなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）
<style type= 〜
</style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景
body 文字色 背景色 下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ
ﾘﾝｸを新しいWinで開くを標準（削除可）※：target= いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）
DIV幅
〃 高さ
背景色
以下、同様。
DIV 1
URL ｱｲｺﾝ ｻｲﾄ名 ﾒｯｾｰｼﾞ
以下、同様。
DIV2
|
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link REL="SHORTCUT ICON" href="favicon.ico">
<style type="text/css"><!--
.xxx0
{ background: #F9F8F9 url('wttec.gif');
}
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9
url('wttec.gif'); text-decoration:none;
}
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4;
text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2;
text-decoration:underline; }
font {font-size:12px;
line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
--></style>
<base target="_blank">
<title>サンプルページ メッセージスクロール25</title>
<!-- ☆ ----------- ↓ この間をコピー＆ペーストします。 ------------ -->
<link rel="stylesheet" href="001265777.css" />
<style>
/* Demo CSS for Pausing Scrollers */
#pscroller1{
width: 100%;
max-width: 450px;
height: 50px;
border: 1px solid black;
background-color: #EEF0C1;
margin-bottom: 1em;
}
#pscroller1 > div.innerDiv{
padding: 8px;
}
#pscroller1 a{
text-decoration: underline;
}
#pscroller2{
width: 100%;
max-width: 450px;
height: 50px;
border: 1px solid black;
background-color: #DCF1E2;
margin-bottom: 1em;
}
#pscroller2 > div.innerDiv{
padding: 8px;
}
#pscroller2 a{
text-decoration: underline;
}
</style>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()
pausecontent[0]='<a href="../google_maps28.htm" target="_blank"
title=""><img border="0" src="../btn_search1.gif" width="18"
height="18" align="texttop"> 世界のﾎﾃﾙ検索"></a><br />Webﾍﾟｰｼﾞにﾎﾃﾙ検索
ﾌｫｰﾑ付きGoogle Mapを実装する。'
pausecontent[1]='<a href="../google_maps18/google_maps18.htm"
target="_blank" title=""><img border="0" src="../map.gif" width="18"
height="18" title="" align="absbottom"> ｽﾀｰﾊﾞｯｸｽ"></a><br />全国、店名・営業時間'
pausecontent[2]='<a href="http://www. …… gmap_select/gmap_select1.htm"
target="_blank" title=""><img border="0" src="../map.gif" width="18"
height="18" title="" align="absbottom"> Google Mapsｾﾚｸ ﾄ1"></a><br
/>ﾘｽﾄからｽﾄﾘｰﾄﾋﾞｭｰを選択、右DIVに表示。'
pausecontent[3]='<a href="../google_maps40.htm" target="_blank"
title=""><img border="0" src="../map.gif" width="18" height="18" title=""
align="absbottom"> Directly accessing Street View"></a><br
/>ｽﾄﾘｰﾄﾋﾞｭｰﾎﾟﾝﾄをｸﾘｯｸ（ﾍﾟｸﾞﾏﾝ無し）、ﾀﾞｲﾚｸﾄに表示。'
pausecontent[4]='<a href="../google_maps30.htm" target="_blank"
title=""><img border="0" src="../map.gif" width="18" height="18" title=""
align="absbottom"> Street View30"></a><br />ﾍﾟｸﾞﾏﾝをﾄﾞﾗｯｸﾞ、ﾋﾞｭｰ表示。'
pausecontent[5]='<a href="../google_maps41.htm" target="_blank"
title=""><img border="0" src="../map.gif" width="18" height="18" title=""
align="absbottom"> Geolocation"></a><br />所在地を表示、ﾏｰｷﾝｸﾞ、航空写真・地形に切り替え可。'
pausecontent[6]='<a href="../google_maps31.htm" target="_blank"
title=""><img border="0" src="../map.gif" width="18" height="18" title=""
align="absbottom"> 世界の建物・店舗検索"></a><br />Webﾍﾟｰｼﾞに物件検索ﾌｫｰﾑ付きGoogle
Mapを実装する。'
pausecontent[7]='<a href="../google_maps43.htm" target="_blank"
title=""><img border="0" src="../map.gif" width="18" height="18" title=""
align="absbottom"> 世界のﾙｰﾄ案内"></a><br />徒歩・路線・車、頭文字からﾀｲﾌﾟｲﾝ可'
pausecontent[8]='<a href="http://www. …… google_map/google_map3a.htm"
target="_blank" title=""><img border="0" src="../map.gif" width="18"
height="18" title="" align="absbottom"> ﾙｰﾄ案内（手段・有料道路）"></a><br
/>Webﾍﾟｰｼﾞに住所（PlaceID）検索ﾌｫｰﾑ付きGoogle Mapを実装する。'
pausecontent[9]='<a href="http://www. …… google_map/google_map3d.htm"
target="_blank" title=""><img border="0" src="../map.gif" width="18"
height="18" title="" align="absbottom"> ﾙｰﾄ案内（中継点変更・標高ﾏｯﾌﾟ）"></a><br
/>Webﾍﾟｰｼﾞに住所（PlaceID）検索ﾌｫｰﾑ付きGoogle Mapを実装する。'
pausecontent[10]='<a href="http://www. …… google_map/google_map3c.htm"
target="_blank" title=""><img border="0" src="../map.gif" width="18"
height="18" title="" align="absbottom"> ﾙｰﾄ案内（発・中継・着点ﾄﾞﾗｯｸﾞ）"></a><br
/>Webﾍﾟｰｼﾞに住所（PlaceID）検索ﾌｫｰﾑ付きGoogle Mapを実装する。'
pausecontent[11]='<a href="../google_maps33.htm" target="_blank"
title=""><img border="0" src="../map.gif" width="18" height="18" title=""
align="absbottom"> 世界の都市交通網"></a><br />Webﾍﾟｰｼﾞに”地下鉄路線”Transit laye 付きGoogle
Mapを実装する。'
pausecontent[12]='<a
href="http://www. …… google_map/google_map3p/google_map3p.htm"
target="_blank" title=""><img border="0" src="../map.gif" width="18"
height="18" title="" align="absbottom">東京 地下鉄路線"></a><br />東京、選択駅ﾏｯﾌﾟ付き'
pausecontent[13]='<a href="../google_maps34.htm" target="_blank"
title=""><img border="0" src="../map.gif" width="18" height="18" title=""
align="absbottom"><b></b> 世界の道路交通量"></a><br />Traffic layer 付きGoogle
Mapを実装する。'
pausecontent[14]='<a href="../google_maps42.htm" target="_blank"
title=""><img border="0" src="../map.gif" width="18" height="18" title=""
align="absbottom"> 世界の自転車専用道路"></a><br />世界の自転車専用道路'
var pausecontent2=new Array()
pausecontent2[0]='<a href="../top_navbar61/top_navbar61.htm" target="_blank"
title=""><img border="0" src="../showtoc1.gif" width="16" height="16"
align="absmiddle"> ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ61"></a><br />
横長配置、ﾌﾛｰﾃｨﾝｸﾞ、ﾏｳｽｵｰﾊﾞｰで展開、Animated Header Menu。'
pausecontent2[1]='<a href="../left_menu8a/left_menu8a.htm" target="_blank"
title=""><img border="0" src="../showtoc1.gif" width="16" height="16"
align="absmiddle"> 左ﾒﾆｭｰ"></a><br />左端にﾌﾛｰﾃｨﾝｸﾞ、ｱｲｺﾝのｸﾘｯｸで、ﾌﾟｯｼｭﾒﾆｭｰを表示。
ﾌﾟｯｼｭﾒﾆｭｰに ”折り畳みﾒﾆｭｰ”搭載。'
pausecontent2[2]='<a title="" href="../rss_feed/rss_feed.htm"><img
border="0" src="../text.gif" width="18" height="18" align="texttop">
News（RSS）</a><br/>主なﾆｭｰｽﾍﾟｰｼﾞの記事ﾀｲﾄﾙ一覧'
pausecontent2[3]='<a href="../slideshow36/slideshow36ssmt.htm" title=""><img
border="0" src="../haiku.gif" align="" width="20" height="15"
align="absmiddle"> 俳句</a><br/>花鳥風月を詠む＋ｽﾗｲﾄﾞｼｮｰ'
pausecontent2[4]='<a href="http://www. …… search_google3a.htm"
target="_blank" title=""><img border="0" src="../btn_search1.gif" width="18"
height="18" align="texttop"> ｻｲﾄ内検索</a><br/>指定ﾄﾞﾒｲﾝ内の検索'
pausecontent2[5]='<a href="https://www …… XleerbYZMr60mcS" title=""><img
border="0" src="../audiovideo.gif" align="texttop" width="16" height="16">
野鳥図鑑You Tube</a><br/> 野鳥の動画（囀り・鳴き声）'
pausecontent2[6]='<a href="https://www …… O/playlists" target="_blank"
title=""><img align="absbottom" border="0" src="../youtube_18x18.png"
width="20" height="20"> You Tube ♫ Play List -ｸﾗｼｯｸ</a><br/>You Tube
♫ Play List -ｸﾗｼｯｸ'
pausecontent2[7]='<a href="https://www. …… LwhqXwuog/playlists"
target="_blank" title=""><img align="absbottom" border="0"
src="../youtube_18x18.png" width="20" height="20"> You Tube ♫ Play
List -ﾎﾟｯﾌﾟｽ</a><br/>You Tube ♫ Play List -ｼﾞｬｽﾞ・ﾜｰﾙﾄﾞﾐｭｰｼﾞｯｸ'
pausecontent2[8]='<a href="http://www …… oritatami3c.html" title=""><img
border="0" src="../xsl-icon.gif" width="16" height="16" align="middle"
title="Webﾍﾟｰｼﾞ、ﾀﾞｲﾅﾐｯｸﾍﾟｰｼﾞ作成支援、作成手順ｻﾝﾌﾟﾙ。">
JavaScript、XML、…、ｻﾝﾌﾟﾙ</a><br/>JavaScriptｻﾝﾌﾟﾙ・ｶﾃｺﾞﾘｰ（応用方法）'
pausecontent2[9]='<a href="http://www …… list21.html" title=""><img
border="0" src="../download2.gif" width="16" height="16" align="middle">
ｵﾝﾗｲﾝｿﾌﾄ（ﾘﾝｸ集・ｶﾃｺﾞﾘｰ）</a><br/>ﾘﾝｸ集・ｶﾃｺﾞﾘｰ'
pausecontent2[10]='<a href="http://www …… list22.html" title=""><img
border="0" src="../download2.gif" width="16" height="16" align="middle">
ｵﾝﾗｲﾝｿﾌﾄ（ﾘﾝｸ集・あ〜Z）</a><br/>ﾘﾝｸ集・あ〜Z'
pausecontent2[11]='<a href="http://www …… css.htm" title=""><img border="0"
src="../aotama.gif" width="17" height="17" align="middle">
CSSﾘﾌｧﾚﾝｽ</a><br/>50音ｲﾝﾃﾞｯｸｽ'
pausecontent2[12]='<a href="http://www. …… database15/database15.htm"
title=""><img border="0" src="../collection.gif" width="16" height="16"
align="middle"><br/> JavaScript絞り込み検索</a>ｶﾃｺﾞﾘｰ・ｼﾞｬﾝﾙ絞り込み'
pausecontent2[13]='<a href="http://www. …… search_engine2_a.htm"
title=""><img border="0" src="../btn_search1.gif" width="18" height="18"
align="middle"> ﾏﾙﾁ検索（検索ｴﾝｼﾞﾝ切り替え）</a><br/>検索ｴﾝｼﾞﾝ切り替え'
pausecontent2[14]='<a href="http://www. …… frame_sample1/setumeisyo.htm"
title=""><img border="0" src="../showtoc1.gif" width="16" height="16"
align="absmiddle"> ﾌﾚｰﾑ（全ﾀｲﾌﾟ・ﾘﾌｧﾚﾝｽ）</a><br/>全ﾀｲﾌﾟ・ﾘﾌｧﾚﾝｽ'
pausecontent2[15]='<a href="http://www. …… rgb5/rgb5.htm" title=""><img
border="0" src="../color-s.jpg" width="15" height="15" align="absmiddle">
RGB5（色相･彩度･明度ﾊﾟﾚｯﾄ）</a><br/>1) “ｶﾗｰﾊﾟﾚｯﾄ（色相+彩度）” で目的色をｸﾘｯｸ。 2) さらに “明度ﾊﾞｰ”
を調整。'
pausecontent2[16]='<a href="../slideshow45a/xmlphotoalbum.swf" title=""><img
border="0" src="../audiovideo.gif" align="texttop" width="16" height="16">
岡副麻希 画像</a><br/>ｽﾗｲﾄﾞｼｮｰ（ｱﾙﾊﾞﾑ・一覧・自動/手動）'
pausecontent2[17]='<a
href="https://www.instagram.com/takizawakarenofficial/" target="_blank"><img
border="0" src="../audiovideo.gif" align="texttop" width="16" height="16">
滝澤ｶﾚﾝ</a><br/>ｲﾝｽﾀｸﾞﾗﾑ'
</script>
<script type="text/javascript" src="001265777.js">
/***********************************************
* Pausing up-down scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
**********************************************/
</script>
<!-- ☆ ----------- ↑ この間をコピー＆ペーストします。 ------------ -->
</head>
|
(*2)
： message_sr25.htm （例） 挿入先の <body> 〜
</body> の、〜
部分にﾍﾟｰｽﾄします。
|
HTMLの編集方法 |
(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
|
〔この列ﾍﾟｰｽﾄ不要〕
切り替え周期 遷移時間
ﾎﾞﾀﾝﾃｷｽﾄ
|
<body>
<body>
<!-- ★ ----------- ↓ この間をコピー＆ペーストします。 ------------ -->
<div id="pscroller1" class="pausescroller"></div>
<div id="pscroller2" class="pausescroller"></div>
<script type="text/javascript">
//new pausescroller(message_array, CSS_ID, pause_in_ms, slideeffect_in_ms)
var scroller1 = new pausescroller(pausecontent, "pscroller1", 2000,
1500)
var scroller2 = new pausescroller(pausecontent2, "pscroller2", 2000, 1500)
</script>
<p>
<button onClick="scroller1.pause()"><b>ﾎﾟｰｽﾞ 1</b></button>
<button onClick="scroller1.resume()"><b>再開 1</b></button>
<button onClick="scroller1.populate(pausecontent2)"><b>1 に 2
を表示</b></button>
</p>
<!-- ★ ----------- ↑ この間をコピー＆ペーストします。 ------------ -->
==== この間､説明を省略｡ ====
|
< 補足 > 適時参照あれ！。
・ Wordpad によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。