検索サーチエンジンと動画リンク集byねっとねこ

動く画像の上でメッセージが流れるマーキータグの使い方と説明

marqueeタグとstyleスタイルシートを使って 動く画像の上にメッセージを流す

ここで使用するスタイルシートは、WINDOWSの IE 6.0 7.0 にて
表示確認をしています。古いバージョンの IE や MAC専用の
ブラウザでの表示確認は しておりませんので、正しく表示され
るか?おかしな表示になるか?は ご自身で確認してください!

動く画像の上でメッセージが流れるタグの説明

1つ前の 「 テーブル内で画像が上下左右に動く 」 の応用編です。
ここでは、新たに 上に流れるメッセージを追加します。
これも、marqueeマーキータグとテーブルタグで出来ています。

ねっとねこサイトが

オープンしました!

http://netneko.jp/

お越し下さい、お待ちしています。


こんな感じになります。 1つ前の サーフィン画像に変えて
おしらせ画像にしています。タグの使用は同じです。
追加したのは、メッセージが上に流れる部分です。下のタグを参考

エリア内で 右クリック→ コピー

</marquee></marquee> までは、説明を省きます。
説明は、1つ前の 「 テーブル内で画像が上下左右に動く 」 を参照

<div の style= スタイルシートの説明です。
width:100%; は、テーブル幅一杯に使うということです。
position:absolute; は、htmlタグの影響を受けない 絶対配置を
示してます。 ブラウザ全体から見た、横と縦の幅を指定します。
ちなみに、他のタグの影響を受ける相対配置の場合の記述は
position:relative と、します。 ここでは、使っていません。

left:140; top:420; は、絶対配置で示す
left 右から、と top 上からの どの位置にするかの数値です。
ここでは、メッセージを表示する配置を決める数値となってます。
絶対配置なので、ブラウザの右から 140 の位置。
ブラウザの上から 420 の位置が、このテーブルの中です。
各自、自分のテーブル内の位置までの数値を入れます。
私は、目算で、50 で 1cm くらいと見てます。
それで、だいたいの数値を入れて表示させてから微調整をします。

メッセージ部分のマーキータグの説明です。
<marquee direction="up" は、上に流れる指定です。
scrollAmount="2" は、流れる早さです。 数値大→ 早くなる
style="height:150" は、スタイルシートで、このマーキーの
縦の幅を指定してます。ここでは、上に流れているので 縦幅を
指定してます。メッセージが出てから、消えるまでの幅です。
この数値は、元のテーブル全体の幅とメッセージの行数などを
考慮して、変更します。 確認しながら、微調整をします。

あとは、メッセージを書いて完了です。 d(⌒O⌒)b

おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング