GIFアイコンをいじる [HTML&JavaScript]
まえまえ記事で、
中段ぐらいにおきまして、
顔のGIFアイコンが横に伸び縮みしております。
ゆか さんからリクエストがございましたので、
ちょっとご説明させて頂きたいと思います。
基本的には
まえまえまえまえまえまえまえまえまえまえまえまえまえまえ
記事の応用なんです。
って、いつの記事かわかりませんが、
「文字の点滅」という記事ですね。
シンプルエディタしか試していませんが、
ソネさんブログはGIFアイコンを記事に挿入後、
GIFのwidthやheightをいじっても、
id属性などを挿入しようとしても、
保存の時点で、一言一句、元のタグに上書き戻されるようで、
思い通りのGIFアイコンの大きさなどには指定できないようですね。
そこで、以前ちょっと触れましたが、
DOMという構造概念を使いまして、
いわゆる、ダイナミックHTMLというものを実現しようとしているわけです。
って、何のことだかさっぱり分かりませんが、
動きを与えたり、打てば響くようなブログなどを
実現できるということですね。
ほかのスクリプトの誤動作を避けるため、
毎回、関数名や変数名を考えるんですが、
だんだん思い浮かびにくくなってきました~
そ~んでっ、GIFのheightもいじれるかなぁっと
思ったんですが、なんだかうまくいきませんでした。
それにline-heightだのheightだの
メンドウになってきてwidthしかいじってません。
っていうか、とどのつまりぃーは悪いことに使うなぁ
え~、逆もとのもくあみ状態になったわけです。(なんかちがうなぁ)
基本的な要素としては、次の3つでしょうか。
もちろん数字とアンダースコア[_]を除いて記号から始まらなければ、
あと予約語以外ですね、どんな名前でもいいんですが、
gificoncountで伸ばすか戻すかのスイッチの記憶、
そして、DOMのgetElementById("~")です。
document.getElementById("~").firstChild.widthで
入れ子構造の最初の要素すなわちimgタグのwidthをいじるという形です。
今回、spanタグでimgタグを挟んで入れ子構造になってますね。
あとはおなじみ? setTimeoutで時間待ちです。
今回はいつもより早めに且つ長めに回しております~
でなくて伸び縮みさせております~
今回、imgタグのwidthを変化させているということは、
写真等の画像もビヨンビヨンさせることが出来ますよね。
(ってそんな機会あるかなぁ)
ソース
<span id="gificonwaraikao"><img src="https://blog.so-net.ne.jp/_images_e/140.gif" width="15" height="15" alt="[わーい(嬉しい顔)]" border="0" class="sonet-icon" /></span>
<script type="text/javascript"><!-- //↑<img />が変化させたいGIF
var gificoncount=0;
//↑伸び縮みのスイッチ
function gificonflashing(){ //関数の始めです
var gificontmp=document.getElementById("gificonwaraikao");
//↑DOM、長いので変数に記憶させておく
if(gificoncount==0){ //スイッチが0ならノーマルサイズ
gificontmp.firstChild.width="15"; //firstChild、入れ子の最初のタグ <img />のwidth
gificoncount=1; //スイッチを1に
}
else{ //スイッチが0以外なら
gificontmp.firstChild.width="460"; //伸ばします!
gificoncount=0; //スイッチを0に戻す
}
setTimeout("gificonflashing()", 300); //0.300秒待って、関数の呼び出し 繰り返し
//↑関数の内部から自身の関数を呼び出している
} //関数の終わりです
//--></script>
<script type="text/javascript"><!--
gificonflashing(); //最初に関数を呼び出す ここがないと何も起きない
//--></script>
中段ぐらいにおきまして、
顔のGIFアイコンが横に伸び縮みしております。
ゆか さんからリクエストがございましたので、
ちょっとご説明させて頂きたいと思います。
基本的には
まえまえまえまえまえまえまえまえまえまえまえまえまえまえ
記事の応用なんです。
って、いつの記事かわかりませんが、
「文字の点滅」という記事ですね。
シンプルエディタしか試していませんが、
ソネさんブログはGIFアイコンを記事に挿入後、
GIFのwidthやheightをいじっても、
id属性などを挿入しようとしても、
保存の時点で、一言一句、元のタグに上書き戻されるようで、
思い通りのGIFアイコンの大きさなどには指定できないようですね。
そこで、以前ちょっと触れましたが、
DOMという構造概念を使いまして、
いわゆる、ダイナミックHTMLというものを実現しようとしているわけです。
って、何のことだかさっぱり分かりませんが、
動きを与えたり、打てば響くようなブログなどを
実現できるということですね。
ほかのスクリプトの誤動作を避けるため、
毎回、関数名や変数名を考えるんですが、
だんだん思い浮かびにくくなってきました~
そ~んでっ、GIFのheightもいじれるかなぁっと
思ったんですが、なんだかうまくいきませんでした。
それにline-heightだのheightだの
メンドウになってきてwidthしかいじってません。
っていうか、とどのつまりぃーは悪いことに使うなぁ
え~、逆もとのもくあみ状態になったわけです。(なんかちがうなぁ)
基本的な要素としては、次の3つでしょうか。
もちろん数字とアンダースコア[_]を除いて記号から始まらなければ、
あと予約語以外ですね、どんな名前でもいいんですが、
gificoncountで伸ばすか戻すかのスイッチの記憶、
そして、DOMのgetElementById("~")です。
document.getElementById("~").firstChild.widthで
入れ子構造の最初の要素すなわちimgタグのwidthをいじるという形です。
今回、spanタグでimgタグを挟んで入れ子構造になってますね。
あとはおなじみ? setTimeoutで時間待ちです。
今回はいつもより早めに且つ長めに回しております~
でなくて伸び縮みさせております~
今回、imgタグのwidthを変化させているということは、
写真等の画像もビヨンビヨンさせることが出来ますよね。
(ってそんな機会あるかなぁ)
ソース
<span id="gificonwaraikao"><img src="https://blog.so-net.ne.jp/_images_e/140.gif" width="15" height="15" alt="[わーい(嬉しい顔)]" border="0" class="sonet-icon" /></span>
<script type="text/javascript"><!-- //↑<img />が変化させたいGIF
var gificoncount=0;
//↑伸び縮みのスイッチ
function gificonflashing(){ //関数の始めです
var gificontmp=document.getElementById("gificonwaraikao");
//↑DOM、長いので変数に記憶させておく
if(gificoncount==0){ //スイッチが0ならノーマルサイズ
gificontmp.firstChild.width="15"; //firstChild、入れ子の最初のタグ <img />のwidth
gificoncount=1; //スイッチを1に
}
else{ //スイッチが0以外なら
gificontmp.firstChild.width="460"; //伸ばします!
gificoncount=0; //スイッチを0に戻す
}
setTimeout("gificonflashing()", 300); //0.300秒待って、関数の呼び出し 繰り返し
//↑関数の内部から自身の関数を呼び出している
} //関数の終わりです
//--></script>
<script type="text/javascript"><!--
gificonflashing(); //最初に関数を呼び出す ここがないと何も起きない
//--></script>