ﾎｰﾑ へ　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　水平ｽｸﾛｰﾙﾒﾆｭｰ 　　h_scroll_menu.htm

水平にｽｸﾛｰﾙするﾘﾝｸﾒﾆｭｰ。　　　DHTML。　　　左右の画像のﾏｳｽｵｰﾊﾞｰで開始/停止。　　　　ｽｸﾛｰﾙﾒﾆｭｰのｻｲｽﾞ（wh）、ｽｸﾛｰﾙｽﾋﾟｰﾄﾞおよび、ﾊｲﾊﾟｰﾘﾝｸなどはﾃｷｽﾄｴﾃﾞｨﾀｰなどで。　　　all対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ。　　　

ﾃﾞﾓは、左右の画像のﾏｳｽｵｰﾊﾞｰ、ﾊｲﾊﾟｰﾘﾝｸのｸﾘｯｸで。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、h_scroll_menu.htm 　pointer.gif　pointer2.gif　を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、などで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、h_scroll_menu.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head>　〜　</head> の任意の行間に (*1) を、さらに <body>　〜　</body> の任意の行間に (*2) をﾍﾟｰｽﾄします。　　　　”FrontPage Express”で開き、最上行の [？]ﾏｰｸをﾍﾟｰｽﾄし、編集しても同じ。

　･　編集方法は、hogehoge.html を WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　　下記の（例） (*1) と、(*2) を参考に太字部分の編集を任意に行います。　　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。　　　　※: 太字、彩色自体は動作に無関係。

　・　画像の変更は、pointer.gif とほぼ同ｻｲｽﾞの　*.gif 〔pointer_hm.gif　pointer_kr.gif　pointer_us.gif 〕などを準備し、ﾌｧｲﾙ名を　pointer.gif　と、 pointer2.gif　に変更して使用します。　　　この画像をPCおよびWebｻｰﾊﾞｰの、hogehoge.html　と同じﾎﾙﾀﾞｰ/階層に配置=転送します。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 4.x〜 などで開いて。　　　　更新の確認は、ie、Netscapeやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieで [F5]ｷｰ を押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。　　　Netscaperは、Ctrl+Ｒｷｰで。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.class、*.css、*.js、などを転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

　･　関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web Development、Web開発、CSS Compatibility in ie7、CSS Enhancements in ie6、XML、DHTML、ColorTable、HTMLの色指定、HTMLﾘﾌｧﾚﾝｽ。

　

(*1) ：　h_scroll_menu.htm （例）　　　　　　　　　挿入先の 　<head> 〜 </head>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

ｼﾌﾄJIS使用（削除不可）

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

　

<style type 〜 </style>は（削除可）

ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ　 背景色　下線非表示

　

非ﾏｳｽｵｰﾊﾞｰ時の下線表示（逆も可）

　

　

　

　

ﾘﾝｸを新しいWinで開くを標準（削除可） 　※：target=　いろいろ
同じﾌﾚｰﾑ　target="_self"
ﾍﾟｰｼﾞ全体　　target="_top"
親ﾌﾚｰﾑ　 target="_parent"

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

　

<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: none

}

A {

TEXT-DECORATION: underline

}

-->

</style>

　

　

<base target="_blank">

<title>サンプルページ　　水平スクロールバーメニュー</title>

　

　

(*2) ：　♪ （例）　　　　　　　　挿入先の 　<body> 〜 </body>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

　

表枠ｻｲｽﾞ　ｽﾍﾟｰｽ　幅　背景色

　

ｾﾙ背景色

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

ｽｸﾛｰﾙﾒﾆｭｰ幅

　

　　〃　　高さ

　

ｽｸﾛｰﾙｽﾋﾟｰﾄﾞ　〔1〜10〕

　

　

URL　新しいWinで開く　ｻｲﾄ名

以下、同様にﾊｲﾊﾟｰﾘﾝｸを編集。

※：改行の混入は、非作動原因。

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

 　

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

<!--　▼----------　↓ この間をコピー、編集、ペーストします。 ----------▼　-->

<p><!--webbot bot="HTMLMarkup" startspan -->

<div align="center"><center>

<table border="0" cellspacing="1" width="350" bgcolor="#590176">

<tr>

<td align="center" bgcolor="#FFFFFF"><style>

body{

overflow-x:hidden;

overflow-y:scroll;

}

</style>

<script language="JavaScript1.2">

/*

Scrollable Menu Links- By Dynamicdrive.com

For full source, TOS, and 100s DTHML scripts

Visit http://dynamicdrive.com

*/

//configure path for left and right arrows

var goleftimage='pointer2.gif'

var gorightimage='pointer.gif'

//configure menu width

var menuwidth=300

//configure menu height

var menuheight=25

//configure scroll speed (1-10), where larger is faster

var scrollspeed=6

//specify menu content

var menucontents='<nobr><a href="http://realguide.real.com/" target=_blank>RealGuide</a> | <a href="http://cnn.co.jp/" target=_blank>CNN日本</a> | <a href="http://www.asahi.com/" target=_blank>朝日</a> | <a href="http://www.mainichi.co.jp/" target=_blank>毎日</a>

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

<a href="http://www.mag2.com/i/kusa.htm" target=_blank>台詞</a> | <a href="http://www.lovehotel.to/" target=_blank>ﾎﾃﾙ</a> | <a href="http://mediamax.sumiya.co.jp/i/" target=_blank>新譜i</a></nobr>'

　

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById

if (iedom)

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menucontents+'</span>')

var actualwidth=''

var cross_scroll, ns_scroll

var loadedyes=0

function fillup(){

if (iedom){

cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2

cross_scroll.innerHTML=menucontents

actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth

}

else if (document.layers){

ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2

ns_scroll.document.write(menucontents)

ns_scroll.document.close()

actualwidth=ns_scroll.document.width

}

loadedyes=1

}

window.onload=fillup

function moveleft(){

if (loadedyes){

if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){

cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed

}

else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))

ns_scroll.left-=scrollspeed

}

lefttime=setTimeout("moveleft()",50)

}

function moveright(){

if (loadedyes){

if (iedom&&parseInt(cross_scroll.style.left)<0)

cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed

else if (document.layers&&ns_scroll.left<0)

ns_scroll.left+=scrollspeed

}

righttime=setTimeout("moveright()",50)

}

if (iedom||document.layers){

with (document){

write('<table border="0" cellspacing="0" cellpadding="0">')

write('<td valign="middle"><a href=#" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"><img src="'+goleftimage+'"border=0></a> </td>')

write('<td valign="top">')

if (iedom){

write('<div style="position:relative;width:'+menuwidth+';">')

write('<div style="position:absolute;width:'+menuwidth+';height:'+menuheight+';overflow:hidden;">')

write('<div id="test2" style="position:absolute;left:0;top:0">')

write('</div></div></div>')

}

else if (document.layers){

write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')

write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')

}

write('</td>')

write('<td valign="middle"> <a href="#" onMouseover="moveright()" onMouseout="clearTimeout(righttime)">')

write('<img src="'+gorightimage+'"border=0></a>')

write('</td></table>')

}

}

</script>

</td>

</tr>

</table>

</center></div><!--webbot bot="HTMLMarkup" endspan --></p>

<!--　▲----------　↑ この間をコピー、編集、ペーストします。 ----------▲　-->

　

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

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。