- 1). Include JavaScript and jQuery in the “head” section of your HTML code with the statements:
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”></script>
In this example, the jQuery library is located in the default HTML directory. - 2). Insert a CDATA tag to prevent the browser’s attempts to parse jQuery operators:
<![CDATA[ - 3). Define the height and width variables used for displaying both images:
var W = 743;
var H = 1155;
var w = 192;
var h = 300; - 4). Set the conditions that trigger the magnification function. When called, this function replaces the mouse pointer with a circular display of the larger underlying image when the user rolls the mouse over the smaller image shown on the page. Create this event with the code:
$(document).ready(function() {
$("#myimage").mouseover(function(e) {
$(document).mousemove(myMM);
$("#glass").fadeIn('fast');
});
}); - 5). Define the magnification function’s display and ending parameters. In this example, the hidden image is magnified by twice the size of the smaller image and the magnification window disappears when the mouse pointer moves out of the smaller image’s boundaries. You can do this with the code:
function myMM(e) {
var myImage = $("#myimage");
var glassImage = $("#glass-image");
var glass = $("#glass");
var xs = e.pageX - myImage.offset().left;
var ys = e.pageY - myImage.offset().top;
var bx = glassImage.width()/2 - xs*W/w;
var by = glassImage.height()/2 - ys*H/h;
glass.css("left",e.pageX-75-89+"px").css("top",e.pageY-75-10+"px");
glassImage.css("background-position",bx+"px "+by+"px");
if (bx<-W || by<-H || bx>150 || by>150) {
myImage.unbind('mousemove',myMM);
glass.fadeOut('fast');
}
} - 6). Close the jQuery script and CDATA parser exclusion with the statements:
// ]]>
</script> - 7). Set your CSS page layout to position the larger background image and magnification window limits with the code:
<style type="text/css">
#monaimage {
margin-left: 200px;
}
#glass {
background-repeat:no-repeat;
background-position:top left;
width:250px;
height:170px;
padding-top:10px;
padding-left:89px;
margin:0;
position:absolute;
display:none;
}
#glass-image {
background-image:url('myImageLarge.jpg');
width:150px;
height:150px;
border-radius: 75px;
-moz-border-radius: 75px;
background-repeat:no-repeat;
background-color:#fff;
margin:0;
padding:0;
cursor:none;
}
</style>
</head> - 8). Write the HTML code to display your page in the “body” section:
<body>
<p>Move mouse over the image</p>
<img id="myimage" title="Magnification Example" src="myimageSmall.jpg" alt="The Big Picture" />
<div id="glass"><div id="glass-image"></div></div>
</body>
</html>
SHARE
