IEでCtrl+Aで画像が青っぽくなるのをシミュレートする - 素人がプログラミングを勉強していたブログ

IE Ctrl+Aに置いた。
IE向けのトリック画像を、Macユーザなど、IEが使えない人でも見れるようにする。
やってることは単純で、画像の上に、透明と青を交互に描いたgif画像を用意して、指定された画像の上にdivのbackground-imageとして表示するだけ。
location.searchを自分で解析すると、CGIのように.html?url=fooみたいに指定できるようになる。簡単に貼り付けられるようになるので便利。

<html> 
  <head> 
    <title>IE Ctrl+A</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"></meta> 
    <style type="text/css"> 
      #layer { position: relative; }
      #overlay {
        background-image:url("images/overlay.gif");
        width: 500px;
        height: 500px;
        visibility: hidden;
        z-index: 2;
      }
      #overlay, #source {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index:1;
      }
    </style> 
  </head> 
  <body> 
    <form action="?" method="get"> 
      <label>URL: <input type="text" name="url"></input></label> 
      <input type="submit" value="送信"></input> 
    </form> 
    <p>画像クリックでトグルします。</p> 
    <div id="layer"> 
      <img id="source"></img> 
      <div id="overlay"><div> 
    </div> 
  </body> 
  <script type="text/javascript"> 
    var layer = document.getElementById('layer');
    var overlay = document.getElementById('overlay');
    var source = document.getElementById('source');
    var enabled = false;
    var m = location.search.match(/(?:^\?|&)url=([^&]*)/);
    if (m) source.src = unescape(m[1]);
    source.onload = function () {
      overlay.style.width = source.width + 'px';
      overlay.style.height = source.height + 'px';
    };
    layer.onclick =  function () {
      overlay.style.visibility = enabled ? 'hidden' : 'visible';
      enabled = !enabled;
    };
  </script> 
</html>