topical media & game development

talk show tell print

graphic-javascript-effect-image-mouseover-effect.htm / htm



  <head>
  <script>
  
  function update(url,index,isSuper) {
           document['PhotoBig'].src=url;
  }
  
  </script>
  </head>
  <body>
  
  <div style="margin-left: 30%;">
  
           <img src="@logo.gif" name="PhotoBig" style="border:1px solid black">
  
  <table>
           <tr>
             <td>
                      <a onMouseOver="update('@walk.gif', 0, false); return false;">
                             <img src="@alchemy.gif" style="border:1px solid black">
                             </a>
      </td><td>
                      <a onMouseOver="update('@keiko.gif', 1, true); return false;">
                             <img src="@alchemy.gif" style="border:1px solid black">
                      </a>
      </td><td>
                      <a onMouseOver="update('@walk.gif', 2, true); return false;">
                             <img src="@alchemy.gif" style="border:1px solid black">
                      </a>
             </td><td>
                      <a onMouseOver="update('@logo.gif', 3, true); return false;">
                             <img src="@alchemy.gif" style="border:1px solid black">
                      </a>
      </td></tr>
    <tr>
      <td colspan="4" style="text-align: center; font: .8em 'Comic Sans MS', Arial;">
                             Move the cursor over the images/picture you wish to preview.
      </td>
    </tr><tr>
      <td>
                      <a onMouseOver="update('images/pic5.gif', 4, true); return false;">
                      <img src="images/pic5-sm.gif" style="border:1px solid black">
                      </a>
      </td><td>
                      <a onMouseOver="update('images/pic6.gif', 5, true); return false;">
                             <img src="images/pic6-sm.gif" style="border:1px solid black">
                      </a>
      </td>
      <td>
                      <a onMouseOver="update('images/pic7.gif', 6, true); return false;">
                             <img src="images/pic7-sm.gif" style="border:1px solid black">
                      </a>
      </td><td>
                      <a onMouseOver="update('images/pic8.gif', 7, true); return false;">
                             <img src="images/pic8-sm.gif" style="border:1px solid black">
                      </a>
      </td>
                  </tr>
  </table>
  
  </div>
  
  </body>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.