This is done by using JQuery. In Jquery give a function named 'zoom()'. When i move a mouse on picture then picture is zoomed as like a Magnifier used on any object i.e. picture, newspaper etc. in real life. To give the zooming effect you will followed the below steps :
1. First Open a Text Editor and Type the following html codes :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Zoom by MouseMove on Picture</title>
<script type='text/javascript' src="jquery-1.7.js"></script>
<script type='text/javascript' src="jquery.zoom.js"></script><link rel="stylesheet" type="text/css" href="normalize.css">
<style type='text/css'>
.zoom
{
display:inline-block;
position:relative;
}
.zoom img
{
display: block;
}
</style>
</head>
<body>
<span class='zoom' id='ex'>
<img src="love_blooms_roses,_bunch_of_flowers.jpg" alt="Picture of Flowers" width='500' height='300' />
</span>
</body>
</html>
2. In the above code we use Two JS Files "jquery-1.7.js" and "jquery.zoom.js" and one CSS File named "normalize.css".
3. In the next lines we give style for Image file by creating two CSS classes named zoom and zoom img. The zoom class is for <span> tag in which we give an Image file for give the zooming effect. The <span> tag id 'ex' used in Javascript code with zoom() function as given below.
<script type='text/javascript'>
$(window).load(function () {
$(document).ready(function () {
$('#ex').zoom();
});
});
</script>
I have given a Screenshot and Example to illustrate this which has given follows :
Zoom an Image with Mouse Move Using JQuery
1. First Open a Text Editor and Type the following html codes :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Zoom by MouseMove on Picture</title>
<script type='text/javascript' src="jquery-1.7.js"></script>
<script type='text/javascript' src="jquery.zoom.js"></script><link rel="stylesheet" type="text/css" href="normalize.css">
<style type='text/css'>
.zoom
{
display:inline-block;
position:relative;
}
.zoom img
{
display: block;
}
</style>
</head>
<body>
<span class='zoom' id='ex'>
<img src="love_blooms_roses,_bunch_of_flowers.jpg" alt="Picture of Flowers" width='500' height='300' />
</span>
</body>
</html>
2. In the above code we use Two JS Files "jquery-1.7.js" and "jquery.zoom.js" and one CSS File named "normalize.css".
3. In the next lines we give style for Image file by creating two CSS classes named zoom and zoom img. The zoom class is for <span> tag in which we give an Image file for give the zooming effect. The <span> tag id 'ex' used in Javascript code with zoom() function as given below.
<script type='text/javascript'>
$(window).load(function () {
$(document).ready(function () {
$('#ex').zoom();
});
});
</script>
I have given a Screenshot and Example to illustrate this which has given follows :
Zoom an Image with Mouse Move Using JQuery
No comments:
Post a Comment
Note: only a member of this blog may post a comment.