スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

試作品 スムーズポップアップ画像

マウスオーバーで画像が拡大し前面に表示されます。
マウスアウトあるいはマウスのクリックで画像が縮小され元の順番に表示されます。


<
<
<
<
<


■ ソースです(<>は半角に、IDはご自分で付け替えてください)

<div style="position:relative;font-size:1px;color:white;width:550;height:320;">
<<img width=200 border=1 style="position:absolute;top:10;left:10;z-index:0;" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723600604bd6ac7c40347_import.jpg" onmouseover="d04010.style.zIndex=5;kakudai = setInterval('{w=d04010.width;w+=10;if(w>400){w=400;}d04010.width=w;}',5);" onmouseout="d04010.style.zIndex=0;clearInterval(kakudai);d04010.width=200;" onclick="d04010.style.zIndex=1;clearInterval(kakudai);d04010.width=200;"id="d04010"/>
<<img width=200 border=1 style="position:absolute;top:50;left:35;z-index:1" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723600664bd6ac8241dfa_import.jpg" onmouseover="d04011.style.zIndex=5;kakudai = setInterval('{w=d04011.width;w+=10;if(w>400){w=400;}d04011.width=w;}',5);" onmouseout="d04011.style.zIndex=1;clearInterval(kakudai);d04011.width=200;" onclick="d04011.style.zIndex=1;clearInterval(kakudai);d04011.width=200;"id="d04011"/>
<<img width=200 border=1 style="position:absolute;top:90;left:60;z-index:2" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723600724bd6ac8827035_import.jpg" onmouseover="d04012.style.zIndex=5;kakudai = setInterval('{w=d04012.width;w+=10;if(w>400){w=400;}d04012.width=w;}',5);" onmouseout="d04012.style.zIndex=2;clearInterval(kakudai);d04012.width=200;" onclick="d04012.style.zIndex=1;clearInterval(kakudai);d04012.width=200;"id="d04012"/>
<<img width=200 border=1 style="position:absolute;top:130;left:85;z-index:3" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723600784bd6ac8e25800_import.jpg" onmouseover="d04013.style.zIndex=5;kakudai = setInterval('{w=d04013.width;w+=10;if(w>400){w=400;}d04013.width=w;}',5);" onmouseout="d04013.style.zIndex=3;clearInterval(kakudai);d04013.width=200;" onclick="d04013.style.zIndex=1;clearInterval(kakudai);d04013.width=200;"id="d04013"/>
<<img width=200 border=1 style="position:absolute;top:170;left:110;z-index:4" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723600844bd6ac940b855_import.jpg" onmouseover="d04014.style.zIndex=5;kakudai = setInterval('{w=d04014.width;w+=10;if(w>400){w=400;}d04014.width=w;}',5);" onmouseout="d04014.style.zIndex=4;clearInterval(kakudai);d04014.width=200;" onclick="d04014.style.zIndex=1;clearInterval(kakudai);d04014.width=200;"id="d04014"/>
</div>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。