Skip Navigation LinksHome > Categories > Code from a Category

Asp.net Mouse hover on small image shows larger image on gridview



User Name: davidz
Name: David Zafar
Contact Me: www.datawebcoder.com/ContactUs.aspx
Home Page: www.datawebcoder.com
During last 8 years of my professional experience, I have worked at each phase of Software Engineering and delivered many software solutions from a simple 'Personal Web Site' to a very sophisticated '... [More]
Viewed Times: 4977
Add Date: 03/15/2012
This post shows mouse over on smaller image displays larger one and also click of below listed images from data list to populate corresponding smaller and larger image on main display

You can see the live demo here:

http://www.datawebcoder.com/Demo/20/Asp_net_Mouse_hover_on_small_image_shows_larger_image_on_gridview.aspx



This is a web user control which is very easy to implement it on any web page by drag and drop. Web user control is created by using gridview and datalist. Gridview is used to show list of smaller images and larger images and Mouse hover smaller image on left panel would populate corresponding larger image on right panel of gridview. List of available images are displayed by using datalist below gridview by click of any image on datalist would populate corresponding smaller and larger image on gridview. Basically this web user control is very useful on shopping cart or rich product image display on websites.

Steps to bind datalist images and gridview images:

1)Xml is used to bind datalist images and gridview images.By changing the xml images would change the datalist images and gridview image as follows.


2)Smaller images are added on folder named images/small and larger images added on folder named images/large. Have to keep smaller and corresponding larger image name would remain same. For example shoes_i1ec1300924.JPG is smaller image name and as well as larger image name .

Post a Comment

Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Details**:
Enter Text
as Below:
(case insensitive, if hard to read, click the "get a new one" button)
 
    
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.