Difference between revisions of "Template:Greece/TeamRoster"

Line 31: Line 31:
 
<body>
 
<body>
  
−
<object id='test_svg' data="https://static.igem.org/mediawiki/2017/5/52/Greekom_teamroster.svg" type="image/svg+xml"></object>
+
<object id='test_svg' data="https://static.igem.org/mediawiki/2017/3/3d/Greekom_manzins.svg" type="image/svg+xml"></object>
  
 
<div id='svg_info_box'>
 
<div id='svg_info_box'>
Line 113: Line 113:
 
];
 
];
  
−
function svgFunctionality(element){
+
function svgFunctionalityClick(element){
 
        
 
        
 +
      leftElements.forEach(function(item, index, array){
 +
        if(item.id != element.id){
 +
          //svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
 +
          svgDoc.getElementById(item.image_id).setAttribute('display', 'none');
 +
        }else{
 +
          //svgDoc.getElementById(item.id).setAttribute('transform', item.translate_after);
 +
          svgDoc.getElementById(item.image_id).setAttribute('display', 'block');
 +
        }
 +
      });
 +
      rightElements.forEach(function(item, index, array){
 +
        if(item.id != element.id){
 +
          //svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
 +
          svgDoc.getElementById(item.image_id).setAttribute('display', 'none');
 +
        }else{
 +
          //svgDoc.getElementById(item.id).setAttribute('transform', item.translate_after);
 +
          svgDoc.getElementById(item.image_id).setAttribute('display', 'block');
 +
        }
 +
      });
 +
 +
      void(document.getElementById('svg_info_box').style.display = 'none');
 +
}
 +
 +
function svgFunctionalityHover(element){
 +
 
       leftElements.forEach(function(item, index, array){
 
       leftElements.forEach(function(item, index, array){
 
         if(item.id != element.id){
 
         if(item.id != element.id){
 
           svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
 
           svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
−
          svgDoc.getElementById(item.image_id).setAttribute('opacity', '0');
 
 
         }else{
 
         }else{
 
           svgDoc.getElementById(item.id).setAttribute('transform', item.translate_after);
 
           svgDoc.getElementById(item.id).setAttribute('transform', item.translate_after);
−
          svgDoc.getElementById(item.image_id).setAttribute('opacity', '1');
 
 
         }
 
         }
 
       });
 
       });
Line 127: Line 149:
 
         if(item.id != element.id){
 
         if(item.id != element.id){
 
           svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
 
           svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
−
          svgDoc.getElementById(item.image_id).setAttribute('opacity', '0');
 
 
         }else{
 
         }else{
 
           svgDoc.getElementById(item.id).setAttribute('transform', item.translate_after);
 
           svgDoc.getElementById(item.id).setAttribute('transform', item.translate_after);
−
          svgDoc.getElementById(item.image_id).setAttribute('opacity', '1');
 
 
         }
 
         }
 
       });
 
       });
  
−
       void(document.getElementById('svg_info_box').style.display = 'none');
+
       svgDoc.getElementById(item.id).setAttribute('cursor', 'pointer');
 
}
 
}
  
Line 143: Line 163:
 
       leftElements.forEach(function(item, index, array){
 
       leftElements.forEach(function(item, index, array){
 
         svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
 
         svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
−
        svgDoc.getElementById(item.id).addEventListener('click', function(){ svgFunctionality(item) });
 
 
         svgDoc.getElementById(item.image_id).setAttribute('opacity', '0');
 
         svgDoc.getElementById(item.image_id).setAttribute('opacity', '0');
−
         svgDoc.getElementById(item.id).addEventListener('mouseover', function(){ this.setAttribute('cursor', 'pointer') });
+
         svgDoc.getElementById(item.id).addEventListener('click', function(){ svgFunctionalityClick(item) });
 +
        svgDoc.getElementById(item.id).addEventListener('mouseover', function(){ svgFunctionalityHover(item) });
 
       });
 
       });
  
 
       rightElements.forEach(function(item, index, array){
 
       rightElements.forEach(function(item, index, array){
 
         svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
 
         svgDoc.getElementById(item.id).setAttribute('transform', item.translate_before);
−
        svgDoc.getElementById(item.id).addEventListener('click', function(){ svgFunctionality(item) });
 
 
         svgDoc.getElementById(item.image_id).setAttribute('opacity', '0');
 
         svgDoc.getElementById(item.image_id).setAttribute('opacity', '0');
−
         svgDoc.getElementById(item.id).addEventListener('mouseover', function(){ this.setAttribute('cursor', 'pointer') });
+
         svgDoc.getElementById(item.id).addEventListener('click', function(){ svgFunctionalityClick(item) });
 +
        svgDoc.getElementById(item.id).addEventListener('mouseover', function(){ svgFunctionalityHover(item) });
 
       });
 
       });
  

Revision as of 19:51, 22 October 2017

Click on the miRNAs
  to get to know us!