Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / static / intro.html @ babfdb9b

History | View | Annotate | Download (2.9 kB)

1
<!doctype html>
2
<html>
3
<head>
4
    <title>Okeanos Project</title>
5
    <script src="./jquery.tools.min.js" type="text/javascript"></script>
6
    <style>
7
        body, html {
8
            overflow: hidden;
9
        }
10
        .content {
11
            margin: 0 auto;
12
            height: 100%;
13
        }
14
        .intro-img {
15
            cursor: pointer;
16
            border: none;
17
            position: absolute;
18
            left:0;
19
            right:0;
20
        }
21
        a {
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;
34
        }
35
    </style>
36
    <script type="text/javascript">
37
        $(document).ready(function() {
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
            });
85
        });
86
    </script>
87

    
88
</head>
89
    <body>
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>
96
    </div>
97
</body>
98
</html>