その他１０ ■面白■　１時間ごとに画像変化・連番

　■画像位置指定が好みの位置に簡単にできるように修正しました。■

さて、重要な点が二つあります。
第一は原本でも説明されている、画像指定の方法です。
原本通りの画像指定の場合、上記の見本ソース通り var ga="image"+h+".jpg"; です。

しかし画像の名前が、mini0.png から mini23.png の２４枚だったら → var ga="mini"+h+".png";
それが image というフォルダーに入っていたら → var ga="image/mini"+h+".png";
そのフォルダーが、この html よりも一つ上の階層にあったら → var ga="../image/mini"+h+".png";

画像の名前が img0mini.gif から img23mini.gif の２４枚だったら → var ga="img"+h+"mini.gif";
画像の名前が 0.jpg から 23.jpg の２４枚だったら → var ga=""+h+".jpg";　又は、var ga=h+".jpg";

上記見本を見ればわかる通り、２４枚の画像ファイル名は 0 から 23 までの数字以外が、全部同じです。
そして同じでさえあれば、どんなふうにでも指定可能です。

第二の重要点は、原本には無い Ga の指定です。
この指定をすることで、CSSでいろいろな装飾ができます。そして絶対位置指定も可能です(topから●pxで leftから●pxという指定方法)。
でもそんな指定方法ではなく、いろいろな文章を書いた、その直下に表示したいという時。
＜img src="" id="Ga"＞をその表示したい位置に記述して下さい。それを記述した位置が、画像表示位置になります。

前回では、「表示したい位置にJavaScriptのソースを全部書く」と説明しましたが、今回修正しました。この方がわかりやすいと思います。
そのかわり、絶対位置だろうと好みの位置指定だろうと、必ずbodyの中に
＜img src="" id="Ga"＞の記述が必要です。
img src="" の "" には、画像名は記述しないでよいです。
（上記をコピペされる時は、＜　と　＞　は半角文字に変更して下さい。）

最後にオマケで記述した　Ga.title=""+h+"時過ぎだよ！";　の説明。
title=""を指定すると、画像にマウスオーバーした時に、説明文字が出ます。
この場合　"+h+"　指定をしているので、その時の時刻がでます。
「時過ぎだよ！」の部分は、何時でも出る共通分なので、自分の好みで変更できます。
「時になったよ♪」でも「時になりました」でもいいし、不要なら　Ga.title=""+h+"時過ぎだよ！";　の部分を全部削除して下さい。

でも、ほんとうに１時間ごとに画像が変わってるのかなぁと不安な方。
いちいちこのJavaScriptのページを探すのもたいへんでしょうから、メニューの『その他』のボタンをクリック。
そのページのタイトル画像の左横に同じ画像を表示しているので、時間ごとにチェックしてみて下さい。
このJavaScriptを基本にした、応用編の説明ページはこちらです。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>その他１０ ■面白■　１時間ごとに画像変化・連番</title>


<!--★ここからコピー-->
<style type="text/css">
<!--
/*★#Gaは必須*/
#Ga{
position:absolute; /*★以下３行は絶対位置指定。位置指定は不要なら削除*/
top:120px;
left:150px;
background:#aaa;/*★画像が透過GIFなので背景色指定　灰色*/
padding:20px;/*★画像の余白20px指定*/
border: 2px #000 solid;/*★枠線指定　黒色*/
border-radius:10px;/*★角丸指定*/
cursor: pointer;/*★画像にマウスオンした時、マウスカーソルを『手』に変更*/
}
-->
</style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>

<body bgcolor="#F4EDE6">

<!--★下記１行コピー。画像指定。下にもコピーがあります-->
<img src="" id="Ga">


<div style="margin-left:300px;padding:50px;">
<p>時々、「おお、こんな短いソースで動くのか！」と、感動するJavaScriptに出会うことがあります。<br>
これもそうです。なんと、１時間ごとに２４枚の画像が変わります。なのに、このソースの単純さ！<br>
<br>
画像指定の方法は、連番指定という方法です。画像ファイル名の付け方にコツがあります。<br>
以下、原本の注意書き↓</p>
<hr style="background-color:red; color:red; height:1px;">
<p>一時間おきに表示する画像を変えます。<br>
使用するに先立って、ファイル名を image0.jpg、image1.jpg、image2.jpg ・・・ image23.jpgまでの２４個を用意する必要があります。<br>
ファイル名のつけ方は、必ず上述のようにする必要があります。別に使用する画像はjpgでもgifでもかまいません。gifを使用する場合は、スクリプトを適当に編集してください。(★当サイトではgifを使用)</p>
<hr style="background-color:red; color:red; height:1px;">
</div>


