Main Page: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
# | |||
#images-holder | |||
{ | |||
overflow: hidden; | |||
width: 800px; | |||
height: 450px; | |||
position: relative; | |||
display: block; | |||
background-color: black; | |||
} | |||
#images-slider | |||
{ | |||
z-index: 1; | |||
right: 0px; | |||
width: 100%; | |||
height: 100%; | |||
position: relative; | |||
} | |||
.image-slot | |||
{ | |||
-moz-transition: all 1s ease-in; | |||
-webkit-transition: all 1s ease-in; | |||
-o-transition: all 1s ease-in; | |||
-ms-transform: all 1s ease-in; | |||
transition: all 1s ease-in; | |||
-webkit-transform: translateZ(0); | |||
-moz-transform: translateZ(0); | |||
-ms-transform: translateZ(0); | |||
-o-transform: translateZ(0); | |||
transform: translateZ(0); | |||
width: 100%; | |||
height: 100%; | |||
background-color: black; | |||
position: absolute; | |||
margin-left: 0%; | |||
opacity: 0; | |||
} | |||
.images{ | |||
margin: auto; | |||
height: 100% | |||
} | |||
#slot1 | |||
{ | |||
opacity: 1; | |||
} | |||
.button | |||
{ | |||
z-index: 2; | |||
width: 60px; | |||
height: 80px; | |||
position: absolute; | |||
background: rgba(0,0,0,0.75); | |||
opacity: 0; | |||
-moz-transition: opacity .4s; | |||
-webkit-transition: opacity .4s; | |||
transition: opacity .4s; | |||
top: 40%; | |||
text-align: center; | |||
line-height: 60px; | |||
cursor: pointer; | |||
} | |||
#images-holder:hover .button | |||
{ | |||
opacity: 1; | |||
} | |||
.button:hover .arrow{ | |||
color: #880000; | |||
} | |||
.next | |||
{ | |||
right: 0px; | |||
} | |||
.previous | |||
{ | |||
left: 0px; | |||
} | |||
.arrow{ | |||
color: #dddddd; | |||
font-size: 100pt; | |||
-webkit-touch-callout: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
user-select: none; | |||
display: inline-block; | |||
} | |||
.caption{ | |||
position: absolute; | |||
color: #dddddd; | |||
font-size: 14pt; | |||
-webkit-touch-callout: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
user-select: none; | |||
bottom: 0px; | |||
width: 100%; | |||
left: 0px; | |||
background-color: rgba(0,0,0,0.75); | |||
text-align: left; | |||
box-sizing: border-box; | |||
line-height: 120%; | |||
padding: 6px 12px; | |||
} | |||
.notransition{ | |||
-moz-transition: none !important; | |||
-webkit-transition: none !important; | |||
-o-transition: none !important; | |||
-ms-transform: none !important; | |||
transition: none !important; | |||
} | |||
.nav-holder{ | |||
position: absolute; | |||
top: 0px; | |||
right: 0px; | |||
z-index: 3; | |||
padding: 2px; | |||
font-size: 0px; | |||
line-height: 0px; | |||
background-color: rgba(0,0,0,0.75); | |||
border-radius: 7px; | |||
} | |||
.navigation{ | |||
width: 10px; | |||
height: 10px; | |||
border-radius: 50%; | |||
bottom: 10%; | |||
display: inline-block; | |||
background: #dddddd; | |||
margin: 2px; | |||
cursor: pointer; | |||
} | |||
.navigation:hover{ | |||
background: #880000 !important; | |||
} | |||
#dot-1{ | |||
/*left: 80%;*/ | |||
background: #880000; | |||
} | } | ||
</style> | </style> | ||
<script> | |||
var mousetime = false; | |||
var number_of_slots = 5 | |||
var timer = window.setTimeout(image_fade_forward, 6000); | |||
var which_slot_vis = 1; | |||
function image_fade_forward(){ | |||
if(which_slot_vis == number_of_slots){ | |||
update("slot1", "slot" + which_slot_vis.toString(), "dot-1", "dot-" + which_slot_vis.toString()) | |||
which_slot_vis = 1 | |||
update_link(which_slot_vis); | |||
}else{ | |||
update("slot" + (which_slot_vis+1).toString(), "slot" + which_slot_vis.toString(), "dot-" + (which_slot_vis+1).toString(), "dot-" + which_slot_vis.toString()) | |||
which_slot_vis ++; | |||
update_link(which_slot_vis); | |||
} | |||
if( !mousetime){ | |||
notMouseTime() | |||
} | |||
} | |||
function image_fade_back(){ | |||
if(which_slot_vis == 1){ | |||
update("slot" + number_of_slots.toString(), "slot1", "dot-" + number_of_slots.toString(), "dot-1") | |||
which_slot_vis = number_of_slots | |||
update_link(which_slot_vis); | |||
}else{ | |||
update("slot" + (which_slot_vis-1).toString(), "slot" + which_slot_vis.toString(),"dot-" + (which_slot_vis-1).toString(), "dot-" + which_slot_vis.toString()) | |||
which_slot_vis --; | |||
update_link(which_slot_vis); | |||
} | |||
if( !mousetime){ | |||
notMouseTime() | |||
} | |||
} | |||
function nav_image_fade(clicked_id){ | |||
just_clicked = clicked_id.substr(clicked_id.length - 1); | |||
if (just_clicked != which_slot_vis){ | |||
update("slot" + just_clicked, "slot" + (which_slot_vis).toString(),"dot-" + just_clicked, "dot-" + (which_slot_vis).toString()) | |||
which_slot_vis = parseInt(just_clicked) | |||
update_link(which_slot_vis); | |||
} | |||
if( !mousetime){ | |||
notMouseTime() | |||
} | |||
} | |||
function update_link(visible){ | |||
if(visible == 1){ | |||
linkUpdate("http://energyeducation.ca/encyclopedia/Electrical_generation") | |||
}else if(visible==2){ | |||
linkUpdate("http://energyeducation.ca/encyclopedia/Environmental_impact") | |||
}else if(visible==3){ | |||
linkUpdate("http://www.energyeducation.ca/encyclopedia/End_use_energy") | |||
}else if(visible==4){ | |||
linkUpdate("http://energyeducation.ca/encyclopedia/Total_final_consumption") | |||
}else if(visible==5){ | |||
linkUpdate("http://energyeducation.ca/encyclopedia/Reserve") | |||
} | |||
} | |||
function update(nextView, presentView, nextDot, presentDot){ | |||
document.getElementById(nextView).classList.add('notransition'); | |||
document.getElementById(nextView).style.opacity = 1 | |||
document.getElementById(nextView).classList.remove('notransition'); | |||
document.getElementById(presentView).style.opacity = 0 | |||
document.getElementById(nextDot).style.background = '#880000' | |||
document.getElementById(presentDot).style.background = '#dddddd' | |||
} | |||
function linkUpdate(link){ | |||
document.getElementById('imagelink').href = link | |||
} | |||
function notMouseTime(){ | |||
timer = window.setTimeout(image_fade_forward, 6000); | |||
mousetime = false; | |||
} | |||
function mouseTimeReset(){ | |||
timer = window.setTimeout(image_fade_forward, 6000); | |||
mousetime = false; | |||
} | |||
function mouseTimePause(){ | |||
window.clearTimeout(timer); | |||
mousetime = true | |||
} | |||
</script> | |||
<center> | |||
<div id="images-holder" onmouseover = "mouseTimePause()" onmouseout = "mouseTimeReset()"> | |||
<div class = "button next" id="next-button-1" onclick="image_fade_forward()"> | |||
<span class="arrow"> ›</span> | |||
</div> | |||
<div class = "button previous" id="previous-button-1" onclick="image_fade_back()"> | |||
<span class= "arrow">‹</span> | |||
</div> | |||
<div class = "nav-holder"> | |||
<div class = "navigation" id = "dot-1" onClick="nav_image_fade(this.id)"></div> | |||
<div class = "navigation" id = "dot-2" onClick="nav_image_fade(this.id)"></div> | |||
<div class = "navigation" id = "dot-3" onClick="nav_image_fade(this.id)"></div> | |||
<div class = "navigation" id = "dot-4" onClick="nav_image_fade(this.id)"></div> | |||
<div class = "navigation" id = "dot-5" onClick="nav_image_fade(this.id)"></div> | |||
</div> | |||
<div id="images-slider"> | |||
<a id = "imagelink"> | |||
<div class="image-slot" id="slot1"> | |||
<img src = "http://energyeducation.ca/wiki2develop/images/e/ee/SlideImage1.jpg" id="image1" class="images" /> | |||
<div class = "caption" id="cap1"><center>Electricity comes from different sources. Where does your country's electricity come from?</center></div> | |||
</div> | |||
<div class="image-slot" id="slot2"> | |||
<img src="http://energyeducation.ca/wiki2develop/images/9/92/SlideImage2.jpg" id="image2" class="images" /> | |||
<div class = "caption" id="cap2"><center>Energy use impacts the environment. Are these impacts getting better or worse?</center></div> | |||
</div> | |||
<div class="image-slot" id="slot3"> | |||
<img src="http://energyeducation.ca/wiki2develop/images/8/81/SlideImage3.jpg" id="image3" class="images" /> | |||
<div class = "caption" id="cap3"><center>Consumers use different forms of energy for services. What forms are used in your country?</center></div> | |||
</div> | |||
<div class="image-slot" id="slot4"> | |||
<img src="http://energyeducation.ca/wiki2develop/images/9/9f/SlideImage4.jpg" id="image4" class="images" /> | |||
<div class = "caption" id="cap4"><center>Different sectors require different energy. What uses the most energy in your country?</center></div> | |||
</div> | |||
<div class="image-slot" id="slot5"> | |||
<img src="http://energyeducation.ca/wiki2develop/images/8/8d/SlideImage5.jpg" id="image5" class="images" /> | |||
<div class = "caption" id="cap5"><center>We've been using fossil fuels for hundreds of years. When will we run out?</center></div> | |||
</div> | |||
</div> | |||
</a> | |||
</div> | |||
</center> | |||
<script> | |||
document.getElementById('imagelink').href = "http://energyeducation.ca/encyclopedia/Electrical_generation"; | |||
</script> | |||
</html> |