HOME  >>>  HTML整理ノート  >>> DHTML --  基本編  応用編

マーキーに背景画像を設定

■2つのマーキーをぴったり重ねました。下のマーキーには背景画像を設定し、スクロール方向はデフォルトの左から右へ。上のマーキーには背景画像を設定せず(デフォルトの透過になり、下のマーキーが見える)、スクロール方向は右から左へ。

 

  DynamicHTML-Marquee1

 

■3つのマーキーを重ねた。一番下のマーキーには背景画像を配置。2番目のマーキーには背景画像にGIFアニメ画像をrepeat-xで配置。3番目マーキーは文字だけ。3つのマーキーはそれぞれスクロール方法を変えている。またposition:absoluteのtop位置を調整しています。

    DynamicHTML-Marquee2

 

 

 

 

Sample Source......................................................................>>>

<marquee style="position:absolute;top:100;left:50;width:90%;height:30;
background-image:url('../../soft/imgcpb1/backj07.jpg');"
scrolldelay=300>&nbsp;</marquee>
<marquee style="position:absolute;top:100;left:50;width:90%;height:30;
font:30;" direction="right">DynamicHTML-Marquee1</marquee>
<marquee style="position:absolute;top:200;left:50;width:90%;height:70;
background-color:green;background-image:url('../../etc/ani/ani13.gif');
background-repeat:repeat-x;" scrolldelay=100 direction="right">
&nbsp;</marquee>
<marquee style="position:absolute;top:250;left:50;width:90%;height:30;
background-image:url('../../images/anime/anistar.gif');
background-repeat:repeat-x;" scrolldelay=200>&nbsp;</marquee>
<marquee style="position:absolute;top:220;left:50;width:90%;height:30;
font:30;" behavior="alternate">DynamicHTML-Marquee2</marquee>

end(最終更新:12/11/6)