画像にテキストを重ねる | Web Technique Last modified : 2007/09/22 |
<DIV style="position:relative; top:0px; left:0px;"> <!-- 通常の配置方法から相対的に位置をずらして表示 --> <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="140" height="100"> <PARAM name="movie" value="./imageOverlap.swf" /> <PARAM name="base" value="." /> <PARAM name="quality" value="high" /> <PARAM name="wmode" value="opaque" /> </OBJECT> <DIV style="position:absolute; top:55px; left:25px; display:block; background:none; color:#000;"> Cool !<BR>BeatMania </DIV> </DIV> |
<DIV style="position:relative; top:0px; left:0px;"> <!-- 通常の配置方法から相対的に位置をずらして表示 --> <IMG src="./imageOverlap.jpg" width="800" height="72" alt="banner"><BR> <!-- Title --> <DIV style="position:absolute; top:2px; left:15px;"> <!-- 親要素を基準として絶対的に位置を指定 --> <SPAN style="width:300; font-size:22pt; font-family:Verdana; font-style:italic; font-weight:bold; letter-spacing:0.1em; /* 文字間隔 0.1文字分 */ color:#ffffff; filter:dropshadow(color=gray,offX=2,offY=1);"> Sample</SPAN> </DIV> <!-- Google --> <DIV style="position:absolute; top:7px; left:555px;"> <FORM method="GET" action="http://www.google.co.jp/search"> <INPUT type="text" name="q" size=31 maxlength=255 value=""> <INPUT type="submit" name="btnG" value="Google"> <INPUT type="hidden" name="hl" value="ja"> <INPUT type="hidden" name="ie" value="Shift_JIS"> <INPUT type="hidden" name="oe" value="Shift_JIS"> </FORM> </DIV> <!-- Copyright --> <DIV style="position:absolute; top:52px; left:600px;"> <SPAN style="width:300; font-size:10pt; font-family:Verdana; color:#DDDDDD;">Copyright© HISOAP ED-Lab.</SPAN> </DIV> </DIV> |