符合标准的图片跳转以及未改进

基本上就是比较简单的实现点击页面上的缩略图实现浏览原图的功能，但是严格的标准化，即使不支持javascript和支持不完整也不报错。HTML:

  <div id="content">
    <h1>精彩图片</h1>
    <ul id="imagegallery">
      <li>
        <a href="images/photos/concert.jpg" title="精心彩排">
          <img src="images/photos/thumbnail_concert.jpg" alt="演唱会开始前" />
        </a>
      </li>
      <li>
        <a href="images/photos/bassist.jpg" title="激情时刻">
          <img src="images/photos/thumbnail_bassist.jpg" alt="放声" />
        </a>
      </li>
      <li>
        <a href="images/photos/hot.jpg" title="人群沸腾">
          <img src="images/photos/thumbnail_hot.jpg" alt="高潮" />
        </a>
      </li>
      <li>
        <a href="images/photos/crowd.jpg" title="伍佰! 伍佰!">
          <img src="images/photos/thumbnail_crowd.jpg" alt="呼喊" />
        </a>
      </li>
    </ul>
  </div>

 脚本如下：

function showPic(whichpic) ...{
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) ...{
    var text = whichpic.getAttribute("title");
  } else ...{
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) ...{
    description.firstChild.nodeValue = text;
  }
  return false;
}

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/placeholder.gif");
  placeholder.setAttribute("alt","my image gallery");
  var description = document.createElement("p");
  description.setAttribute("id","description");
  var desctext = document.createTextNode("点击小图看大图");
  description.appendChild(desctext);
  var gallery = document.getElementById("imagegallery");
  insertAfter(description,gallery);
  insertAfter(placeholder,description);
}

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 ( var i=0; i < links.length; i++) ...{
    links[i].onclick = function() ...{
      return showPic(this);
    }
  }
}
window.onload = function ...{
  prepareGallery();
  preparePlaceholder();
}

附带样式：

#content img {...}{
  border-width: .1em;
  border-style: solid;
  outline-width: .1em;
  outline-style: solid;
}
#imagegallery li {...}{
  display: inline;
}

基本就是这样了，有趣的是在IE和FF中显示图片提示（当鼠标悬停在缩略图上时）显示的不同，因为以图片作为链接，IE显示图片的alt属性，而FF显示链接a元素的title属性.

最后遇到一点问题又是在IE下，当我没有给placeholder设置样式时，IE默认为400*300，使我的图片失真，不得不专门在设置样式，灵活性下降。最后就是当几张图片大小不一，也就是比例不同时效果也不理想，还没有合适解决方案。