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.
Step 4:
Now you can put
your images on the page but just provide the class=expando like bellow.
<table>
<tr>
<td
valign="top"><img
class="expando"
border="0"
src="Images/amster2.jpg"
width="100"
height="75"></td>
<td
valign="top"><img
class="expando
vacation" border="0"
src="Images/amster2.jpg"
width="100"
height="66"></td>
<td
valign="top"><img
class="expando"
border="0"
src="Images/amster3.jpg"
width="100"
height="75"></td>
</tr>
</table>
Here I'm
keeping the images in table cells if you also are keeping them in cells then set
arrange the cell content on fixed location if any another cell got changed
because when we mouse over the image it got expanded and can disturb the style
of other cells.
Step 5:
Run
your application and move the mouse over images and see the results.
Conclusion
Using the
javascript we can manage the large dimension images on our web page with little
of code.