document.scroll = function(){
  return {
    x: this.body.scrollLeft || this.documentElement.scrollLeft,
    y: this.body.scrollTop  || this.documentElement.scrollTop
  };
};

function ShowImg(num){
  var src = document.getElementById('MediumImage'+num).value;
  var width = document.getElementById('MediumImageWidth'+num).value;
  var height = document.getElementById('MediumImageHeight'+num).value;
  var SmallImage  = document.getElementById('SmallImage'+num);
  var area = document.getElementById('MediumImageArea');

  area.innerHTML = '<div style="border: 3px solid #FF0080"><img src="'+src+'" width="'+width+'" height="'+height+'" /></div>';
  if (document.all && typeof document.documentElement.style.msInterpolationMode == "undefined" && navigator.userAgent.indexOf('Opera') == -1) {
    area.style.top  = event.clientY + document.scroll().y + 'px';
    area.style.left = event.clientX + document.scroll().x + 20 + 'px';
  } else {
    area.style.top  = SmallImage.offsetTop  + 'px';
    area.style.left = SmallImage.offsetLeft + 23 + 'px';
  }
  area.style.zIndex = '1000';
  area.style.display = 'block';
}

function HiddenImg(num){
  document.getElementById('MediumImageArea').style.display = 'none';
}