Team:KAIST-Korea/Team/Photos/Test1

From 2011.igem.org

(Difference between revisions)
 
(72 intermediate revisions not shown)
Line 5: Line 5:
<head>
<head>
-
<script type="text/javascript">
+
<script type="text/javascript" language="javascript">
-
function imagechange(){
+
NumberOfImages = 2;
-
alert("test");
+
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>
</script>
 +
<style type="text/css">
<style type="text/css">
Line 40: Line 71:
<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="#" on-Click="Java-script:imagechange();">
+
<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;" />
<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 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;" />
<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