とんぼマーキーの作成資料

準備
My-HPに『tombow』フォルダーを作り、以下で準備するものは全て『tombow』フォルダーに入れて下さい。

還暦Qponホームページからソースをコピーする

ホームページ作成術 → メニューを開く → (169)トンボのマーキーから

『ソースの必要な方はここをクリックしてお越しください』をクリックしてソースを表示させて、ソースをコピーし

サクラエディター(メモ帳でも可）に貼り付け、文字コードをSJIS(メモ帳ではANSI)形式で名前を付けて保存→main.html
下記がダウンロードしたHTMLソースですが2か所ほど間違っています

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9;">

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<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>
</head>
<body>
<script type="text/javascript" src="http://qpon-toyota.com/java/marquee/marquee.js"></script>
〜ここから本文〜
</body>
<html>

異常は以上　最後の行の<html>は</html>　に修正します

準備

Qponさんのとんぼマーキーのページのトンボ画像を右クリックして名前を付けて画像を保存する。tnbm.gif

準備

ロールオーバーするので画像(600×450px)2枚　　01.jpg、02.jpg を保存

準備

ホームボタンとBGMの音源を準備する

home.jpg、***.mp3 も保存

 

『〜ここから本文〜』の文章を削除して下記を入力する。内容はタイトルの表示と写真のロールオーバーです

<center>
<h2>タイトル入力</h2>
補助文章<br>
<img src="01.jpg" onMouseover="this.src='02.jpg'" onMouseout="this.src='01.jpg'" width="600" height="450" border="0">
</center>
ここでHTMLソースを見ると下記の様になります

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9;">

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<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>
</head>
<body>
<script type="text/javascript" src="http://qpon.quu.cc/java/marquee/marquee.js"></script>
<center>
<h2>タイトル入力</h2>
補助文章<br>
<img src="01.jpg" onMouseover="this.src='02.jpg'" onMouseout="this.src='01.jpg'" width="600" height="450" border="0">
</center>
</body>
</html>
１） ロールオバー画像へのトンボマーキーのソース挿入は<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>

２）

トンボの動きを変える場所

//動かす動画の設定　　　"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」と見なす）
 

上記の様にトンボの動きについて説明が有りますが、このままで綺麗に飛びます

３）

背景に色を付加したり画像を表示する

<body>を<body bgcolor="色">　背景に色を入れる時

<body background="絵のファイル名">  背景に画像を入れる時

 

場所body後に色を入力する

<body bgcolor="#e7cffe">

 

４）

本文や画像を中心にする

<center>本文の最初に入れる

 

</center>本文の最後に入れる

</body>この前に入力

 

５）

タイトルを表示

<h数値>タイトル入力</h数値>　　

見出しにはいろいろな大きさが有ります

大きさは数値（1から6まで）を変えると変わります 数値が大きくなると文字サイズは小さくなります

上下に1行空白が入ります

 

（例）<h2>那須の中の茶屋跡から上にリンドウが群生していました</h2>

　　　文字を青色にする場合には、下記の様に文字列を<font color="#0000ff">と</font>で挟みます

　　　<h2><font color="#0000ff">那須の中の茶屋跡から上にリンドウが群生していました</font></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">

 

８）

Homeボタンのソースは<body>〜</body>の間に入れます。

<a href="main.html"><img src="****.jpg" border="0" width="68" height="30"></a>

９）

BGMのソースは<body>〜</body>の間で、上記までの<br>も考えの基準として考慮して、入れる場所を決めます。

１）『コントローラ付き、初期設定:off』の場合

<audio controls loop><source src="hanyu.mp3" type="audio/mp3"></audio>

 

２）『曲名表示、演奏･停止ボタン表示、初期設定:off』の場合

<audio id="audio" loop><source src="hanyu.mp3"></audio><font face="$ＪＳ明朝" size="+2">♪</font><font face="$ＪＳ明朝">埴生の宿<input type="button" value="演奏" onclick="audio_play()">

<input type="button" value="停止" onclick="audio_pause()"></font>

<script type="text/javascript">

function audio_play() {audio.play();}

function audio_pause() {audio.pause();}

</script>