[RESOLVED] Image mouse-over - preloading images
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?
Re: Image mouse-over - preloading images
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 :)
Re: Image mouse-over - preloading images
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.
Re: [RESOLVED] Image mouse-over - preloading images
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
Re: [RESOLVED] Image mouse-over - preloading images
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.
Re: [RESOLVED] Image mouse-over - preloading images
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"">")
Re: [RESOLVED] Image mouse-over - preloading images
Hey,
Looks good to me :)
Gary
