圖片庫,動態創建標記(day26)

 function addLoadEvent(func){
  var oldonload = window.onload;
  if(typeof window.onload != "function"){
    window.onload = func;
  } else {
    window.onload = function(){
      oldonload();
      func();
    }
  }
}


function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
  if(targetElement == parent.lastChild){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function preparePlaceholder(){
  if(!document.createElement) return false;
  if(!document.createTextNode) return false;
  if(!document.getElementById) return false;
  if(!document.getElementById("imageGallery")) return false;
  var placeholder = document.createElement("img");
  placeholder.setAttribute("id","placeholder");
  placeholder.setAttribute("src","../images/Desert 1.jpg");
  placeholder.setAttribute("alt","my image gallery");
  var description = document.createElement("p");
  description.setAttribute("id","description");
  var desctext = document.createTextNode("choose  an image");
  description.appendChild(desctext);
  var gallery = document.getElementById("imageGallery");
  insertAfter(placeholder,gallery);
  insertAfter(description,placeholder);
}


function showPic(whichPic){
  var source = whichPic.getAttribute("href");
  var text = whichPic.getAttribute("title");
  var placeholder = document.getElementById("placeholder");
  var description = document.getElementById("description");
  placeholder.setAttribute("src",source);
  description.firstChild.nodeValue = text;
}

function prepareGallery(){
  if(!document.getElementsByTagName) return false;
  if(!document.getElementById) return false;
  if(!document.getElementById("imageGallery")) return false;
  var gallery = document.getElementById("imageGallery");
  var links = gallery.getElementsByTagName("a");
  for(i in links){
    links[i].onclick = function() {
      showPic(this);
      return false;
    }
  }
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

在前一篇博客的html中,去掉結尾的img,p標籤;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章