2013/06/16

Webページで1枠多重画像

フィギュア・髪: Kururu (matoさん)、衣装: cami&denim(tentmanさん)
照明: 背景画のIBL & 平行光1灯、色濃さ替り材質: 髪・衣装 &
肌(色相変化 -6%、濃い色替り 80%、薄色替り 50%、スポット 20%、静脈 5%、色絵替え 65%)

色濃さ替り材質のテストも兼ねて matoさんの Kururuをレンダーしていたら、
細かいモーフが組み込まれているので、少し変化をつけてみたくなりました。
上の画像はやや変則的な4コマ物です。(元祖のように「くるる」とは回りませんが‥)

この種の簡単な多重画像は、これまでそのつど"やっつけ"でコードを書いていました。
しかし用途に応じて書き換えるだけでも、作動テストと細かい修正が結構面倒です。
そこで今回少し汎用化して、Web上の簡易ツールにしてみました。

結果には、ごく基本的なHTMLとJavascriptの機能しか使っていないので、HTMLソースレベル
の編集機能を持つサイトなら、たいてい以下の出力コードを埋め込んで動くと思います。
もしこの Cocolog 以外のブログでも動いたら、報告して貰えると他の利用者に役立つかと‥
あと最近外国からのお客さんが増えたので、日英二ヶ国語版にしました。


Web 1枠多重画像 (JavaScript), v1.0

 ・画像はネットにアップロードして使用
 ・ディスク内の画像でテストしたい時:
  1)  このページをディスクに保存して、保存したページを開く。
  2)  Webブラウザに画像を表示して、そのURL欄の file:///‥/画像ファイル名 を下に貼る。
    (ただしその出力コードをネット上に置いても画像のURL部が無効)

1. 枠 横サイズ(半角) ※画像サイズと異なる場合は画像が伸縮表示される
2. 枠 縦サイズ(半角) ※同上
3. 初期画像(URL)

※省略時は第1画像。「Webページを開いた時」および「オプション a がオンでポインタが外に出た時」に表示。
4. 第1画像(URL)

※必要
5. 第2画像(URL)

※初期画像の指定が無ければ必要
6. 第3画像(URL)

7. 第4画像(URL)

オプション:
 a) マウスポインタの出入りによる画像切り替え
   ※「枠から出たら状態をリセットして初期画像」「入ったら第1画像」を表示
 b) クリックモード: 最終画像で停止 循環 振り子
 c) 識別番号(桁数自由、半角) (例 01)
   ※Webの1ページ内(複数ブログ記事の一覧頁含む)に複数のWeb多重画像を置く場合、区別が必要。
 d) 第5以上の画像: ※あればURLを下に記入(複数URLの区切りは改行)
  


Web Multiple Images in a Frame (JavaScript), v1.0
The link to this utility: http://oso.tea-nifty.com/blog/2013/06/web-26cd.html#wmi

"Web Multiple Images in a Frame" is a very simple Web-presentation-style of multiple still-images, using an image-frame and mouse operations (click, move-in, and move-out). This manual switching style of a few or several still images, typically, is very Internet-friendly, hence Earth-friendly (through electric power consumption, etc.), in the sense that each Server just sends a few or several image-files and each Client displays each image only when the user has requested to show it.

The following utility generates HTML&JavaScript codes of a particular Frame, which you can embody into your Web-pages (including BLOGs) that have HTML-Source Editor.

    The workability of the codes in a specific Web-page, however, depends on the HTML-Source Editor of the service you use, which sometimes rewrites user-input-codes for security or keeping own style of the Web-host.

The image-files for this utility should exist on the Internet, basically.
When you like to TEST something by using images on your disk(s):
1) Save this web-page to your disk then open the SAVED-PAGE;
2) Display one of the images, that you are going to use, by your WEB-BROWSER;
3) Copy the LOCAL-URL, i.e., file:///.../ImageFileName, in the LOCATION-FIELD of your browser;
4) Paste it to one of the URL fields below;
5) Repeat step 2 to 4 for all local image files you use.
Notice that the OUTPUT-CODES, generated during this LOCAL-TEST, contain, generally, non-existent URLs to the other hosts of the Internet.

1. Frame Width (pixels)
2. Frame Height (pixels)
3. Initial Image (URL)
When omitted, 1st Image is used. Displayed when the web page is opened. If the option-a below is checked, displayed also when the mouse-pointer is moved off.
4. 1st Image(URL)
(Required)
5. 2nd Image(URL)
(Required if no Initial Image is assigned explicitly)
6. 3rd Image(URL)
7. 4th Image(URL)
Options:
a) Mouse-Pointer In/Out Image-Switching
When mouse leaves, the state of the frame is reset and the Initial Image is displayed. When mouse enters, 1st Image.
b) Click-Mode: Stops at the final image Cyclical Pendulum
c) ID Number (number of digits free) (e.g., 01)
When you put two or more Frames in one Web-PAGE (including chained-article-PAGE of blog), each Frame needs unique name, unique controls, and unique state to work independently.
d) 5th or more Images: (Line separated URL-list)


Example 1: Title & 3 clicking-images | 例1 タイトル & 3クリック画像
Initial Image: title pic ("click!") | 初期画像 タイトル画 ("click!")
1st to 3rd Images: click-displayed pics | 第1~3画像 クリック表示画
Option-b: Pendulum | オプション b) 振り子

 

Example 2: Mouse-in/out only | 例2 マウス出入りのみ
Initial Image: side face | 初期画像 横顔
1st Image: front face | 第1画像 顔正面
Option-a: checked | オプション a) チェックオン

 

Example 3: Mouse-in/out & 1 clicking-image | 例3 マウス出入り & 1クリック画像
Initial Image: side face | 初期画像 横顔
1st Image: front face | 第1画像 顔正面
2nd Image: snooking gesture | 第2画像 あかんべ
Option-a: checked | オプション a) チェックオン
Option-b: Stops at the final image | オプション b) 最終画像で停止

| | コメント (0) | トラックバック (0)

その他のカテゴリー

3DCG | Webツール