ねごとめも背景

    ねごとめも



    作成したプログラムは、こちらでも公開しています。
    よかったら覗いてみてください。_(┐「ε:)_
    → javascript,SVG で作成したプログラム置き場
    → プログラム一覧 - (2)

    ウィンドウの幅に合わせて画像を表示する(リサイズ) javascript

    ウィンドウがリサイズされた場合、
    画像幅を親要素の幅に合わせて表示させる javascript

    例えば、画像の 幅:500 高さ:250 の場合
    ウィンドウの表示域( img タグの親要素)の幅が 500px 以下になると
    表示域(親要素)のサイズに合わせて画像が縮小される。

    プログラムの流れ
    ページ読み込み時とページリサイズ時
    1) img タグの親要素の表示域の幅を調べる。
    2) img タグの幅を初期値に。
    3) 親要素の表示域より画像が大きい場合画像を縮小する。

    テスト

    画像サイズ 500 x 250

    テスト画像1

    画像サイズ 400 x 250

    テスト画像2

    画像を親要素にフィットさせる(テスト1)
    
    <!DOCTYPE html>
    <html lang="ja">
    	<head>
    	<meta charset="utf-8">
    		<title>画像を親要素にフィットさせる</title>
    		<style>
    			.content{
    				width:50%;
    				height:auto;
    				overflow:auto;
    				padding:10px;
    				margin:0px auto;
    				background-color:#eee;
    			}
    			.content > img{
    				border:double 3px #000;
    			}
    		</style>
    		<script>
    		function addEvent(tar,evt,fnc){ if(document.addEventListener){ tar.addEventListener(evt,fnc,false); }else if(document.attachEvent){ tar.attachEvent("on"+evt,fnc); }else{;} }
    		function $(id){ return document.getElementById(id); }
    		var resizeImage=function()
    		{
    			var img_box=document.getElementsByClassName("content");
    			var v_wid=img_box[0].offsetWidth-26;/* 20 は左右の padding, img の border 値を足したもの */
    			for(i=0;i<img_box.length;i++)
    			{
    				var img=img_box[i].getElementsByTagName("img");
    				for(j=0;j<img.length;j++)
    				{
    					img[j].style.width="";
    					img[j].style.height="";
    					if(parseInt(img[j].width)>v_wid)
    					{
    						img[j].style.width=90+"%";
    						img[j].style.height="auto";
    					}
    				}
    			}
    		}
    		addEvent(window,"resize",resizeImage);
    		addEvent(window,"load",resizeImage);
    		</script>
    	</head>
    	<body>
    	<div class="content">
    		<h3>画像サイズ 500 x 250</h3>
    		<img src="20150417a.png" width="500" height="250" alt="">
    		<br>
    		<h3>画像サイズ 400 x 250</h3>
    		<img src="20150417b.png" width="400" height="250" alt="">
    	
    	</div>
    </html>
    

    *) ポイント
    ページ(親要素)がリサイズされた時、
    イメージ(画像)の幅と高さのスタイル ( css ) に空の値を指定する。
    すると、画像の幅と高さが初期化される。
    その後の処理は親要素の表示域と初期化された画像の幅を比較して、
    画像の幅が親要素の表示域より大きい場合、
    画像を縮小表示する。

    2015/04/16 [22:53]

    javascript 側から flash(actionscript) 関数を呼び出す(制御)

    前回作成した HTML に表示されているソースコードを
    flash の "クリップボードへのコピー機能" を利用して格納するプログラムを修正。

    前回作成したプログラムの流れ。
    flash 出力
    1) javascript で flash 出力。
    2) flash 出力時、 flashvars にソースコードを格納。

    イベント発生時
    1) flash 上でイベント発生。
    2) flashvars に格納されているソースコードをクリップボードへコピーする。
    3) flash 側から javascrpt の関数を呼び出し"クリップボードへコピー完了"を通知する。

    今回作成したプログラムの流れ。
    flash 出力
    1) javascript で flash 出力。

    イベント発生時
    1) flash 上でイベント発生。
    2) flash 側から javascript の関数を呼び出しソースコードを格納する。
    3) javascript で 格納したソースコードを flash 側へ渡す。( falsh 関数の呼び出し。)
    4) 受け取ったソースコードをクリップボードへコピーする。
    5) flash 側から javascrpt の関数を呼び出し"クリップボードへコピー完了"を通知する。

    前回のプログラムと今回のプログラムの違いは
    javascript 側から flash 側の関数を呼び出しているとこ。

    javascript 側から flash 側の関数を呼び出すには、
    制限があり、 初期値を設定している場合、
    ファイルがサーバー上にあり、HTML 文書と Flash が、
    同じドメイン下に格納されていなければ動作しないらしい。

    Flash と JavaScript の連携についてはこちらのサイトを参考にさせて頂きました。→  Flashゲームプログラミング講座 for ActionScript3.0

    FC2 ブロクでは HTML 文書とその他のファイルを格納しているドメインが違うので、
    今回作成したプログラムは動作させることが出来なかった。

    なので、ファイルを同じドメイン上に配置したサイトを iframe タグを使って表示しています。


    2015/04/14 [20:36]

    カウンター

    プロフィール

    negotoy

    Author:negotoy
    好きな選手権 :chara選手権
    好きなコーナー :リスナーが凸して
    椎名林檎の丸の内を歌うコーナー

    PC ゲーム歴 :
    モバゲーのタイピングゲームで
    タイピングの練習(サービス終了)
    ニックネーム : クッキー
    以降ゲーム歴なし

    [ YouTube ]

    chara : あいのうた
    椎名林檎 : ありあまる富
    かせきさいだぁ : じゃっ 夏なんで
    阿部真央 : 貴方の恋人になりたいのです

    最新記事

    カテゴリ

    カレンダー

    03 | 2015/04 | 05
    - - - 1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 - -


    PAGE TOP
    広告: