数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ

ねごとめも背景

# ねごとめも

# カウンター

# プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。
fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。
プログラム実行の前に必ずコードの確認をお願いします。

# 最新記事

# カレンダー

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

# スポンサードリンク

テキスト内指定文字列 CSS クラス名一括指定ツール作成しました。

ウィンドウがリサイズされた場合、
画像幅を親要素の幅に合わせて表示させる 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 ) に空の値を指定する。
すると、画像の幅と高さが初期化される。
その後の処理は親要素の表示域と初期化された画像の幅を比較して、
画像の幅が親要素の表示域より大きい場合、
画像を縮小表示する。

前回作成した 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 タグを使って表示しています。


# QRコード

QR

I use Vivaldi.

Download Vivaldi Web Browser Today!

# スポンサードリンク