Expand Images On ASP.NET Web Page


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.


Similar Articles