Difference between revisions of "Team:Greece/Model"

Line 5: Line 5:
 
     <script type='text/javascript' src='https://cldup.com/HJtlSwy2qT.js'></script>-->
 
     <script type='text/javascript' src='https://cldup.com/HJtlSwy2qT.js'></script>-->
  
 +
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
Line 19: Line 20:
  
 
           }
 
           }
 +
</script>
 +
<script>
 +
function onHoverChanges(idz){
 +
$('.circlez').removeClass('opace');
 +
$('#'+idz).addClass('opace');
 +
 +
var stateMsg;
 +
switch(idz){
 +
case 'c_t1': stateMsg = 'O.S.I.R.I.S. OVERVIEW';
 +
break;
 +
case 'c_t2': stateMsg = 'RISK ASSESSEMENT ANALYSIS';
 +
break;
 +
case 'c_t2': stateMsg = 'INTEGRATED HUMAN PRACTICES';
 +
break;
 +
case 'c_t4': stateMsg = 'PUBLIC ENGAGEMENT';
 +
break;
 +
}
 +
window.history.pushState(null, null, stateMsg);
 +
}
 
</script>
 
</script>
 
</head>
 
</head>
Line 43: Line 63:
 
</nav>
 
</nav>
 
                 </div>
 
                 </div>
 +
<svg style='display:block; position:absolute; z-index:1000; margin: 0px;' id='svg_graphics_box' class='responsive_box' height="600" width='99%' viewBox="0 0 800 700">
 +
                              <!--min-x, min-y, width, height-->
 +
<circle class='circlez' cx="-230" cy="400" r="180" stroke='#ffffff' stroke-width="0" fill="white" id='c_t1' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="onHoverChanges(this.id)" />
 +
<text class='animate_text' id='t1' x='0' y='300' font-size='35px' text-anchor='middle' fill='#000000'>
 +
<tspan x="-230" dy="2em">O.S.I.R.I.S.</tspan>
 +
<tspan x="-230" dy="1.5em">OVERVIEW</tspan>
 +
</text>
 +
<circle class='circlez' cx="190" cy="400" r="180" stroke='#ffffff' stroke-width="0" fill="white" id='c_t2' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="onHoverChanges(this.id)" />
 +
<text class='animate_text' id='t2' x='0' y='300' font-size='35px' text-anchor='middle' fill='#000000'>
 +
<tspan x="190" dy="1.5em">RISK</tspan>
 +
<tspan x="190" dy="1.5em">ASSESSEMENT</tspan>
 +
<tspan x="190" dy="1.5em">& ANALYSIS</tspan>
 +
</text>
 +
<circle class='circlez' cx="610" cy="400" r="180" stroke='#ffffff' stroke-width="0" fill="white" id='c_t3' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="onHoverChanges(this.id)" />
 +
<text class='animate_text' id='t3' x='0' y='300' font-size='35px' text-anchor='middle' fill='#000000'>
 +
<tspan x="610" dy="1.5em">INTEGRATED</tspan>
 +
<tspan x="610" dy="1.5em">HUMAN</tspan>
 +
<tspan x="610" dy="1.5em">PRACTICES</tspan>
 +
</text>
 +
<circle class='circlez' cx="1020" cy="400" r="180" stroke='#ffffff' stroke-width="0" fill="white" id='c_t4' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="onHoverChanges(this.id)" />
 +
<text class='animate_text' id='t4' x='0' y='300' font-size='35px' text-anchor='middle' fill='#000000'>
 +
<tspan x="1020" dy="2em">PUBLIC</tspan>
 +
<tspan x="1020" dy="1.5em">ENGAGEMENT</tspan>
 +
</text>
 +
 +
 +
</svg>
 +
<div class='background_box'>
 +
<img src='desert_background.jpg' style='width:100%; height:100%;' />
 +
</div>
  
 
<!-- The Navigation Menu -->
 
<!-- The Navigation Menu -->
Line 167: Line 217:
 
   display:none;
 
   display:none;
 
}
 
}
 +
 +
.background_box{
 +
position:fixed;
 +
margin:-8px 0px 0px -8px;
 +
width:100%;
 +
height:100%;
 +
}
 +
 +
.circlez{
 +
opacity: 0.6;
 +
}
 +
 +
.circlez, .animate_text{cursor: pointer;}
 +
 +
.opace{ opacity: 0.8; }
 
</style>
 
</style>
  

Revision as of 23:52, 16 August 2017

O.S.I.R.I.S. OVERVIEW RISK ASSESSEMENT & ANALYSIS INTEGRATED HUMAN PRACTICES PUBLIC ENGAGEMENT