jesteś w: Główna > javascript > funkcje > JS_IR() - image replacement
Ostatnia aktualizacja tej strony: 2007-04-26, 15:04:13

Metoda na dynamiczną podmianę tekstu na obrazki

Funkcja zamienia tekst we wszystkich elementach (lub tylko tych podanych jako parametr) z klasą "JS_IR" na obrazek, którego url jest podany w komentarzu bezpośrednio po elemencie.

Linijka var testImageName = 'test.gif'; określa ścieżkę do obrazka testowego. Może to być 1px gif. Obrazek jest potrzebny, żeby sprawdzić czy przeglądarka w ogóle obsługuje obrazki. Taki obrazek należy utworzyć, a ścieżkę do niego w razie potrzeby zmienić.

2007-04-26: mała zmiana. Alt jest budowany na podstawie wszystkich podwęzłów tekstowych a nie firstChild.

//Javascript image replacement
//Replaces text with image
//check for image support method
//found on http://www.quirksmode.org/dom/fir.html
//(thanks PPK)
function JS_IR(d){
var testImageName = '/g/test.gif';
this.init = function(){
if(!document.createElement || !document.getElementsByTagName){return;}
var testImg = new Image();
var tmp = new Date();
var suffix = tmp.getTime();
testImg.src = testImageName+'?'+suffix;
testImg.onload = function(){IR()};
}
this.createAlt = function(o){
  var alt = '';
  var el = o.childNodes;
  for(var i=0; i<el.length; i++){
    if(el[i].childNodes.length > 0){
      alt += this.createAlt(el[i]);
    }else if(el[i].nodeName=='#text'){
      alt+=el[i].nodeValue;
    }
  }
  return alt;
}
IR = function(){
if(d==null){d='*';}
var el=document.getElementsByTagName(d), i=0;
while(i<el.length){
var rep=false, alt='', j=0;
if(el[i].className.indexOf('JS_IR')!=-1){
if(el[i].nextSibling.nodeName=='#comment'){
rep = el[i].nextSibling.nodeValue;
alt = this.createAlt(el[i]);
}else if(el[i].nextSibling.nextSibling.nodeName=='#comment'){//allow 1 new line
rep = el[i].nextSibling.nextSibling.nodeValue;
alt = this.createAlt(el[i]);
}
if(rep != false){
var img = document.createElement('img');
img.setAttribute('src', rep);img.setAttribute('alt', alt);img.setAttribute('title', alt);
while(el[i].firstChild){el[i].removeChild(el[i].firstChild);}
el[i].appendChild(img);
}
}
i++;
}
}
this.init();
}


//replaces text in tag (class="JS_IR") with image (<!--/path/to/image.gif-->)
//<h1 class="JS_IR">Replace this text</h1><!--/path/to/image.gif-->

Po co to jest nie wiem - nie mam czasu sprawdzić dlaczego to napisałem :)

<script type="text/javascript">
function JS_IR(d){
  if(!document.createElement || !document.getElementsByTagName){return;}
  if(d==null){d='*';}
  var el=document.getElementsByTagName(d), i=0;
  while(i<el.length){
    var rep=false, alt='', j=0;
    if(el[i].className.indexOf('JS_IR')!=-1){
      while(j<el[i].childNodes.length){
        if(el[i].childNodes[j].nodeName=='#comment'){
          rep = el[i].childNodes[j].nodeValue;
        }else if(el[i].childNodes[j].nodeName=='#text'){
          alt = el[i].childNodes[j].nodeValue;
        }
        j++;
      }
      if(rep != false){
        var img = document.createElement('img');
        img.setAttribute('src', rep);img.setAttribute('alt', alt);img.setAttribute('title', alt);
        while(el[i].firstChild){el[i].removeChild(el[i].firstChild);}
        el[i].appendChild(img);
      }
    }
    i++;
  }
}

JS_IR();
</script>

Menu

Działy:

Quick start:

Inne:

animacje Flash

Diablo 2: