Tec-Monterrey/teammembers/students
From 2011.igem.org
(Difference between revisions)
Line 11: | Line 11: | ||
} | } | ||
+ | .container { | ||
+ | font:12px arial; | ||
+ | width:500; | ||
+ | max-width:500; | ||
+ | height:100; | ||
+ | max-height:100; | ||
+ | border:none; | ||
+ | overflow:auto; | ||
+ | padding:5; | ||
+ | border:1px solid black; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .gallery { | ||
+ | font:12px arial; | ||
+ | width:500; | ||
+ | max-width:500; | ||
+ | border:none; | ||
+ | padding:5; | ||
+ | text-align: center; | ||
+ | } | ||
#p-logo { | #p-logo { | ||
position: absolute; | position: absolute; | ||
Line 236: | Line 256: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
<!-- | <!-- | ||
+ | i = 0; | ||
+ | st1 = 100; | ||
+ | st2 = 0; | ||
+ | var speed = 10; | ||
- | + | function scrollRt() { | |
- | + | i = i + speed; | |
- | + | var div = document.getElementById("cont1"); | |
- | var | + | div.scrollLeft = i; |
- | + | if (i > div.scrollLeft) {i = 500;} | |
- | + | t1=setTimeout("scrollRt()",100); | |
- | + | } | |
- | + | function scrollLf() { | |
- | + | i = i - speed; | |
- | + | var div = document.getElementById("cont1"); | |
- | + | div.scrollLeft = i; | |
- | + | if (i < 0) {i = 0;} | |
- | + | t1=setTimeout("scrollLf()",100); | |
- | + | } | |
- | + | function changeImg(n) { | |
- | + | //url goes here | |
- | + | var imgname = new Array(); | |
- | + | imgname[0] = "file:///C:/Users/Luis/Downloads/philosoraptor01.jpg"; | |
- | + | imgname[1] = "file:///C:/Users/Luis/Downloads/philosoraptor02.jpg"; | |
- | + | imgname[2] = "file:///C:/Users/Luis/Downloads/philosoraptor03.jpg"; | |
- | + | imgname[3] = "file:///C:/Users/Luis/Downloads/philosoraptor04.jpg"; | |
+ | imgname[4] = "file:///C:/Users/Luis/Downloads/philosoraptor05.jpg"; | ||
- | if ( | + | var name = imgname[n]; |
- | + | var imgobj = document.getElementById('galImg'); | |
- | + | animTransA(); | |
- | document.getElementById(' | + | imgobj.src = name; |
+ | animTransB(); | ||
+ | } | ||
+ | function animTransA() { | ||
+ | st1 -= speed; | ||
+ | img = document.getElementById('galImg'); | ||
+ | img.style.opacity = st1/100; | ||
+ | img.style.filter = 'alpha(opacity=' + st1 + ')'; | ||
+ | if (st1 > 0) { t2=setTimeout("animTransA()",50); } | ||
+ | else { st1 = 100;} | ||
+ | } | ||
+ | function animTransB () { | ||
+ | st2 += speed; | ||
+ | img = document.getElementById('galImg'); | ||
+ | img.style.opacity = st2/100; | ||
+ | img.style.filter = 'alpha(opacity=' + st2 + ')'; | ||
+ | if (st2 < 100) { t3=setTimeout("animTransB()",50); } | ||
+ | else { st2 = 0;} | ||
+ | } | ||
+ | function resetAlpha() { | ||
+ | clearTimeout(t2); | ||
+ | clearTimeout(t3); | ||
+ | img = document.getElementById('galImg'); | ||
+ | img.style.opacity = 1; | ||
+ | st1 = 100; st2 = 0; | ||
+ | img.style.filter = 'alpha(opacity=' + 100 + ')'; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
// ----------------------------------------------------------------------------------------------- | // ----------------------------------------------------------------------------------------------- | ||
Line 580: | Line 622: | ||
<div style=" text-align:center; "> | <div style=" text-align:center; "> | ||
- | <div class | + | <div class="gallery"> |
- | + | ||
- | + | ||
- | + | <img src="file:///C:/Users/Luis/Downloads/philosoraptor01.jpg" alt="rawr" name="raptor" width="400" height="400" id="galImg" longdesc=" "> | |
- | + | </div> | |
- | + | <div class="container" id="cont1"> | |
- | + | <input type="button" value=" 0 " onmouseover="changeImg(0)" onmouseout="resetAlpha()"> | |
+ | <input type="button" value=" 1 " onmouseover="changeImg(1)" onmouseout="resetAlpha()"> | ||
+ | <input type="button" value=" 2 " onmouseover="changeImg(2)" onmouseout="resetAlpha()"> | ||
+ | <input type="button" value=" 3 " onmouseover="changeImg(3)" onmouseout="resetAlpha()"> | ||
+ | <input type="button" value=" 4 " onmouseover="changeImg(4)" onmouseout="resetAlpha()"> | ||
+ | </div> | ||
+ | <br><input type="button" value="Left" onmouseover="scrollLf()" onmouseout="clearTimeout(t1)"> | ||
+ | <br><input type="button" value="Right" onmouseover="scrollRt()" onmouseout="clearTimeout(t1)"> | ||
+ | </body> | ||
+ | |||
</div> | </div> | ||
</div></div></body></html> | </div></div></body></html> |