クリックすると指定したページへ飛ぶ(フラッシュ) | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery


★ クリックすると指定したページへ飛ぶ(フラッシュ)


★ 下記記事で、フラッシュをヘッダーに設置した場合で、
  フラッシュをクリックしたら、リフレッシュ(自分のブログのホーム戻る)する
  ようにしたいという質問の回答です。

記事名:フラッシュをヘッダーに配置させる
http://ameblo.jp/new-blue-777/entry-11161349277.html



 ◆ この記事は、フラッシュ自身にクリックしたときのリンク先が設定できない場合の
   処置の記事です。




● フラッシュ自身(フラッシュ内)にクリックすると指定したページに
  飛ぶ指定をしていない場合に空エリアをフラッシュの上に
  乗せてその空エリアををクリックすると該当ページに飛ぶようにする。


● 説明

① フラッシュの wmode=transparent を指定すれば、IE以外のブラウザは、
  クリックした時に指定されたページに飛ばすことが可能です。

  また、IEブラウザの場合、transparentを指定すると
  フラッシュ内に日本語の文字入力領域を設定しても入力できないようなので
  注意してください。


② この記事は、IEブラウザでもフラッシュ部分をクリックしたら
  指定したページに飛ぶようにする方法です。


③ フラッシュの上に乗せる空エリアの背景色を透明にした場合、
  IEのブラウザの場合は、空エリアがフラッシュの下に行ってしまうので
  色を仮に付けて、IE独自の機能の filter:chroma(color=色コード);
  を使って仮につけた色を透明にします。


④ 各ブラウザ(IE7 IE8 FireFox safari クローム)などで確認していますが、
  私のOSは windows XP なので違うOSのケースは確認できないので注意してください。

  私は、スマホは持っていないのでクロームでUA(ユーザエージェント)を
  一時的に変更して確認しています。

  (表示切替のパソコン版での確認)


● やりかた

① フリープラグインへ下記を追記する。


<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$(".skinHeaderArea").append('<div id="flash01"><EMBED src="フラッシュのURL" loop=true quality=high wmode=transparent bgcolor=transparent WIDTH="1115" HEIGHT="260" NAME="header01" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></div>');})
</script>
<div id="flasho" onclick="location='リンク先のURL'"></div>




◆ 説明

・ 下記はフリープラグインの最初に1つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>


 wmode=transparent ・・・ 透明を指定





② CSSへ下記を追記する。


/* ----------------------------------------------*/
/* フラッシュ の上に空エリアを乗せるCSS    */
/* ----------------------------------------------*/
.skinFrame2{/* 画面お大きさを変えても絶対配置の位置を変えない */
position:relative;
width:980px;/* 幅 */
margin:auto;
}
#flasho{/* フラッシュの上に置く空エリア */
width:976px;/* 幅 */
position:absolute;
top:160px;/* 上からの位置 */
left:0px;/* 左からの位置 */
height:260px;/* 高さ */
display:block;
background-color:#fffffe;/* IE の透明する色(背景色) */
z-index:1;/* 優先順位 */
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* ウェブキットハック Safari Google Chrome */
#flasho{
background-color:transparent;/* 背景色 */
}
}
#flasho,x:-moz-any-link, x:default{/* FireFox CSSハック */
background-color:transparent;/* 背景色 */
}
html* #flasho{/* IE7 CSSハック */
background-color:#fffffe;/* 背景色 */
}
#flasho{/* IEのみ有効 */
filter:chroma(color=#fffffe);/* 透明にしたい色の指定 */
}
#flash01{/* フラッシュ */
disply:block;
outline:none;
position;relative;
z-index:-1;/* 優先順位 */
overflow:hidden;
}
#flasho:hover{/* フラッシュの上に置く空エリアにカーソルを乗せた時 */
cursor:pointer;/* カーソル(ポインター) */
}
/* ----------------------------------------------*/

/* ------------------------------------------------------- */
/* ヘッダー(スキン)の幅・高さを調整           */
/* ------------------------------------------------------- */
.skinHeaderArea{
height:260px;/* 高さ */
width:1115px;/* 幅 */
}