javascriptで画像置換え :: Lunatic-Code

スタイルシートでtextindent:-9999pxとかやりつつ、
背景に画像を置くのが一番手軽ではあるけれど、
画像Offだとまったく見えなくなるとか、あるいは印刷時に印刷されないとか、
手軽な反面、いろいろと罠が潜んでいるから困る。

んで、普通に単なる画像にしても良いんだけど、例えば、

みたいなリストなどの場合、画像1枚貼って終わらせるより

<h2>お気に入り戦闘機</h2>
<ul>
<li>F-15</li>
<li>F-14</li>
<li>Su-37</li>
</ul>

とかやりたいわけで。

さてこれをどうしよう。
ということで、いっそjavaScriptで画像に置き換えてやれば良いのではないかと。
コードはこんな感じ・・・かな？

function imgReplace(){
var imgRepList = getElementByClassName(‘img_swp’);
var imgHeight;
var imgWidth;
for( var i=0, j=imgRepList.length; i<j; i++){
var altTxt = imgRepList[i].textContent||imgRepList[i].innerText;
var myId = imgRepList[i].id;
var chg = document.getElementById(myId);

var repImg= new Image();
repImg.src = “img/”+myId+’.gif’;

if(repImg.src){
var newImg= document.createElement(‘img’);

newImg.setAttribute(’src’,repImg.src);
newImg.setAttribute(‘alt’,altTxt.replace(/\s/g, “”));

if(imgHeight!=0 && imgWidth!=0 ){
newImg.setAttribute(‘height’,imgHeight);
newImg.setAttribute(‘width’,imgWidth);
}

if(chg.tagName == “DL” ||
chg.tagName == “OL”||
chg.tagName == “UL”){
var newP = document.createElement(‘p’);
var boxParent = chg.parentNode;
boxParent.replaceChild (newP,chg);
newP.setAttribute(“class”,chg.getAttribute(“class”)||chg.getAttribute(“className”));
newP.setAttribute(“id”,chg.getAttribute(“id”));
chg = newP;
}
else{
var newP = document.createElement(chg.tagName);
var boxParent = chg.parentNode;
boxParent.replaceChild (newP,chg);
newP.setAttribute(“class”,chg.getAttribute(“class”)||chg.getAttribute(“className”));
newP.setAttribute(“id”,chg.getAttribute(“id”));
chg = newP;
}
chg.appendChild(newImg);
}
}
}

function getElementByClassName(name){
var elements=[];
var allElements = document.getElementsByTagName(‘*’);

for(var i=0,len=allElements.length; i<len; i++){
if(allElements[i].className == name){
elements.push(allElements[i]);
}
}
return elements;
}

img_swpというクラス名のついた要素を取得して、そのID+.gifを画像名として使用。
んで、ID付き要素の中にimg要素を生成して、画像を当て込む感じ。
中のテキストをaltに代入。
IDとクラス、タグ名を引き継いだ上で、いったん中身を消すために、replaceChildする。
ただし、リストに関しては、pタグで生成しなおし。
実行前：<p class=”img_swp” id=”text” >置き換えるテキスト</p>
実行後：<p class=”img_swp” id=”text”><img scr=”text.gif” alt=”置き換えるテキスト” /></p>
生成後のコードはこんな感じになるかな。

とりあえずザクザクっと組んでみたんだけど・・・問題が2点。
まず1点。
IEだけなぜか画像サイズがうまく取れてこない。
初回の時はいいんだけど、いったん作った画像をリサイズしてアップしなおしたとき、
いつまでも古いサイズで表示されて、どうしようもならない。
サイズの設定をしていなくても駄目。
キャッシュ消したり、ブラウザ立ち上げなおしたり、PC再起動しても駄目。
何なんだいったい・・・

2点目は画像の取得をミスったとき。
これは運用で気をつけていれば良いんだろうけど。
出来れば画像がないときはそのまま～にしておきたい。
ファイルの有無を調べればよさげな感じだけど。

基本はこれで良いと思うんだけど、上記2点を解消しないと気軽に使えないなぁ・・・