zooming image at mouse over

Question

1.44/5 (2 votes)

See more:

when i user upload image and display at datalist i have mention my code at below.
and after display image i want mouse over at all images.
so, how can i do ?

my code is:

ASP.NET

<asp:DataList ID="DataList1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84"
            BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" GridLines="Both"
            RepeatColumns="3">
            <footerstyle backcolor="#F7DFB5" forecolor="#8C4510" />
            <itemstyle backcolor="#FFF7E7" forecolor="#8C4510" />
            <SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
            <SelectedItemTemplate>
            </SelectedItemTemplate>
            <itemtemplate>
                <table style="width: 100%;">
                    <tr>
                        <td rowspan="3">
                            <img alt="" src='Admin/ProductImages/<%# Eval("ImageName") %>' />
                        </td>
                        <td>
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                </table>
            </itemtemplate>

Posted 6-Jun-12 6:02am

Pratham4950

Updated 10-May-17 5:05am

Maciej Los

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2012-06-06T06:05:00

It's easy with jQuery:

HTML

<html>
<head>
    <title> ... </title>
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>

	<img alt="Image" id="image" />	
	
	<script type="text/javascript">

                $(document).ready(function() {
			imageElement = $("#image"); // element img found by its attribute id="image"
			imageElement.attr("src", "small.png"); // start with small image
			imageElement.hover(
				function() { // mouse moves over the image
					$(this).attr("src", "big.png");
				},
				function() { // mouse goes out
					$(this).attr("src", "small.png");
				}
			);
		});
        
        </script>

</body>
</html>

I assume you have two images: "small.png" and "big.png", basically, both could be made from the same source image, but "small.png" was re-sampled down to smaller size with same aspect ratio.

It works, tested.

If you need to learn jQuery, please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^],
http://docs.jquery.com/Tutorials:How_jQuery_Works[^],
http://docs.jquery.com/Tutorials[^].

—SA