Team:KAIST-Korea/Team/Photos/Test1

From 2011.igem.org

(Difference between revisions)
 
(91 intermediate revisions not shown)
Line 5: Line 5:
<head>
<head>
-
<style type="text/javascript">
+
<script type="text/javascript" language="javascript">
-
</style>
+
 
 +
NumberOfImages = 2;
 +
ImagesLayers = new Array(NumberOfImages);
 +
ImagesLayers[0] = "https://static.igem.org/mediawiki/igem.org/thumb/8/87/Desert.jpg/800px-Desert.jpg";
 +
ImagesLayers[1] = "https://static.igem.org/mediawiki/igem.org/thumb/a/a4/Hydrangeas.jpg/800px-Hydrangeas.jpg";
 +
 +
 
 +
function ImageChange_Up(){
 +
        ImagesLayers.push(ImagesLayers.shift());
 +
        document.myImages1.src=ImagesLayers[0];
 +
        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>
 +
 
<style type="text/css">
<style type="text/css">
Line 13: Line 49:
border-right:2px solid white;
border-right:2px solid white;
width:200px;
width:200px;
 +
height:600px;
padding-right:5px;
padding-right:5px;
}
}
Line 32: Line 69:
<div id="img">
<div id="img">
-
<img src="https://static.igem.org/mediawiki/2011/d/d5/Photomenu-kaist.png" width=200; height=400; />
+
<img src="https://static.igem.org/mediawiki/2011/d/d5/Photomenu-kaist.png" width=200; height=600; />
 +
 
 +
<a href="javascript:ImageChange_Up();">
 +
<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>
   
   
<table 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 >
-
<img src="https://static.igem.org/mediawiki/igem.org/thumb/8/87/Desert.jpg/800px-Desert.jpg" style="padding:10px;" width=160; height=140; />
+
<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; />
 +
</a>
</td>
</td>
</tr>
</tr>
-
<tr>
+
<tr >
-
<td>
+
<td >
-
<img src="https://static.igem.org/mediawiki/igem.org/thumb/a/a4/Hydrangeas.jpg/800px-Hydrangeas.jpg" style="padding:10px;" width=160; height=140/>
+
<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/>
 +
</a>
</td>
</td>
</tr>
</tr>
</table>
</table>
 +
<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;" />
 +
</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