勉強したことのメモ

webプログラマが勉強したことのメモ。

Flash上にHTMLの文字やリンクを重ねる方法

   

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSかなにかで重ねられないかと探したところ、良い方法があったのでメモ。

 


 

 

■ソース

<html>
<head>
<title>FlashにHTMLリンクを重ねるテスト</title>
<style>

.flash{
	position: relative;
}
.layer{
	top: 0px;
	left: 50px;
	position: absolute;
}

</style>
</head>
<body>
	<h1>FlashにHTMLリンクを重ねるテスト</h1>

	<div class="flash">

		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="200" height="100">
		<param name="movie" value="test.swf" />
		<param name="wmode" value="transparent" />
		<param name="base" value="." />
		<param name="quality" value="high" />
		<param name="wmode" value="opaque" />
		<embed src="test.swf" base="." wmode="opaque" quality="high" wmode="transparent" 
		pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
		type="application/x-shockwave-flash" width="200" height="100"></embed>
		</object>

		<div class="layer">
			テストテスト。<br />
			HTML記述。<br />
			<a href="https://taitan916.info/blog/">link</a>
		</div>

	</div>
</body>
</html>

 


 

 

■サンプル

http://sample.taitan916.info/flashLayer/

 


 

 

■その他

paramタグとembedタグのwmodeをtransparentにするのが必要みたい。

ただこれをやっちゃうとIEでは日本語の文字入力領域で日本語が入力できない模様。

http://helpx.adobe.com/jp/flash/kb/228635.html

 

テストしたところ、

  • IE9,Chrome38.0.2125.111→問題なし
  • firefox33.1→日本語入力は出来るが、入力時のカーソル位置が変

となった。うーん、使えないかも。

 - CSS, Flash

  関連記事

CSSのdisplayについて

よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...

ページ内リンク(アンカーリンク)がずれる場合の対処法

ヘッダーに固定メニューを設置しており、コンテンツ部分でアンカーリンクを使うと固定 ...

固定ヘッダーメニュー

やりたかった事は、 ・6つぐらい異なるドメインのページがある ・似たような用途な ...

Bootstrapを使用したデザインテンプレート

Bootstrapを使用してもデザインのセンス無いし、 と思っていいものはないか ...

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

CSSのopacity

opacityというプロパティを業務中に見かけたのでメモ。 透明度を指定するもの ...

レスポンシブ対応で右カラムのコンテンツを上に表示させたい

レスポンシブ対応サイトの簡易なコーディングをする経験があった。何も考えずにHTM ...

CSSで一つの要素に対して複数の背景色を指定する方法

divの要素に対して複数の背景色をつけたかった。background-color ...

firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

CSSでセンターリング

<center></center>でセンターリングが出来 ...