change image in shopping website using javascript in asp.net

In previous javascript tutorials we have learned how to call javascript code from code behind, alert box in asp.net, confirm box in asp.net.

In this asp.net javascript post we will learn how to change or how to display big image while mouse over on small images. Generally we have seen this kind of functionality in online shopping website. In online shopping website when user buy something that viewmore page user can see the product description with display images, we can see the product big image one by one while mouse over of the small image.

change image while onmousover in asp.net

For do this asp.net example we have use javascript onmouseover event to change the image respectively.

First Create web application in visual studio 2010 with one web form.

In this asp.net example we have taken three small image control and one for display big image control in asp.net web page. and write javascript function to change image while on mouse  over on small images. here we call this javascript function in onmouseover events of three small image control.

Note : create new folder “img” and paste three images in this folder.

Here is the html design code :

<table class="style1">
            <tr>
                <td class="style2">
                    <asp:Image ID="Image1" runat="server" Height="224px" Width="165px" />
                </td>
            </tr>
            <tr>
                <td>
                    <table class="style3">
                        <tr>
                            <td>
                                <asp:Image ID="Image2" runat="server" Height="65px" Width="52px" 
                                    ImageUrl="~/img/124.jpg"  onmouseover="img(this)" />
                            </td>
                            <td>
                                <asp:Image ID="Image3" runat="server" Height="65px" Width="52px" 
                                    ImageUrl="~/img/125.jpg"  onmouseover="img(this)" />
                            </td>
                            <td>
                                <asp:Image ID="Image4" runat="server" Height="65px" Width="52px" 
                                    ImageUrl="~/img/544.jpg"  onmouseover="img(this)" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

After design web for write below javascript code in head tag of html page.

<script type="text/javascript">
        function img(i) {

            var imgg = document.getElementById('<%=Image1.ClientID%>');
            imgg.src = i.src;

        }
    
    </script>