Revision b2e062ee ui/static/intro.html
| b/ui/static/intro.html | ||
|---|---|---|
| 4 | 4 |
<title>Okeanos Project</title> |
| 5 | 5 |
<script src="./jquery.tools.min.js" type="text/javascript"></script> |
| 6 | 6 |
<style> |
| 7 |
body, html {
|
|
| 8 |
overflow: hidden; |
|
| 9 |
} |
|
| 7 | 10 |
.content {
|
| 8 |
width: 900px; |
|
| 9 | 11 |
margin: 0 auto; |
| 10 |
padding-top: 5%; |
|
| 11 |
text-align: center; |
|
| 12 |
height: 100%; |
|
| 12 | 13 |
} |
| 13 | 14 |
.intro-img {
|
| 14 | 15 |
cursor: pointer; |
| 15 | 16 |
border: none; |
| 17 |
position: absolute; |
|
| 18 |
left:0; |
|
| 19 |
right:0; |
|
| 16 | 20 |
} |
| 17 | 21 |
a {
|
| 18 | 22 |
border: none; |
| 23 |
outline: none; |
|
| 24 |
} |
|
| 25 |
.fadeimg {
|
|
| 26 |
position: absolute; |
|
| 27 |
display: none; |
|
| 28 |
border: none; |
|
| 29 |
} |
|
| 30 |
.images {
|
|
| 31 |
width: 657px; |
|
| 32 |
height: 590px; |
|
| 33 |
position: absolute; |
|
| 19 | 34 |
} |
| 20 | 35 |
</style> |
| 21 | 36 |
<script type="text/javascript"> |
| 22 | 37 |
$(document).ready(function() {
|
| 23 |
$(".intro-img").hover(function(){
|
|
| 24 |
$(this).attr("src", "./okeanos-intro-logo2.png");
|
|
| 25 |
}).mousedown(function(){
|
|
| 26 |
$(this).attr("src", "./okeanos-intro-logo3.png");
|
|
| 27 |
}).mouseup(function(){
|
|
| 28 |
$(this).attr("src", "./okeanos-intro-logo2.png");
|
|
| 29 |
}).mouseout(function() {
|
|
| 30 |
$(this).attr("src", "./okeanos-intro-logo1.png");
|
|
| 31 |
});; |
|
| 38 |
$(".content").css("width", "100%");
|
|
| 39 |
var img = $(".images");
|
|
| 40 |
var img_width = 657; |
|
| 41 |
var img_height = 590; |
|
| 42 |
|
|
| 43 |
function recenter_img() {
|
|
| 44 |
img.css("left", ($(window).width()/2 - img_width/2) + "px");
|
|
| 45 |
img.css("top", ($(window).height()/2 - img_height/2) + "px");
|
|
| 46 |
} |
|
| 47 |
recenter_img(); |
|
| 48 |
$(window).resize(function(){
|
|
| 49 |
recenter_img(); |
|
| 50 |
}); |
|
| 51 |
|
|
| 52 |
function start_animation() |
|
| 53 |
{
|
|
| 54 |
$(".fadeimg").fadeIn();
|
|
| 55 |
$(".fadeimg").show();
|
|
| 56 |
} |
|
| 57 |
|
|
| 58 |
function stop_animation() |
|
| 59 |
{
|
|
| 60 |
$(".fadeimg").fadeOut();
|
|
| 61 |
} |
|
| 62 |
|
|
| 63 |
var capture = ".images"; |
|
| 64 |
$(capture).mouseenter(function(){
|
|
| 65 |
start_animation(); |
|
| 66 |
}) |
|
| 67 |
$(capture).mouseleave(function() {
|
|
| 68 |
stop_animation(); |
|
| 69 |
}); |
|
| 70 |
$(capture).mouseup(function() {
|
|
| 71 |
$(".intro-img").hide();
|
|
| 72 |
window.location = $("a.intro-link").attr("href");
|
|
| 73 |
}); |
|
| 74 |
|
|
| 75 |
$(".images").mousedown(function(){
|
|
| 76 |
$(".intro-img").attr("src", "./okeanos-intro-logo3.png");
|
|
| 77 |
$(".fadeimg").hide();
|
|
| 78 |
}); |
|
| 79 |
|
|
| 80 |
$(".images").click(function(evn){
|
|
| 81 |
// evn.preventDefault(); |
|
| 82 |
// var to = $(window).width() + img_width + 100 + "px"; |
|
| 83 |
// $(".images").animate({"left": to}, 1000, function(){window.location = $("a.intro-link").attr("href")});
|
|
| 84 |
}); |
|
| 32 | 85 |
}); |
| 33 | 86 |
</script> |
| 34 | 87 |
|
| 35 | 88 |
</head> |
| 36 | 89 |
<body> |
| 37 |
<div class="content"> |
|
| 38 |
<a href="http://www.okeanos.grnet.gr" title=""><img class="intro-img" src="./okeanos-intro-logo1.png" alt="Sign in |
|
| 39 |
Okeanos project" /></a> |
|
| 90 |
<div class="content"> |
|
| 91 |
<div class="images"> |
|
| 92 |
<a class="intro-link" href="http://www.okeanos.grnet.gr" title=""> |
|
| 93 |
<img class="intro-img" src="./okeanos-intro-logo1.png" alt="Sign in Okeanos project" /> |
|
| 94 |
<img class="fadeimg" src="./okeanos-intro-logo2.png" /> |
|
| 95 |
</a></div> |
|
| 40 | 96 |
</div> |
| 41 | 97 |
</body> |
| 42 | 98 |
</html> |
Also available in: Unified diff