文字の点滅 [HTML&JavaScript]
HTMLはだいたい静的な表現しか出来ないですよね。
なぜ標準になっていないのかと思うタグに、
blinkタグがあります。すなわち文字の点滅ですね。
しかしこれはネットスケープナビゲーター独自のタグで、
他のブラウザでは機能しません(おそらく…)。(←断定しろよ![[むかっ（怒り）]](https://blog.ss-blog.jp/_images_e/152.gif)
![[パンチ]](https://blog.ss-blog.jp/_images_e/153.gif)
)
ネスケがどれくらい使われてるかわかりませんが、
ほとんど使われていないでしょう。
そこで、クロスブラウザで(おそらく)機能する、(←断定しろよ![[爆弾]](https://blog.ss-blog.jp/_images_e/154.gif)
)
文字の点滅を、動的なことを可能にするJavaScriptで書いてみました。
例
変化しないよここが点滅します変化しないんです
どうでしょう、例において動作してるでしょうか?![[exclamation&question]](https://blog.ss-blog.jp/_images_e/159.gif)
見た目は単純ですが、クオリティを上げるのにちょっと苦労しました。![[たらーっ（汗）]](https://blog.ss-blog.jp/_images_e/163.gif)
というよりも、初心者なので、オブジェクトやらメソッドやらが
どういう内容や値をもつのか理解するのに苦労しました。![[あせあせ（飛び散る汗）]](https://blog.ss-blog.jp/_images_e/162.gif)
プロから見れば、たいしたことじゃないということでしょうけれどもね。![[がく～（落胆した顔）]](https://blog.ss-blog.jp/_images_e/142.gif)
ほかのサイトの例などを拝見しましたが、
切り替えるためだけに、わざわざ変数を導入したり、
関数を呼び出す、JavaScriptを機能させるのに、
body内にonloadを別途記述しないといけなかったりで、
だいぶ、スリムになっていると思います。(←断定したよ![[ぴかぴか（新しい）]](https://blog.ss-blog.jp/_images_e/150.gif)
)
ネスケなら
<blink>ここが点滅します</blink>
だけで済むところです。(簡単！![[ひらめき]](https://blog.ss-blog.jp/_images_e/151.gif)
)
ソース
<script type="text/javascript"><!--
onload = function(){flashing();}
function flashing(){
nanikanamae = document.getElementById("kokodesu");
nanikanamae.style.visibility = (nanikanamae.style.visibility == "hidden" || "") ? "visible": "hidden";
setTimeout("flashing()", 500);
}
//--></script>
変化しないよ<span id="kokodesu">ここが点滅します</span>変化しないんです
ご自身のサイトなどで扱う場合は、お分かりだとは思いますが
<script～//--></script>の部分を、<head>～</head>の部分に、
<span id="kokodesu"～</span>などの部分を、
<body>～</body>の部分に記述します。
まあ、ブログのように全部bodyというか、
本文に書いても大丈夫だとは思います。(←断定しろよ![[モバＱ]](https://blog.ss-blog.jp/_images_e/124.gif)
)
onloadでブログなどを読み込んだときにflashing()関数を呼び出します。
これも予約語など以外なら、お好きな名前の関数にしてかまいません。
onloadがないと点滅させる関数が読み込まれませんので、動かないのです。
関数の最初で、"kokodesu"というid属性の内容をnanikanamaeに代入しています。
正確には違いますけれど、まあそんな感じです。(どんなかんじ?)![[ふらふら]](https://blog.ss-blog.jp/_images_e/144.gif)
『何か名前』なので、他の名前でもいいんです。
前にも述べたかもしれませんが、
ひとつのHTMLのなかに同じid名は存在してはいけません。
class属性とname属性は複数同名が在ってもかまいません。
ただし、同名を意図するように扱うならかまいませんが、
動作や変化しては困る場合は、他の名前ををつけましょう。
次の行で"kokodesu"のidのあるbody上のテキストの表示の仕方を与えています。
すなわち、記事内で『ここが点滅します』と書かれてある部分ですね。
要するに、書き換えているのではなく、スタイルで
見た目上、見せるか見せないかを切り替えているわけです。
setTimeoutの前までで文字を消しているか、出しているかのどちらかです。
そして、setTimeoutで再びflashing()を呼び出すんですが、
つぎの500が待ち時間を決めています。
単位が[ms]、ミリ秒なので、ここでは、約0.5秒ごとに点滅させています。
もし、点滅する文字を多数配置する場合は、
ちょっとコツがいりますので今回は取り扱いません。
ご要望がございましたら、よろこんで…
JavaScript以外の部分は、ブログをお書きになっているので、
大丈夫だとは思いますが、インラインタグのspan以外にも、
ブロックタグのdivなどでもいけるかなと思います。(←断定しろよ![[どんっ（衝撃）]](https://blog.ss-blog.jp/_images_e/161.gif)
)
でも、classやnameでは機能しません。
必ず、idで識別するようにしてください。
まえ記事で気づいてもらえなかったようですが、
http://orth.blog.so-net.ne.jp/2009-10-08
絵文字gifがマーキータグで動いてますが(IEだけかなぁ)、
カーソルを近づけると捕まえられるというか、止まり、放すと、
再び、動き出すという小技を入れていたんですが…
けして小枝ではありません。
(しかし、まぁ～そのぉ～、なんですぅなぁ～)
なぜ標準になっていないのかと思うタグに、
blinkタグがあります。すなわち文字の点滅ですね。
しかしこれはネットスケープナビゲーター独自のタグで、
他のブラウザでは機能しません(おそらく…)。(←断定しろよ
)ネスケがどれくらい使われてるかわかりませんが、
ほとんど使われていないでしょう。
そこで、クロスブラウザで(おそらく)機能する、(←断定しろよ
)文字の点滅を、動的なことを可能にするJavaScriptで書いてみました。
例
どうでしょう、例において動作してるでしょうか?
見た目は単純ですが、クオリティを上げるのにちょっと苦労しました。
というよりも、初心者なので、オブジェクトやらメソッドやらが
どういう内容や値をもつのか理解するのに苦労しました。
プロから見れば、たいしたことじゃないということでしょうけれどもね。
ほかのサイトの例などを拝見しましたが、
切り替えるためだけに、わざわざ変数を導入したり、
関数を呼び出す、JavaScriptを機能させるのに、
body内にonloadを別途記述しないといけなかったりで、
だいぶ、スリムになっていると思います。(←断定したよ
)ネスケなら
<blink>ここが点滅します</blink>
だけで済むところです。(簡単！
)ソース
<script type="text/javascript"><!--
onload = function(){flashing();}
function flashing(){
nanikanamae = document.getElementById("kokodesu");
nanikanamae.style.visibility = (nanikanamae.style.visibility == "hidden" || "") ? "visible": "hidden";
setTimeout("flashing()", 500);
}
//--></script>
変化しないよ<span id="kokodesu">ここが点滅します</span>変化しないんです
ご自身のサイトなどで扱う場合は、お分かりだとは思いますが
<script～//--></script>の部分を、<head>～</head>の部分に、
<span id="kokodesu"～</span>などの部分を、
<body>～</body>の部分に記述します。
まあ、ブログのように全部bodyというか、
本文に書いても大丈夫だとは思います。(←断定しろよ
)onloadでブログなどを読み込んだときにflashing()関数を呼び出します。
これも予約語など以外なら、お好きな名前の関数にしてかまいません。
onloadがないと点滅させる関数が読み込まれませんので、動かないのです。
関数の最初で、"kokodesu"というid属性の内容をnanikanamaeに代入しています。
正確には違いますけれど、まあそんな感じです。(どんなかんじ?)
『何か名前』なので、他の名前でもいいんです。
前にも述べたかもしれませんが、
ひとつのHTMLのなかに同じid名は存在してはいけません。
class属性とname属性は複数同名が在ってもかまいません。
ただし、同名を意図するように扱うならかまいませんが、
動作や変化しては困る場合は、他の名前ををつけましょう。
次の行で"kokodesu"のidのあるbody上のテキストの表示の仕方を与えています。
すなわち、記事内で『ここが点滅します』と書かれてある部分ですね。
要するに、書き換えているのではなく、スタイルで
見た目上、見せるか見せないかを切り替えているわけです。
setTimeoutの前までで文字を消しているか、出しているかのどちらかです。
そして、setTimeoutで再びflashing()を呼び出すんですが、
つぎの500が待ち時間を決めています。
単位が[ms]、ミリ秒なので、ここでは、約0.5秒ごとに点滅させています。
もし、点滅する文字を多数配置する場合は、
ちょっとコツがいりますので今回は取り扱いません。
ご要望がございましたら、よろこんで…
JavaScript以外の部分は、ブログをお書きになっているので、
大丈夫だとは思いますが、インラインタグのspan以外にも、
ブロックタグのdivなどでもいけるかなと思います。(←断定しろよ
)でも、classやnameでは機能しません。
必ず、idで識別するようにしてください。
まえ記事で気づいてもらえなかったようですが、
http://orth.blog.so-net.ne.jp/2009-10-08
絵文字gifがマーキータグで動いてますが(IEだけかなぁ)、
カーソルを近づけると捕まえられるというか、止まり、放すと、
再び、動き出すという小技を入れていたんですが…
けして小枝ではありません。
(しかし、まぁ～そのぉ～、なんですぅなぁ～)
2009-10-13 19:11