とんぼマーキーの作成資料
|
準備 |
還暦Ｑｐｏｎホームページからソースをコピーする。 ホームページ作成術→メニューを開く→トンボのマーキー テラパッド(メモ帳）に貼り付け名前を付けて保存→main.html |
|
準備 |
トンボ画像を右クリックして名前を付けて画像を保存する。tnbm.gif |
|
準備 |
ロールオーバーするので画像2枚 01.jpg、02.jpg |
|
準備 |
ホームボタンとBGM 第3回と第9回講座で説明がありました。 home.gif、bgm_button.js、***.mid、 |
|
|
準備したものすべてフォルダの中に入れます。 |
|
|
ここから本文〜の文章を削除して下記を入力する。
<center> <h2>タイトル入力</h2> <br> <br> <br> <img src="01.jpg" onmouseover="this.src='02.jpg'" onMouseout="this.src='01.jpg'" width="600" height="450" border="0"> </center>
|
|
１） |
背景 <body bgcolor="色"> 背景に色を入れる時 <body background="絵のファイル名"> 背景に画像を入れる時
場所body後に色を入力する <body bgcolor="#e7cffe">
|
|
２） |
本文や画像を中心にする <center>本文の最初に入れる
</center>本文の最後に入れる </body>この前に入力
|
|
３） |
タイトル <h数値>タイトル入力</h数値> 見出しにはいろいろな大きさが有ります 大きさは数値（１から６まで）を変えると変わります 上下に1行空白が入ります
（例）<h2>タイトル入力</h2>
|
|
４） |
改行 <br> |
|
５） |
ロールオーバー <img src="最初に表示する画像のURL" onmouseover="this.src='マウスが重なった時に表示する画像のURL'" onmouseout="this.src='マウスが離れた時に表示する画像のURL'">
画像サイズ600×450で名前01.jpgと02.jpgにしたとき
<img src="01.jpg" onmouseover="this.src='02.jpg'" onMouseout="this.src='01.jpg'" width="600" height="450" border="0"> onMousemoveと記載してましたがonmouseoverに訂正しました。 通常はonmouseoverを使用した方が良いとのこと。
|
|
６） |
トンボの動きを変える場所 //動かす固体の設定 "id,imgfile,top,left,width,height,x,y,type） marquee_dt[marquee_n++]="body,tnbm.gif"; marquee_dt[marquee_n++]="body,tnbm.gif,,,80,80,1,,1,"; marquee_dt[marquee_n++]="body,tnbm.gif,,,90,90,,2,2";
画像1枚でこのままＵＰすると綺麗に飛びます。
|
|
７） |
Homeボタンのソースは<body>〜</body>の間に入れます。
<a href="main.html"><img src="img_n089.gif" border="0" width="68" height="30"></a> |
|
８） |
BGMのソースは<body>〜</body>の間に入れます。 １）のソース <script type="text/javascript"> <!-- bgm_file="***.mid"; sw_flg=0;//初期状態（0=演奏 1= 停止） document.write('<script language="javascript" '); document.write('src="bgm_button.js"></script>'); //--> </script>
|
|
|
２）のソース <embed hidden="false" src="green.mid" loop="true" autostart="true" volume="50" width="180" height="25"> |
|
９） |
スライドショーにトンボマーキーのソース挿入は<head>〜</head>と<body>〜</body>2か所 |
|
|
（１）下記ソース挿入は<head>〜</head>の間、<title>〜</title>の下に
<script type="text/javascript"> <!-- marquee_dt=new Array(); marquee_n=0; marquee_url="";//イメージファイルが別の場所にある場合はそのアドレスを「http://」から書く //動かす固体の設定 "id,imgfile,top,left,width,height,x,y,type） marquee_dt[marquee_n++]="body,tnbm.gif"; marquee_dt[marquee_n++]="body,tnbm.gif,,,80,80,1,,1,"; marquee_dt[marquee_n++]="body,tnbm.gif,,,90,90,,2,2"; //id=段落名、「body」または省略は画面全体を動く //top,left=左上の座標（省略時は中央揃え） //width,height=範囲の縦横長さで１００以下は％、１０１異常はピクセル（省略時１００％） //x,y=移動方向（左や上は「-（マイナス）」とスピード（0〜10）（「-」のみまたは省略時乱数を使用します） //typ=0:上下左右折り返し/1:左右一方通行/2：上下一方通行/3：上下左右一方通行（省略時は「0」と見なす） //--> </script> |
|
|
（２）下記ソース挿入は<body>〜</body>の間に
<script type="text/javascript" src="http://qpon.quu.cc/java/marquee/marquee.js"></script> |
|
|
|