Team:Sevilla/components

From 2011.igem.org

(Difference between revisions)
(Blanked the page)
 
(45 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Sevilla/template1}}
 
-
<html>
 
-
 
-
<!--===================================FOTOS================================================-->
 
-
 
-
<div class="ejemplo_img">
 
-
<img src="https://static.igem.org/mediawiki/2011/5/51/ArcPablo.png" width="190" height="200" />
 
-
<div class="ejemplo_img_cont">
 
-
  <p style="text-align:center">Pablo</p>
 
-
</div>
 
-
</div>
 
-
 
-
<div class="ejemplo_img">
 
-
<img src="https://static.igem.org/mediawiki/2011/2/20/ArcRoberto.png" width="190" height="200" />
 
-
<div class="ejemplo_img_cont">
 
-
  <p style="text-align:center">Roberto</p>
 
-
</div>
 
-
</div>
 
-
 
-
<div class="ejemplo_img">
 
-
<img src="https://static.igem.org/mediawiki/2011/0/0e/ArcElena.png" width="190" height="200" />
 
-
<div class="ejemplo_img_cont">
 
-
  <p style="text-align:center">Elena</p>
 
-
</div>
 
-
</div>
 
-
 
-
<script type="text/javascript">
 
-
$(document).ready(function(){
 
-
$(".ejemplo_img").mouseenter(function() {
 
-
$(".ejemplo_img_cont", this).stop().animate({ top:'160px' },{ queue:false, duration:300 });
 
-
});
 
-
$(".ejemplo_img").mouseleave(function() {
 
-
$(".ejemplo_img_cont", this).stop().animate({ top:'200px' },{ queue:false, duration:300 });
 
-
});
 
-
});
 
-
</script>
 
-
 
-
<style>
 
-
.ejemplo_img {
 
-
position:relative;
 
-
float:left;
 
-
width:190px;
 
-
height:200px;
 
-
border:2px inset #333;
 
-
overflow:hidden;
 
-
        margin-left:2px;
 
-
}
 
-
 
-
.ejemplo_img_cont {
 
-
float:left;
 
-
position:absolute;
 
-
background:#000;
 
-
height:60px;
 
-
line-height:25px;
 
-
width:190px;
 
-
padding:2px;
 
-
opacity:.8;
 
-
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
 
-
-MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 
-
top:200px;
 
-
left:0px;
 
-
color:#FFF;
 
-
font-size:18px;
 
-
font-family:"Lucida Grande", Arial, sans-serif;
 
-
z-index:10;
 
-
}
 
-
</style>
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
<!--===================================GRAFICA QUESITOS================================================-->
 
-
 
-
 
-
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 
-
    <script type="text/javascript">
 
-
      google.load('visualization', '1', {packages: ['corechart']});
 
-
    </script>
 
-
    <script type="text/javascript">
 
-
      function drawVisualization() {
 
-
        // Create and populate the data table.
 
-
        var data = new google.visualization.DataTable();
 
-
        data.addColumn('string', 'Task');
 
-
        data.addColumn('number', 'Hours per Day');
 
-
        data.addRows(5); //las 5 divisiones
 
-
        data.setValue(0, 0, 'Biología');//el primero es el id, el segundo siempre 0 y el tercero la etiqueta
 
-
        data.setValue(0, 1, 2); //el primero es a que id corresponde, el segundo siempre es 1 y el tercero el valor
 
-
        data.setValue(1, 0, 'Biotecnología');
 
-
        data.setValue(1, 1, 4);
 
-
        data.setValue(2, 0, 'Ing Informática');
 
-
        data.setValue(2, 1, 3);
 
-
        data.setValue(3, 0, 'Bioquímica');
 
-
        data.setValue(3, 1, 2);
 
-
        data.setValue(4, 0, 'Otros');
 
-
        data.setValue(4, 1, 2);
 
-
     
 
-
        // Create and draw the visualization.
 
-
        new google.visualization.PieChart(document.getElementById('visualization')).
 
-
            draw(data, {title:"¿Qué estudiamos?"});
 
-
      }
 
-
     
 
-
 
-
      google.setOnLoadCallback(drawVisualization);
 
-
    </script>
 
-
 
-
 
 
-
    <div id="visualization" style="float:left;font-family: Arial;border: 0 none;width: 600px; height: 400px;"></div>
 
-
</html>
 

Latest revision as of 10:52, 27 June 2011