NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2009.06.18

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

まっちー

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時間くらい悩んだ。でも無事に解決して良かったっす。

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