Team:KAIST-Korea/Team/Photos/Test1

From 2011.igem.org

(Difference between revisions)
 
(47 intermediate revisions not shown)
Line 5: Line 5:
<head>
<head>
-
<!--
 
-
function Imagechange(){
 
-
alert("test");
 
-
}
 
-
 
-
var step = -1, stime = 10, wtime = 1000, ep;
 
-
var sleep = stime, cell = 300, total = 2, width = cell * total;
 
-
 
-
function do_stop(){
 
-
clearTimeout(ep);
 
-
}
 
-
 
-
function do_move(){
 
-
var obj = photo_layer.style;
 
-
obj.pixelTop = (obj.pixelTop + step) % width;
 
-
if (obj.pixelTop % cell == 0) sleep = wtime;
 
-
ep = setTimeout("do_move()",sleep);
 
-
sleep = stime;
 
-
}
 
-
//-->
 
<script type="text/javascript" language="javascript">
<script type="text/javascript" language="javascript">
NumberOfImages = 2;
NumberOfImages = 2;
-
Images = new Array(NumberOfImages);
+
ImagesLayers = new Array(NumberOfImages);
-
Images[0] = "https://static.igem.org/mediawiki/igem.org/thumb/8/87/Desert.jpg/800px-Desert.jpg";
+
ImagesLayers[0] = "https://static.igem.org/mediawiki/igem.org/thumb/8/87/Desert.jpg/800px-Desert.jpg";
-
Images[1] = "https://static.igem.org/mediawiki/igem.org/thumb/a/a4/Hydrangeas.jpg/800px-Hydrangeas.jpg";
+
ImagesLayers[1] = "https://static.igem.org/mediawiki/igem.org/thumb/a/a4/Hydrangeas.jpg/800px-Hydrangeas.jpg";
-
 
+
function ImageChange_Up(){
function ImageChange_Up(){
-
         Images.push(Images.shift());
+
         ImagesLayers.push(ImagesLayers.shift());
-
         document.myImages1.src=Images[0];
+
         document.myImages1.src=ImagesLayers[0];
-
         document.myImages2.src=Images[1];
+
         document.myImages2.src=ImagesLayers[1];
}
}
-
+
 
 +
function ImageChange_Down(){
 +
        ImagesLayers.unshift(ImagesLayers.pop());
 +
        document.myImages1.src=ImagesLayers[0];
 +
        document.myImages2.src=ImagesLayers[1];
 +
}
 +
 
 +
function ImageMag(name, number){
 +
        var Image = document.getElementById(name);
 +
       
 +
        if (Image.filters)
 +
        {
 +
        Image.style.filter="blendTrans(duration=1)";
 +
        Image.filters.blendTrans.Apply();
 +
        }
 +
        Image.src=ImagesLayers[number];
 +
       
 +
        if (Image.filters)
 +
        {
 +
        Image.filters.blendTrans.Play();
 +
        }     
 +
}     
 +
       
</script>
</script>
 +
<style type="text/css">
<style type="text/css">
Line 63: Line 66:
</head>
</head>
-
<body onload="do_move();">
+
<body>
-
<div id="img" style="overflow:hidden;" onmouseout="do_move()" onmouseover="do_stop()">
+
<div id="img">
-
>
+
<img src="https://static.igem.org/mediawiki/2011/d/d5/Photomenu-kaist.png" width=200; height=600; />
<img src="https://static.igem.org/mediawiki/2011/d/d5/Photomenu-kaist.png" width=200; height=600; />
-
 
+
<a href="javascript:ImageChange_Up();">
-
<a href="javascript:ImageChange();">
+
<img src="https://static.igem.org/mediawiki/igem.org/b/ba/Arrow-up.png" width=40; height=25; style="position:relative; left:83px; top:-460px;" />
<img src="https://static.igem.org/mediawiki/igem.org/b/ba/Arrow-up.png" width=40; height=25; style="position:relative; left:83px; top:-460px;" />
</a>
</a>
   
   
-
<table id="photo_layer" style="position:relative; left:10px; top:-450px;" width=180; height=300;>
+
<table style="position:relative; left:10px; top:-450px;" width=180; height=300;>
<tr >
<tr >
<td >
<td >
 +
<a href="javascript:ImageMag('WindowImage', 0);">
<img src="https://static.igem.org/mediawiki/igem.org/thumb/8/87/Desert.jpg/800px-Desert.jpg" name="myImages1" style="padding:10px;" width=160; height=140; />
<img src="https://static.igem.org/mediawiki/igem.org/thumb/8/87/Desert.jpg/800px-Desert.jpg" name="myImages1" style="padding:10px;" width=160; height=140; />
 +
</a>
</td>
</td>
</tr>
</tr>
<tr >
<tr >
<td >
<td >
 +
<a href="javascript:ImageMag('WindowImage', 1);">
<img src="https://static.igem.org/mediawiki/igem.org/thumb/a/a4/Hydrangeas.jpg/800px-Hydrangeas.jpg" name="myImages2" style="padding:10px;" width=160; height=140/>
<img src="https://static.igem.org/mediawiki/igem.org/thumb/a/a4/Hydrangeas.jpg/800px-Hydrangeas.jpg" name="myImages2" style="padding:10px;" width=160; height=140/>
 +
</a>
</td>
</td>
</tr>
</tr>
</table>
</table>
-
<a href="javascript:ImageChange();">
+
<a href="javascript:ImageChange_Down();">
<img src="https://static.igem.org/mediawiki/igem.org/f/fb/Arrow-down.png" width=40; height=25; style="position:relative; left:83px; top:-440px;" />
<img src="https://static.igem.org/mediawiki/igem.org/f/fb/Arrow-down.png" width=40; height=25; style="position:relative; left:83px; top:-440px;" />
</a>
</a>
-
 
</div>
</div>
 +
 +
 +
<table style="position:relative; left:230px; top:-600px;" width=740; height=600;>
 +
<tr >
 +
<td >
 +
<img src="https://static.igem.org/mediawiki/igem.org/thumb/8/87/Desert.jpg/800px-Desert.jpg" style="padding:10px;" id="WindowImage" width=720; height=580;>
 +
</td>
 +
</tr>
 +
</table>
</body>
</body>
</html>
</html>

Latest revision as of 13:31, 20 July 2011

Menu
Menu Menu