topical media & game development

talk show tell print

basic-javascript-12-CB-image-rollover.htm / htm

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  <html xmlns="" >
      <title>Cross-browser Image Rollover</title>
      <script type="text/javascript">
      function image_eventHandler(evt) {
          var elementTarget;
          if (evt.srcElement) { //The browser is IE
              elementTarget = evt.srcElement;
          } else { //The browser is non-IE
              elementTarget =;
          if (evt.type == "mouseover") { //The mouse rolled over the image.
              elementTarget.src = "o.gif"; //So change the image's src property.
          if (evt.type == "mouseout") { //The mouse moved out.
              elementTarget.src = "x.gif"; //So change it back to the original picture.
      <img src="x.gif" onmouseover="image_eventHandler(event)" onmouseout="image_eventHandler(event)" />

(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.