写真を飾るソース集

原画
イメージソフトで影を加工

写真と＜ＴＡＢＬＥ＞の背景色をプログラムでずらす

<table bgcolor="#666666" cellpadding=0 cellspacing=0><tr>
<td><img src="syasin.jpg" border=1 galleryimg="no" 
style="position:relative;top:-10;left:-10;border-color:#ffffff"></td>
</tr></table>

写真と＜ＴＡＢＬＥ＞の壁紙をプログラムでずらす

<table background="back.gif" cellpadding=0 cellspacing=0><tr>
<td><img src="syasin.jpg" border=1 galleryimg="no" 
style="position:relative;top:-10;left:-10;border-color:#ffffff"></td>
</tr></table>

フィルターで立体影をつける（ＩＥのみ）

<div style="position:relative;top:0;left:0;width=630;height:430;
filter:shadow(color=#444444,direction=135,enabled=1)">
<img src="syasin.jpg" border=1 galleryimg="no" style="border-color:#ffffff">
</div>

フィルターでぼかす（ＩＥのみ）

<div style="position:relative;top:0;left:0;width=630;height:430;
filter:blur(add=1,direction=135,strength=20)">
<img src="syasin.jpg" galleryimg="no">
</div>

フィルターで周囲を発光させる（ＩＥのみ）

<div style="position:relative;top:0;left:0;width=650;height:450;
filter:glow(color=#f09000,strength=20,enabled=1)">
<br><img src="syasin.jpg" galleryimg="no">
</div>

フィルターで隅をぼかす（ＩＥのみ）

<table bgcolor=#bbccaa><tr><td>
<img src="syasin.jpg" galleryimg="no" 
style="filter:alpha(opacity=100,finishOpacity=0,style=2,enabled=1)">
</td></tr></table>

台紙に貼る

<table background="back.gif" cellpadding=20><tr><td>
<table bgcolor="#cccc00" cellpadding=0 border=1><tr><td>
<img src="syasin.jpg" galleryimg="no"></td></tr></table></td></tr></table>

壁にはめこむ

<table background="back.gif" cellpadding=20><tr><td>
<table border=10 cellpadding=0 style="border-style:groove"><tr><td>
<img src="syasin.jpg" galleryimg="no"></td></tr></table></td></tr></table>

壁に埋め込む

<table  bgcolor=#ddddbb cellpadding=20><tr>
<td><img src="syasin.jpg" galleryimg="no" border=6 
style="border-style:inset;border-color:#ffffee;"></td>
</tr></table>

額縁に入れる

<table background="back.gif" cellpadding=20 border=10 
style="border-style:ridge"><tr><td>
<table border=1 cellpadding=0 style="border-style:ridge"><tr><td>
<img src="syasin.jpg" galleryimg="no"></td></tr></table></td></tr></table>

画面全体の背景にグランでーションをかける（ＩＥのみ）

<table width=100% height=100% 
style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,StartColorStr=#ff0000,EndColorStr=#ffeeee);">
<tr><td align=center><img src="syasin.jpg" galleryimg="no"></td></tr></table>

画面全体の背景に写真を固定する

背景：川島さん

<table width=100% height=100% style="background:url(umi.jpg) no-repeat;">
<tr><td align=center><img src="syasin.jpg" galleryimg="no"></td></tr></table>

画面全体を額に入れる

<table width=100% height=100% border=1 background="gaku.gif" cellpadding=20><tr><td >
<table width=100% height=100% border=1><tr><td align=center bgcolor="#ccddee">
<img src="syasin.jpg" galleryimg="no"></td></tr></table></td></tr></table>

写真はＨｅｒｏさんの撮影です

画面全体に写真を引き伸ばす（縦長の場合は左右に余白）

<script type="text/javascript">
function wh(){
img_w=document.images["myimg"].width;img_h=document.images["myimg"].height;
if(img_w>img_h){document.images["myimg"].width=screen.width;}else{document.images["myimg"].height=screen.height;}
}
</script>
<table width=100% height=100%><tr><td align=center>
<img src="syasin.jpg" galleryimg="no" onLoad="wh()"></td></tr></table>

写真はＨｅｒｏさんの撮影