while mouse over a small image it will shows a large image

Question

1.24/5 (3 votes)

See more:

ASP.NET

how to get large image while mouse over a small image plz help me if u possible.............

Posted 11-May-12 22:38pm

Siva Prasad

Updated 10-May-17 5:17am

Add a Solution

Comments

Sandeep Mewara 12-May-12 4:57am

Did you tried anything?

3 solutions

Solution 3

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

Posted 12-May-12 17:02pm

Sergey Alexandrovich Kryukov

Updated 12-May-12 17:09pm

v6

Comments

VJ Reddy 12-May-12 23:24pm

My 5!

Sergey Alexandrovich Kryukov 13-May-12 0:34am

Thank you, VJ.
--SA

Solution 1

Hi,
you can use jquery lightbox :
jquery lightbox1
jquery lightbox2

Posted 11-May-12 22:43pm

hamid-shrk

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)

P.Salini · Accepted Answer · 2012-05-11T22:44:00

Solution 2

These may help you

http://social.expression.microsoft.com/Forums/en/web/thread/029ced06-6d43-4c21-8adc-71a9079fd8ec[^]

http://forums.asp.net/t/1495100.aspx/1[^]

Posted 11-May-12 22:44pm

P.Salini

Comments

Maciej Los 12-May-12 4:47am

Useful links, 5!

P.Salini 12-May-12 4:59am

Thank you losmac

VJ Reddy 13-May-12 0:41am

My 5!

P.Salini 14-May-12 0:02am

Thank you VJ