<div style="padding:30px;">
<p>さて、重要な点が二つあります。<br>
第一は原本でも説明されている、画像指定の方法です。<br>
原本通りの画像指定の場合、上記の見本ソース通り <span style="color:red;">var ga="image"+h+".jpg"; </span> です。<br>
<br>
しかし画像の名前が、mini0.png から mini23.png の２４枚だったら → <span style="color:red;">var ga="mini"+h+".png";</span><br>
それが image というフォルダーに入っていたら → <span style="color:red;">var ga="image/mini"+h+".png";</span><br>
そのフォルダーが、この html よりも一つ上の階層にあったら → <span style="color:red;">var ga="../image/mini"+h+".png";</span><br>
<br>
画像の名前が img0mini.gif から img23mini.gif の２４枚だったら → <span style="color:red;">var ga="img"+h+"mini.gif";</span><br>
画像の名前が 0.jpg から 23.jpg の２４枚だったら → <span style="color:red;">var ga=""+h+".jpg";</span>　又は、<span style="color:red;">var ga=h+".jpg";</span><br>
<br>
上記見本を見ればわかる通り、２４枚の画像ファイル名は 0 から 23 までの数字以外が、全部同じです。<br>
そして同じでさえあれば、どんなふうにでも指定可能です。</p>
<hr>
<p>第二の重要点は、原本には無い <span style="color:red;">Ga</span> の指定です。<br>
この指定をすることで、CSSでいろいろな装飾ができます。そして絶対位置指定も可能です(topから●pxで leftから●pxという指定方法)。<br>
でもそんな指定方法ではなく、いろいろな文章を書いた、その直下に表示したいという時。<br>
<span style="color:red;">＜img src="" id="Ga"＞</span>をその表示したい位置に記述して下さい。それを記述した位置が、画像表示位置になります。<br>
<br>
前回では、「表示したい位置にJavaScriptのソースを全部書く」と説明しましたが、今回修正しました。この方がわかりやすいと思います。<br>
そのかわり、絶対位置だろうと好みの位置指定だろうと、必ずbodyの中に<br>
<span style="color:red;">＜img src="" id="Ga"＞</span>の記述が必要です。<br>
<span style="color:red;"> img src="" </span>の "" には、画像名は記述しないでよいです。<br>
（上記をコピペされる時は、＜　と　＞　は半角文字に変更して下さい。）
</p>
<hr>
<p>
最後にオマケで記述した　<span style="color:red;">Ga.title=""+h+"時過ぎだよ！";</span>　の説明。<br>
title=""を指定すると、画像にマウスオーバーした時に、説明文字が出ます。<br>
この場合　"+h+"　指定をしているので、その時の時刻がでます。<br>
「時過ぎだよ！」の部分は、何時でも出る共通分なので、自分の好みで変更できます。<br>
「時になったよ♪」でも「時になりました」でもいいし、不要なら　<span style="color:red;">Ga.title=""+h+"時過ぎだよ！";</span>　の部分を全部削除して下さい。</p>
<hr style="background-color:red; color:red; height:1px;">
<p>でも、ほんとうに１時間ごとに画像が変わってるのかなぁと不安な方。<br>
いちいちこのJavaScriptのページを探すのもたいへんでしょうから、メニューの<a href="../../hoka_setumei.html">『その他』</a>のボタンをクリック。<br>
そのページのタイトル画像の左横に同じ画像を表示しているので、時間ごとにチェックしてみて下さい。<br>
このJavaScriptを基本にした、応用編の説明ページは<a href="../hoka_o11.html">こちら</a>です。
</p>
</div>


<!--★ここからコピー　位置は<body>の中です-->
<script type="text/javascript">
<!--
/*=============================================================
参考・１時間ごとに画像が変化　By　http://freett.com/nihonkyokujituto/download/javasc/js_top.htm
=============================================================*/
var h= (new Date()).getHours();
var ga=""+h+".gif"; 
Ga.src = ga;
Ga.title=""+h+"時過ぎだよ！";
// -->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

その他１０ ■面白■ １時間ごとに画像変化・連番 最終修正日 : 2015/01/15

その他１０ ■面白■　１時間ごとに画像変化・連番　　　　最終修正日 : 2015/01/15