Hi,

I need some images on my website that change when the user hovers his mouse over them (and change back when the mouse leaves again).

I know the concept behind this, one simply uses the 'onmouseover' and 'onmouseout' client-side events and set the 'src' property of the image there. Usually one would also preload the images, otherwise it takes a while before the image is first loaded when the mouse hovers over the image. That happens like this
Code:
var otherImage = new Image();
otherImage .src = 'myimage.jpg';

function ChangeImage(img) {
   img.src = otherImage.src;
}
well, something like that at least, this is from memory.



Anyway, this is all easy enough, but my problem is that the images I am talking about will be added during run-time, by the user of the site. The idea is that he can add images dynamically (by selecting two images with a FileUpload control and uploading them).

So to make this process easier, I decided to create my own image control that inherits Image:
vb.net Code:
  1. Namespace Controls

  2.     Public Class ImageControl

  3.         Inherits Image

  4.  
  5.         Public Sub New(ByVal img1 As String, ByVal img2 As String)

  6.             Me.Image1 = img1

  7.             Me.Image2 = img2

  8.             Me.ImageUrl = img1

  9.  
  10.             If Not String.IsNullOrEmpty(Me.ImageR) Then

  11.                 Me.Attributes.Add("onmouseover", String.Format("this.src='{0}'", Me.ImageR))

  12.                 Me.Attributes.Add("onmouseout", String.Format("this.src='{0}'", Me.ImageL))

  13.             End If

  14.         End Sub

  15.         

  16.         Private _Image1 As String

  17.         Public Property Image1() As String

  18.             Get

  19.                 Return _Image1

  20.             End Get

  21.             Set(ByVal value As String)

  22.                 _Image1 = value

  23.             End Set

  24.         End Property

  25.  
  26.         Private _Image2 As String

  27.         Public Property Image2() As String

  28.             Get

  29.                 Return _Image2

  30.             End Get

  31.             Set(ByVal value As String)

  32.                 _Image2 = value

  33.             End Set

  34.         End Property

  35.         

  36.     End Class

  37. End Namespace
The idea is that I can add these dynamically:
vb.net Code:
  1. Dim img As New ImageControl("myimage1.jpg", "myimage2.jpg")

  2. placeHolder.Controls.Add(img)
and that's it, no script needed, that's everything I need.


At the moment this works fine, on mouse-hover the image changes. However, there is no pre-loading, so sometimes it takes a while before the image changes.

So I now want to pre-load the images. But I don't know how I would do this easily... I doubt I can add the required script to the ImageControl somehow (or can I?), but I don't know where else to do it.


So what I need basically is a way to have my website add the required pre-loading javascript automatically. At the moment I am simply looping through my datasource (which supplies the image paths) and adding an ImageControl for every set of two images. So if I have, for example, this data:
Code:
ID		Img1		Img2
----------------------------
1		xyz.jpg		xyz2.jpg
2		abc.jpg		abc2.jpg
3		last.jpg	last2.jpg
then I want my website to automatically come up with this script, or something similar;
Code:
<head>
	<script type="text/javascript">
		var img1_1 = new Image();
		var img1_2 = new Image();
		var img2_1 = new Image();
		var img2_2 = new Image();
		var img3_1 = new Image();
		var img3_2 = new Image();
		
		img1_1.src = 'xyz.jpg';
		img1_2.src = 'xyz2.jpg';
		img2_1.src = 'abc.jpg';
		img2_2.src = 'abc.jpg';
		img3_1.src = 'last.jpg';
		img3_2.src = 'last.jpg';		
	</script>
</head>
How can I do this?