Jump to content

Image Gallery: change main picture on mouse over


funky_rus
 Share

Recommended Posts

Hi.I have a main large image on my page and a data list with small kinda thumnail images (simply resized to lower size, their actual size is the same as large image size).And I would like to change that large image to the one the user rolls the cursor on (mouseover in other words) and change back to the original image file on mouseout.Please, see what i mean in the example on ebayer.com (scroll down to Image Gallery)I'm coding on asp .net , using C# as code behind and Visual Studio 2005 as an editor.Please share your ideas.

Link to comment
Share on other sites

Hi.I have a main large image on my page and a data list with small kinda thumnail images (simply resized to lower size, their actual size is the same as large image size).And I would like to change that large image to the one the user rolls the cursor on (mouseover in other words) and change back to the original image file on mouseout.Please, see what i mean in the example on ebayer.com (scroll down to Image Gallery)I'm coding on asp .net , using C# as code behind and Visual Studio 2005 as an editor.Please share your ideas.
I found a nice article on 4Guys which explains how you can create your own custom control for rollover images.
Link to comment
Share on other sites

Hi all. After couple of days I finally did it =) and I learned a lot doing that, so if you'd like to have a look the way I did it, welcome:

<asp:Image ID="imgSite" runat="server" Height="151px" Width="222px" AlternateText="Site Image" /><asp:DataList ID="dlSiteImages" runat="server" RepeatDirection="Horizontal" Visible="False" OnItemDataBound="dlSiteImages_ItemDatabound">

imgSite is the one I want to change on mouse over of the images in DataList. Note, there's event OnItemDataBound="dlSiteImages_ItemDatabound" which follows in C#:

protected void dlSiteImages_ItemDatabound(object sender, DataListItemEventArgs e)	{		Image HoveredImage = (Image)e.Item.FindControl("imgSiteSmallImg");		string url = HoveredImage.ImageUrl.ToString();		string OriginalURL = imgSite.ImageUrl.ToString();				url = url.Replace("~", ".");		OriginalURL = OriginalURL.Replace("~", ".");		HoveredImage.Attributes.Add("onmouseover", "mouseOver('" + url + "')");		HoveredImage.Attributes.Add("onmouseout", "mouseOut('" + OriginalURL + "')");	 }

Basically, on DataList databound this function adds Attributes onmouseover and onmouseout, passing the edited (~ in URL replaced with . so JavaScript could understand it) image URL.And here comes simple java script:

function mouseOver(SmallImgURL){var LargeImage = document.getElementById('ctl00_ContentPlaceHolder1_imgSite');LargeImage.src = SmallImgURL;}function mouseOut(OriginalURL){var LargeImage = document.getElementById('ctl00_ContentPlaceHolder1_imgSite');LargeImage.src = OriginalURL;}

Note: I had a problem, using getElementById it returned null when I tried to find images using their IDs I set in asp code, because they were changed after compiling, so you run the code and simply View Source to find the generated ID. In my case, "imgSite" was changed to 'ctl00_ContentPlaceHolder1_imgSite'.That's it!Good like in coding

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...