とんぼマーキーの作成資料 　　　　　　　　８）から改訂　2022-077-24　三宅 節雄　

準備
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>を<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">

８）
http://qpon.quu.cc/java/marquee/marquee.jsのダウンロード

<script type="text/javascript" src="http://qpon.quu.cc/java/marquee/marquee.js"></script>の行から
http://qpon.quu.cc/java/marquee/marquee.js　だけをコピーし

ブラウザーのアドレス欄に貼り付けてEnterキーを押す

marquee.jsの中身が表示されるので、右クリックで名前を付けて保存するをクリック

tombowのフォルダーを選択し、名前はmarquee.jsと表示されているので、そのまま保存する

HTMLソースの
<script type="text/javascript" src="http://qpon.quu.cc/java/marquee/marquee.js"></script>
は先ほどのアドレスのフォルダーまでを取り
<script type="text/javascript" src="marquee.js"></script>
に変更する

９）

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

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

１０）

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

１）『コントローラ付き、初期設定: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>

 １１）

HOMEボタンとBGMの設定を下図の場所に設定する場合
 
挿入前のbody部のソース

<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 background="blue7.jpg">
<script type="text/javascript" src="marquee.js"></script>
<center>
<h2><font color="#0000ff">那須の中の茶屋跡から上にリンドウが群生していました</font></h2>
<font color="#0000ff">写真にマウスを乗せると日の出平付近のトリカブトに写真が変わります</font><br>
<img src="01.jpg" onMouseover="this.src='02.jpg'" onMouseout="this.src='01.jpg'" width="600" height="450" border="0">
</center>
</body>
</html>
 
ロールオーバーの行の前で改行

9)の
<audio ・・・・
を記載し、全角でスペースを10個程挿入して改行

８）の
<a href="main.html"><img src="****.jpg" border="0" width="68" height="30"></a>
を記載し、後ろに
<br>
を追記する
 
<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 background="blue7.jpg">
<script type="text/javascript" src="marquee.js"></script>
<center>
<h2><font color="#0000ff"><b>那須の中の茶屋跡から上にリンドウが群生していました</b></font></h2>
<font color="#0000ff">写真にマウスを乗せると日の出平付近のトリカブトに写真が変わります。</font><br>
<audio id="audio" loop><source src="n_omoid.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>　　　　　　　　　　
<a href="../index.html" target="_top"><img src="Home.jpg" width="92" height="23" border="0"></a><br>
<img src="01.jpg" onmouseover="this.src='02.jpg'" onmouseout="this.src='01.jpg'" />
</center>
</body>
</html>

赤で示した部分がBGMとHOMEへのリンクを挿入した内容

 １２）
これで完成です