2012/4/4  1:43

TOP絵_タグ  

今回はTOP絵に少し動きを加えてみました

JavaのFadeInstr_と2枚のレイヤーを利用しています


タグはこんな感じ ↓

<head>

<Style type="text/css">
<!--
#Layer1 {               
position:absolute;      2枚のレイヤーをぴったりと同じ位置に
left:199px;          するためにポジジョン、サイズをcssで
top:16px;           指定しておきます
width:275px;
height:549px;
z-index:2;         ←z-index値が大きほど上位レイヤーになります
visibility: visible;
}
#Layer2 {
position:absolute;
left:199px;
top:16px;
width:275px;
height:549px;
z-index:1;
visibility: visible;
}
-->

<script type="text/javascript">   ←ここからフェードインのタグ
<!--
opa=0; //透明度 0は透明
opacnt=1; //透明度の増減の間隔
timer=100; //setTimeout関数の実行間隔 ミリ秒
// フェードイン
function FadeInstr() {
gazouId = "gazou1";
MyIMG = document.getElementById(gazouId);
MyIMG.style.visibility = "visible";
FadeIn1(gazouId,opa);
}
//透明度を増加していきます。
function FadeIn1(gazouId,opa) {
if (opa <= 100) {
MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
opa += opacnt;
setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
}
}
//-->
</head> 


<body>
<div  id="Layer1">
<img src="着色画.jpg" id= "gazou1" name="gazou1"width="1200" height="900" onload="FadeInstr()" /></div>
上位のレイヤーに着色絵を貼ってFadeInstr()を実行させます

<div  id="Layer2"> 
<img src="線画.jpg" width="1200" height="900" /> </div> 

</body> 

ちなみに"線画.jpg"部分 には
クリックすると元のサイズで表示します
"着色画.jpg" 部分には

クリックすると元のサイズで表示します


の画像を貼り付けてます


注1:上記タグは実行防止のため一部全角に変換しています

注2:赤字の部分は削除してください
0



2012/4/6  10:50

投稿者:mikoto

改装お疲れ様です〜
画面が大きくて少し迷いました^^;

フォトブログ始めたのですね、素敵な写真が一杯♪
今度こちらにもお邪魔しますね〜

ウチのBBSが菖さんQちゃんのバナーに!
パステルなかわいいQちゃんありがとうございます(笑)

トップの桜と女学生素敵です^^!
ウチの絵板にじか描きの素敵なサクライラストも
ありがとうございます^^♪

またコンテンツが増えた感じで楽しみです〜

コメントを書く


名前
メールアドレス
コメント本文(1000文字まで)
URL




teacup.ブログ “AutoPage”
AutoPage最新お知らせ