Introduction
In this article
we will see how enlarge the image on asp.net web page. Consider the case we
shown the product list with image on asp.net page but our product images are
very large in size consider of 400*400 pixel and to compress this images we set
image control height and width property as per our page requirement which will
not disturb our remaining page css and the drawback is we cannot show full image
on our page. I agree with case but to overcome this problem we can show the
small image by adjusting the height and width but when user moves the mouse
pointer over it we can show the full size of image.
In my of the project I have same situation and to resolve the case I searched on
Google where I found one javascript file which can do the work explained above
i.e. expanding image to its full length when mouse pointer over its and would
like to share the idea here with you. So let's start to use the expander.
Step 1:
Create new project and add the page to your application.
Step 2:
Download the
attachment and copy the expand.js file from downloaded folder and paste it to
your application root or any sub-folder. This file normally contains some code
to expand the image and handles the mouse over and mouse out.
Step 3:
Refer the expand.js to your page in head tag like bellow.
<style
type="text/css">
img.expando{
border:
none;
vertical-align:
top;
}
</style>
<script
type="text/javascript"
src="expando.js">
</script>
Above we have
referred to expand.js as well as one style class which we will use for our image
control.
Join the conversation! Your thoughts help the community grow.