SSブログ

GIFアイコンをいじる [HTML&JavaScript]

まえまえ記事で、
中段ぐらいにおきまして、
顔のGIFアイコンが横に伸び縮みしております。

ゆか さんからリクエストがございましたので、
ちょっとご説明させて頂きたいと思います。

基本的には
まえまえまえまえまえまえまえまえまえまえまえまえまえまえ
記事の応用なんです。
って、いつの記事かわかりませんが、
「文字の点滅」という記事ですね。

シンプルエディタしか試していませんが、
ソネさんブログはGIFアイコンを記事に挿入後、
GIFのwidthやheightをいじっても、
id属性などを挿入しようとしても、
保存の時点で、一言一句、元のタグに上書き戻されるようで、
思い通りのGIFアイコンの大きさなどには指定できないようですね。

そこで、以前ちょっと触れましたが、
DOMという構造概念を使いまして、
いわゆる、ダイナミックHTMLというものを実現しようとしているわけです。

って、何のことだかさっぱり分かりませんが、[exclamation&question]
動き[モバQ]を与えたり、打てば[ゴルフ]響く[夜]ようなブログなどを
実現できるということですね。

ほかのスクリプトの誤動作を避けるため、
毎回、関数名や変数名を考えるんですが、
だんだん思い浮かびにくくなってきました~[ふらふら]

そ~んでっ、GIFのheightもいじれるかなぁっと
思ったんですが、なんだかうまくいきませんでした。
それにline-heightだのheightだの
メンドウになってきてwidthしかいじってません。
っていうか、とどのつまりぃーは悪いことに使うなぁ[あせあせ(飛び散る汗)]
え~、逆もとのもくあみ状態になったわけです。(なんかちがうなぁ[モバQ])

基本的な要素としては、次の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>




共通テーマ:パソコン・インターネット
えぇ~かげんにしなさい!一言… ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。