Difference between revisions of "Team:Greece/our team"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
  <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">
 
</head>
 
</head>
 
<body>
 
<body>
Line 25: Line 25:
 
</nav>
 
</nav>
 
                 </div>
 
                 </div>
 +
 +
 +
<svg width="100%" height="300" viewBox="0 0 400 400"><!--min-x, min-y, width, height-->
 +
<script role='Interactivity'>
 +
console.log('This is interactivity script');
 +
 +
function changeStroke(id){
 +
//Add boldStroke
 +
$('#'+id).addClass('boldStroke');
 +
//Make cursor as a pointer
 +
$('#'+id).css( 'cursor', 'pointer' );
 +
}
 +
function removeStroke(id){ $('#'+id).removeClass('boldStroke'); }
 +
 +
function displayProfile(id){
 +
//Display profile
 +
void(document.getElementById('profile').src = id+'.jpg');
 +
void(document.getElementById('details').innerText = document.getElementById('desc_'+id).value);
 +
void(document.getElementById('profile').style.visibility = 'visible');
 +
}
 +
</script>
 +
 +
<defs>
 +
<pattern id="Image" x="0%" y="0%" patternUnits="userSpaceOnUse" height="100%" width="100%">
 +
  <image width='50%' height='40%' x="0" y="0" href="me.jpg"></image>
 +
</pattern>
 +
 +
<pattern id="Image2" x="0%" y="0%" patternUnits="userSpaceOnUse" height="100%" width="100%">
 +
<image width='50%' height='40%' x="160" y="-50" href="me2.jpg"></image>
 +
</pattern>
 +
 +
<pattern id="Image3" x="0%" y="0%" patternUnits="userSpaceOnUse" height="100%" width="100%">
 +
<image width='50%' height='40%' x="105" y="125" href="me2.jpg"></image>
 +
</pattern>
 +
</defs>
 +
 +
<circle cx="50" cy="100" r="35" stroke="green" stroke-width="2" fill="url(#Image)" id='circle1' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)'/>
 +
 +
<line x1="85" y1="85" x2="172" y2="55" stroke-width="4" stroke="red" />
 +
<line x1="87" y1="95" x2="175" y2="65" stroke-width="4" stroke="red" />
 +
 +
<circle cx="160" cy="220" r="35" stroke="green" stroke-width="2" fill="url(#Image2)" id='circle2' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
 +
 +
<line x1="74" y1="124" x2="137" y2="189" stroke-width="4" stroke="red" />
 +
<line x1="67" y1="131" x2="128" y2="195" stroke-width="4" stroke="red" />
 +
 +
<circle cx="210" cy="51" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle3' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
 +
 +
<line x1="193" y1="208" x2="260" y2="180" stroke-width="4" stroke="red" />
 +
 +
<circle cx="295" cy="170" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle4' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
 +
 +
<line x1="325" y1="187" x2="420" y2="230" stroke-width="4" stroke="red" />
 +
 +
<circle cx="450" cy="250" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle5' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
 +
 +
<line x1="320" y1="145" x2="400" y2="100" stroke-width="4" stroke="red" />
 +
 +
<circle cx="433" cy="83" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle6' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
 +
 +
<line x1="125" y1="234" x2="48" y2="273" stroke-width="4" stroke="red" />
 +
<line x1="130" y1="244" x2="57" y2="282" stroke-width="4" stroke="red" />
 +
<line x1="140" y1="253" x2="63" y2="293" stroke-width="4" stroke="red" />
 +
 +
<circle cx="27" cy="305" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle7' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
 +
 +
</svg>
 +
 +
  
 
<!-- The Navigation Menu -->
 
<!-- The Navigation Menu -->

Revision as of 22:19, 4 August 2017