Preloading Javascript Images

[jont]

I am using a simple image swap routine in a fragment using:

<img src="imageSwap1.jpg" name="swapImage" id="swapImage" ...>
<a ... onmouseover="document.swapImage.src='imageSwap1.jpg'">
<a ... onmouseover="document.swapImage.src='imageSwap2.jpg'">
... etc

What is the best way to preload the images imageSwap2.jpg, imageSwap3.jpg etc to prevent lag on the mouseover?

Tried using

Image2= new Image(200,200)
Image2.src = "imageSwap2.jpg"
.. etc

but to no apparent effect

[TraceyHand]

what sort of lag are you noticing?
I've just used (in a site I'm working on)

<A href="xxxx.html" OnMouseOver = "document.images.img2.src= 'img1.jpg'" 
OnMouseOut ="document.images.img2.src='img2.jpg'" >

<IMG SRC = "img2.jpg" NAME = "img2" Border = "0" >

</A>

and I don't notice any lag

[gabrielcrowe]

why dont you use quit using crappy javascript and use beautiful css offsets instead?



like these:
http://exploding-boy.com/images/cssmenus/menus.html

    #tabs {
      float:left;
      width:100%;
      background:#BBD9EE;
      font-size:93%;
      line-height:normal;
      }
    #tabs ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("tableft.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("tabright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FF9834;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }

[jont]

what sort of lag are you noticing?

Actually - looking again it hardly noticeable - probably me wanting psychic pre-emptive loading

[jont]

use beautiful css offsets instead?

This is a temp stop gap - I have a css version on the boards at the moment which whacks it -90 billion pixels off screen and drags it back on the a:hover

[Darren B]

This is a temp stop gap - I have a css version on the boards at the moment which whacks it -90 billion pixels off screen and drags it back on the a:hover

that much

[jont]

Better safe than sorry matey .. have you seen the size of them new DELL widescreen monitors? They put the Imax to shame