Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following is the contents of the project:
-
JavaScript Code
-
Style Sheet Code
Code :
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var cont_left = $("#container").position().left;
$("a img").hover(function () {
// hover in
$(this).parent().parent().css("z-index", 1);
$(this).animate({
height: "550",
width: "550",
left: "-=100",
top: "-=100"
}, "fast");
}, function () {
// hover out
$(this).parent().parent().css("z-index", 0);
$(this).animate({
height: "150",
width: "150",
left: "+=100",
top: "+=100"
}, "fast");
});
$(".img").each(function (index) {
var left = (index * 160) + cont_left;
$(this).css("left", left + "px");
});
});
</script>
Code:
<style type="text/css">
#container {
text-align: center;
position: absolute;
left: 260px;
margin-top: 150px;
width: 790px;
}
.img {
position: fixed;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {
position: relative;
border: 0 solid #fff;
}
</style>
Step 4 : The complete code of this application is written below. It contains the code of HTML file code and JavaScript file code.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App3</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var cont_left = $("#container").position().left;
$("a img").hover(function () {
// hover in
$(this).parent().parent().css("z-index", 1);
$(this).animate({
height: "550",
width: "550",
left: "-=100",
top: "-=100"
}, "fast");
}, function () {
// hover out
$(this).parent().parent().css("z-index", 0);
$(this).animate({
height: "150",
width: "150",
left: "+=100",
top: "+=100"
}, "fast");
});
$(".img").each(function (index) {
var left = (index * 160) + cont_left;
$(this).css("left", left + "px");
});
});
</script>
<style type="text/css">
#container {
text-align: center;
position: absolute;
left: 260px;
margin-top: 150px;
width: 790px;
}
.img {
position: fixed;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {
position: relative;
border: 0 solid #fff;
}
</style>
<!-- App3 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<div style="margin-top:50px;margin-left:100px"><h1 style="font-weight:bold">Image Scaling in Metro Apps on Mouseover Event</h1></div>
<div id="container">
<div class="img"><a href="#"><img src="img/1.jpg"/></a></div>
<div class="img"><a href="#"><img src="img/2.jpg"/></a></div>
<div class="img"><a href="#"><img src="img/3.jpg"/></a></div>
<div class="img"><a href="#"><img src="img/4.jpg"/></a></div>
<div class="img"><a href="#"><img src="img/6.jpg"/></a></div>
<div class="img"><a href="#"><img src="img/7.jpg"/></a></div>
<div class="img end"><a href="#"><img src="img/5.jpg"/></a></div>
<div class="clear"></div>
</div>
</body>
</html>
Step 5 : After running this code the output looks like this:
![img3.gif]()
In the Mouse over event the first image will be scaled in size:
![img4.gif]()
On Mouse over of the third image:
![img5.gif]()