.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Melody Anderson
Eminent IT

Home >> Articles >> General >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to magnify an image within a webpage, from HTML

Posted By:ASPEvil       Posted Date: August 31, 2014    Points: 200    Category: General    URL: http://www.dotnetspark.com  

How we can magnify an image's particular part on which the mouse cursor is.

With shopping cart websites, when buyers select a product, they often want to see its picture, though most of the items' pictures are already be there, but buyers sometimes think if they would be able to see a big sized picture of the same picture. This particular wish of the buyers can definitely be fulfilled and this article shows how we can make this thing done.

For make this thing happen, we need to use three Jquery files (I have attached these three files with this article, within the zipped file: "Script.zip") and we put these three Jqeury files with our website's root directory and refer them as follow:-

<script type="text/javascript" src="jquery_002.js"></script>


<script type="text/javascript" src="script.js"></script>


<script type="text/javascript" src="jquery.js"></script>


With the above code, we make a reference of these three jqeury files which are kept with the root directory of the website. You can make a separate folder for these same files and put them inside of that particular folder and can mention the directory name with this reference, too.

Now the picture, we are wanting to be big sized, we need to put as follow:-


<img alt="picture" src="images/picture.jpg" width="731" class="magnify" />


With the above mentioned code, notice the: class="magnify"; it is the main thing which tells those three Jqeury files, to make this particular picture's big sized.

Now, run your webpage and hover your mouse cursor on the picture which you have set to be fully big sized and see a small plus sign(+) is being shown with your mouse cursor, when it is on that picture. Now make a click and your picture will be a big sized one.


 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend