Hello …*、  =(・。・)=   こんにちわ …*

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

デモは、[-] [+]  のクリックや、[ 倍率を ”%” で指定] 、[倍率を ”比率” で指定 ] で倍率を変えます。 画像の変更は、準備した画像を hanasiro.jpg のファイル名に変えて使用できます。 (このテーブルは削除可能。)


plus minus

ホーム へ       サンプルページ  画像ズーミング  zoom02.htm

画像の連続ズーム(10〜1000%〜)。    DHTML/CSS。          Internet Explorer5.5〜対応。     画像変更など簡単、コピー、編集して制作者の情報を反映、簡単にWebで応用可能。

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

 

<ご使用方法>

 ・ ローカル(=PC)への保存は、zoom02.htmzoomslider.htchanasiro.jpgzoomscale.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 で再読込みのために、F5キーを押し最新データを読み込みます。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、上の ”使用する画像”、”*.htc” などを転送/配置後に実施します。   スクリプト中への改行混入は非作動原因。

 ・ 関連情報 : 色記号5〃6スタイルシートリファレンスホームページ開設入門。   Web DevelopmentWeb開発IE10 互換性クックブック〃開発者向けガイド、IE API リファレンスIE 開発 > HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点XML〃リファレンスDHTML

 

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

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

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

互換表示

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

<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>Hello …*、  =(・。・)= &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ソース(タグ)を見ながらの直接編集方法。