[RESOLVED] Image mouse-over - preloading images

**NickThissen** · Nov 26th, 2010, 06:58 PM

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:

Namespace Controls
    Public Class ImageControl
        Inherits Image
 
        Public Sub New(ByVal img1 As String, ByVal img2 As String)
            Me.Image1 = img1
            Me.Image2 = img2
            Me.ImageUrl = img1
 
            If Not String.IsNullOrEmpty(Me.ImageR) Then
                Me.Attributes.Add("onmouseover", String.Format("this.src='{0}'", Me.ImageR))
                Me.Attributes.Add("onmouseout", String.Format("this.src='{0}'", Me.ImageL))
            End If
        End Sub
        
        Private _Image1 As String
        Public Property Image1() As String
            Get
                Return _Image1
            End Get
            Set(ByVal value As String)
                _Image1 = value
            End Set
        End Property
 
        Private _Image2 As String
        Public Property Image2() As String
            Get
                Return _Image2
            End Get
            Set(ByVal value As String)
                _Image2 = value
            End Set
        End Property
        
    End Class
End Namespace

The idea is that I can add these dynamically:

vb.net Code:

Dim img As New ImageControl("myimage1.jpg", "myimage2.jpg")
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?

**motil** · Nov 27th, 2010, 04:39 PM

well you can build the script on the server side and use

Code:

 ScriptManager.RegisterStartupScript

to add it to your page (i'm not using this method myself since i never find the need to use it)

but today is more common to use the mouseover effect with pure CSS and not with JS, which in your case will be bit more difficult since the user upload both of the images, but let me throw an idea...

when i want to use the mouse over effect what i do is combine both the out/over images to a single image so there is no need for preloading and use css to switch the images position, something like this:

Code:

.CPButton{background:url('/Graphics/main_master.png')  left -194px;}
.CPButton:hover{background:url('/Graphics/main_master.png') -57px -194px;}

you can combine both of the images the user upload to a single image (and save the width/height if the images can be in different sizes) and use css to enable the hover effect...

but your image control id is pretty neat as well i never thought about it

**NickThissen** · Nov 27th, 2010, 04:56 PM

Actually I just found out this evening that I can register scripts during run-time, so I just looped through my images datasource and added the required script manually. Maybe not the best solution but it worked out in the end!

Thanks for the help though, a CSS solution sounds good for future reference.

**gep13** · Nov 28th, 2010, 09:42 AM

Nick,

Are you saying you ended up using this approach:

Code:

ScriptManager.RegisterStartupScript

Or, are you using a different approach? If so, you might want to think about sharing it, in case someone else has a similar problem.

Gary

**NickThissen** · Nov 28th, 2010, 10:05 AM

No, I am using

Code:

ClientScript.RegisterClientScriptBlock(Me.GetType(), "preload", sb.ToString())

where sb is a StringBuilder that completely builds the script from scratch:

Code:

Dim sb As New StringBuilder
sb.AppendLine("<script type=""text/javascript"">")

For Each photo As Photo In photos
   sb.AppendLine(String.Format("img_{0}_{1} = new Image();{2}img_{0}_{1}.src = '{3}';", _
								photo.ParentId, _
								photo.Id, _
								Environment.NewLine, _
								photo.ImageLocation))
Next

sb.AppendLine("</script>")

so for every 'photo' object I add two lines like

Code:

var img_3_15 = new Image();
img_3_15.src = 'myimage.jpg';

I also use "img_3_15.src" in the actual Image control finally.

**motil** · Nov 28th, 2010, 10:09 AM

just a very small tip, you can use the StringBuilder Constructor to init its first string which will save you a line of code so instead of:

Code:

Dim sb As New StringBuilder
sb.AppendLine("<script type=""text/javascript"">")

this will be enough:

Code:

Dim sb As New StringBuilder("<script type=""text/javascript"">")

**gep13** · Nov 28th, 2010, 10:15 AM

Hey,

Looks good to me

Gary

Thread: [RESOLVED] Image mouse-over - preloading images

Thread Tools

Display

[RESOLVED] Image mouse-over - preloading images

Re: Image mouse-over - preloading images

Re: Image mouse-over - preloading images

Re: [RESOLVED] Image mouse-over - preloading images

Re: [RESOLVED] Image mouse-over - preloading images

Re: [RESOLVED] Image mouse-over - preloading images

Re: [RESOLVED] Image mouse-over - preloading images

Posting Permissions