Ｈｅｌｌｏ　…*、　 =(・。・)=　  こんにちわ　…*

" "
『　 こんにちはわ　=(^。^)=、　Σ Г Ч Δ Θ ∂ Φ　…*　』
『　鰯の頭、秋刀魚のしっぽ、シャケの皮、……　持ってるのか、？……　』
『　泥鰌とったんか　(^ ^)、　……ザリガニ　(-."-;)　』
『　これから赤灯台に釣りにいくねんな、Ο潮　……！！。　チヌ、うなぎ 〜*　』
上のｴﾘｱに画像を表示します。 読み込み後に”25%”のﾃﾞﾌｫﾙﾄ値に調整されます。

ﾃﾞﾓは、[-]　[+] 　のｸﾘｯｸや、[ 倍率を ”%” で指定]　、[倍率を ”比率” で指定 ] で倍率を変えます。 画像の変更は、準備した画像を hanasiro.jpg のﾌｧｲﾙ名に変えて使用できます。　（このﾃｰﾌﾞﾙは削除可能。）
plus minus

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　画像ｽﾞｰﾐﾝｸﾞ　　zoom02.htm

画像の連続ｽﾞｰﾑ（10〜1000%〜）。　　　　DHTML/CSS。　　　　　　　　　　Internet Explorer5.5〜対応。　　　　　画像変更など簡単、ｺﾋﾟｰ、編集して制作者の情報を反映、簡単にWebで応用可能。

ﾃﾞﾓは、[ 倍率を ”%” で指定]　、[倍率を ”比率” で指定 ] で倍率を変える。　　互換表示・設定で。 .

　

<ご使用方法>

　・　ﾛｰｶﾙ（=PC）への保存は、zoom02.htm、zoomslider.htc、hanasiro.jpg、zoomscale.gif を右ｸﾘｯｸします。　　　[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 ……、などで行います。　　　※1:ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は多少ある）。　　　 ※2:hogehoge.html ： 制作者が名付けた挿入先ﾌｧｲﾙの総称。

　・　PCに保存したﾌｧｲﾙを WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは "hpb001.html#FEPsetup" target="_blank">FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　<ご使用方法>などの、不要な文字は削除します。　　　このDHTMLの実装方法は、zoom02.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、挿入先（新しいﾍﾟｰｼﾞ 1 や hogehoge.html） の、 　<head>　〜　</head>の間の任意の行、”〜”部分に、 (*1) 部分を、さらに　　<body>　〜　</body>の間の任意の行、”〜”部分に、(*2) 部分をﾍﾟｰｽﾄします。　　　

　･　編集方法 ： 下記の（例）(*1)と、(*2)　を参考に太字部分などの編集を行い、制作者の個別情報などを反映させます。　　　　”[ 倍率を ”%” で指定 ▼ ]”　などの操作ﾊﾟﾈﾙ部分の削除は、　　<!-- Displayed code -->　 から　</DIV></DIV>　までを削除します。　　　ﾊﾟﾗﾒｰﾀｰの変更も該当部分の記述/追加/変更/削除で行います。　　数字部分でいろいろ実験可能、(^ ^)　＼^o^／　♪└|∵|┐♪└|∵|┘♪┌|∵|┘♪。　　　　説明のための太字、彩色自体に依存なし。

　･　画像の変更は、準備した画像を hanasiro.jpg のﾌｧｲﾙ名に変えて使用できます。（あるいは、zoom02.htm の該当記述を変更でも。）

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 5.5〜 などで開き行います。　　　　非作動原因にﾌﾞﾗｳｻﾞｰのｷｬｯｼｭに残っている前ﾃﾞｰﾀがあります。　　目的のﾍﾟｰｼﾞを表示させた状態で、Internet Explorer で再読込みのために、Ｆ５ｷｰを押し最新ﾃﾞｰﾀを読み込みます。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、上の　”使用する画像”、”*.htc” などを転送/配置後に実施します。　　　ｽｸﾘﾌﾟﾄ中への改行混入は非作動原因。

　･　関連情報 ： 色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。　　　Web Development、Web開発、IE10 互換性ｸｯｸﾌﾞｯｸ、〃開発者向けｶﾞｲﾄﾞ、IE API ﾘﾌｧﾚﾝｽ、IE 開発 > HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、XML、〃ﾘﾌｧﾚﾝｽ、DHTML。

　

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

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

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

互換表示

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

<style type= 〜  </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景

body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

 　

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

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<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>サンプルページ　　画像ズーミング</title>

　

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

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

　

　

　

　

　

　

　

画像ﾌｧｲﾙ名

　

罫線色　〃幅
画像表示ﾊﾟﾈﾙ位置　初期ｻｲｽﾞ

　

　

　

操作ﾊﾟﾈﾙ位置　ｻｲｽﾞ
罫線色　〃幅


<BODY onload="oZoom.style.zoom='25%'; oCode.innerText='zoom: 25%'; " bgcolor="#F5F1F1" link="#50006F" vlink="#67010E" alink="#FFFF00" >

<!-- ★ --↑の、onload="oZoom …… と、↓ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->
<!-- Slider and + and - controls;;;; -->
<DIV STYLE="position:absolute; top:10; left:10;">
<FORM>
<CONTROL:SLIDER ID="oSlider" STYLE="sl--orientation:vertical; height:204px; width:28px; background-color:#336699; padding-left:5px; border-left:1px solid #6699CC" TICKINTERVAL="10" MAX="200" MIN="0" onchange="changeZoom()"> </CONTROL:SLIDER>
</FORM>
</DIV>
<DIV STYLE="position:absolute; top:12px; left:10px; width:20px; height:198px; background-color:#336699" ALIGN="center">
<IMG SRC="zoomscale.gif" BORDER="0" USEMAP="#scaler" width="20" height="200">
</DIV>

<!-- The zoomable area container -->
<DIV STYLE="position:absolute; top:10; left:30; width:550px; height:204px; background-color:black; vertical-align: middle; padding:5px; font-family:arial; font-weight:bold; color:white; z-index:3" ALIGN="center">

<!-- The zoomable area -->
<DIV ID="oZoom" STYLE="zoom:100%" ALIGN="center">
<H1>Ｈｅｌｌｏ　…*、　 =(・。・)=　&nbsp; こんにちわ　…*</H1>
<IMG SRC="hanasiro.jpg" ALIGN="left" width="680" height="451">
</DIV></DIV>

<!-- Displayed code -->
<DIV STYLE="overflow:hidden; border-left: #E9E8EE 1px solid; border-top: #E9E8EE 1px solid; border-right: #D5D4E0 1px solid; border-bottom: #D5D4E0 1px solid; position:absolute; top:1200; left:20; width:450px; height:90px; padding:1px; padding-left:25px; background-color:white; z-index:3;background-color:#EEEEEE;background-image: url(wttec.gif');">
<SPAN>&quot;</SPAN>
<SPAN STYLE="font-weight:bold; font-family:verdana; color:#8C0015; font-size:9pt" CLASS="coder" ID="oCode"></SPAN>
<SPAN>"</SPAN>
<DIV>『　 こんにちはわ　=(^。^)=、　Σ Г Ч Δ Θ ∂ Φ　…*　』<br>
『　鰯の頭、秋刀魚のしっぽ、シャケの皮、……　持ってるのか、？……　』<br>
『　泥鰌とったんか　(^
^)、　……ザリガニ　(-.&quot;-;)　』<br>
『　これから赤灯台に釣りにいくねんな、Ο潮　……！！。　チヌ、うなぎ 〜*　』</DIV>
</DIV>
<DIV ID="oControls" STYLE="position:absolute; top:1290; left:20; width:450px; height:100px; background-color:#EEEEEE;background-image: url('wttec.gif'); color:#170031; font-family:verdana; font-size:11; font-weight:normal; padding:10px; z-index:3; text-align:center; ; border-left: #E9E8EE 1px solid; border-top: #E9E8EE 1px solid; border-right: #D5D4E0 1px solid; border-bottom: #D5D4E0 1px solid; text-align:left;">
<DIV STYLE="padding-left:5px;">
上のｴﾘｱに画像を表示します。 読み込み後に”25%”のﾃﾞﾌｫﾙﾄ値に調整されます。
<BR><BR>
ﾃﾞﾓは、[-]　[+] 　のｸﾘｯｸや、[ 倍率を ”%” で指定]　、[倍率を ”比率” で指定 ] で倍率を変えます。
画像の変更は、準備した画像を hanasiro.jpg のﾌｧｲﾙ名に変えて使用できます。　（このﾃｰﾌﾞﾙは削除可能。）
</DIV><hr size="1" color="#EBEAEF">
<DIV ALIGN=CENTER>
<SELECT ID="percent" onchange="changeZoom2(percent); ">
<OPTION SELECTED>倍率を ”%” で指定</OPTION>
<OPTION>10%</OPTION>
<OPTION>25%</OPTION>
<OPTION>50%</OPTION>
<OPTION>75%</OPTION>
<OPTION>100%</OPTION>
<OPTION>150%</OPTION>
<OPTION>200%</OPTION>
</SELECT>
<SELECT ID="normal" onchange="changeZoom2(normal); ">
<OPTION SELECTED>倍率を ”比率” で指定</OPTION>
<OPTION>.1</OPTION>
<OPTION>0.25</OPTION>
<OPTION>0.5</OPTION>
<OPTION>0.75</OPTION>
<OPTION>1.0</OPTION>
<OPTION>1.5</OPTION>
<OPTION>2.0</OPTION>
</SELECT><hr size="1" color="#EBEAEF">
</DIV></DIV>
<MAP NAME="scaler">
<AREA SHAPE="rect" COORDS="0,182,19,199" ALT="plus" HREF="#" onclick="zoomIn()" STYLE="cursor:hand">
<AREA SHAPE="rect" COORDS="1,1,18,15" ALT="minus" HREF="#" onclick="zoomOut()">
</MAP>
<!-- ★ ---------- ↑ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->

====  この間､自由ｺﾝﾃﾝﾂ、説明を省略｡  ====

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

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