昨日の続き＋背景の透明化

embed要素のwidthとかheightがjavascriptでうまく書き換えられないとか言ってたけど、そんなことなかった。

　€setAttributeってやつを使って属性を変更してやれば、ちゃんとできる。

var tags = document.getElementsByTagName('embed');

for(var i = 0; i < tags.length; i++) {

　€　€　€　€ var tag = tags[i];

　€　€　€　€ tag.setAttribute('width' , 335);

　€　€　€　€ tag.setAttribute('height', 275);

}

document.getElementsByTagName(‘tag’)はタグ情報を配列で返してくるから、変数tagsは配列になっている。tags.lengthで配列の数を取得できる。ページ内に仮にembedタグが4つあればtags.lengthは当然4になる。

たぶん、自分はここが分かっていなかったから

var tag = document.getElementsByTagName('embed');

tag.width = 335;

みたいなことをやろうとして失敗していたのだと思う。

追記

Flashムービーの背景を透明化するにはembed要素にwmode=”transparent”という属性を付加してやればよい。あとobject要素内にparam要素も追加する必要がある。後者については今回は省略させてもらうとして、前者のembed要素にwmode属性を追加するときの個人的な注意点。

※上記のfor文の中に↓この1行が追加されたと思ってください。

tag.setAttribute('wmode', 'transparent');

属性を付加するだけならこれでOKなのだけど、xhtmlにおいて、閉じタグがないような場合、半角スペースとスラッシュをタグの中に書くというルールがある。

たとえば上のようなやり方でwmode属性を追加した場合、Firebugとかでソースを確認すると、こんな感じになる。

<embed src= ・・・中略・・・ wmode="transparent"/>

スラッシュの前に半角スペースが入っていない。これだと残念ながら背景は透明化されない。正規表現を使った置換でも何でもいいけど、とりあえずこの部分に半角スペースを入れないといけないようだ。ちなみに僕はPHPのereg_replace関数を使った。

正直、この半角スペースは入れなきゃいけないものだなんてこと知らなくて、どうして背景が透明化されないのか、昨日2時間くらい悩んだ。でも無事に解決して良かったっす。

問題の解決にあたり、こちらのサイトを参考にさせていただきました。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。