interaction

3 files changed, 57 insertions, 9 deletions

diff --git a/index.html b/index.html
index 9dd83436..77b5f9d4 100644
--- a/index.html
+++ b/index.html
@@ -48,9 +48,11 @@
           <li>Copying password to clipboard</li>
           <li>Hiding of password agains shouldersurfing</li>
 		  <li>Tested on Linux and <a href="https://annejan.com/media/qtpass.dmg">OSX</a></li>
-        </ul>   
-        <img src="images/qtpass.png" alt="QtPass alpha" />
-        <img src="images/config.png" alt="QtPass alpha configuration" />
+        </ul>
+        <div class="screenshots">   
+        	<img id="qtpass" src="images/qtpass.png" alt="QtPass alpha" />
+        	<img id="config" class="hidden" src="images/config.png" alt="QtPass alpha configuration" />
+        </div>
       </section>
     </div>
 
@@ -63,6 +65,6 @@
     </div>
 
     
-
+	<script src="javascripts/main.js"></script>
   </body>
 </html>
diff --git a/javascripts/main.js b/javascripts/main.js
index d8135d37..be32e6ec 100644
--- a/javascripts/main.js
+++ b/javascripts/main.js
@@ -1 +1,23 @@
-console.log('This would be the main JS file.');
+window.onload = init;
+ 
+function init()
+{
+	var config = document.getElementById('config');
+	var qtpass = document.getElementById('qtpass');
+
+    qtpass.onclick = function()
+    {
+        
+        if (config.classList.contains('hidden')) {
+        	config.classList.remove('hidden');
+        } else {
+        	config.classList.add('hidden');
+        }
+    }
+    
+    config.onclick = function()
+    {
+    	config.classList.add('hidden');
+    }
+}
+ 
\ No newline at end of file
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index ed1d2376..1eb29c2b 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -139,15 +139,14 @@ img {
   max-width: 739px;
   padding: 5px;
   margin: 10px 0 10px 0;
- /* 
- border: 1px solid #ebebeb;
-
+/*
+  border: 1px solid #ebebeb;
   box-shadow: 0 0 5px #ebebeb;
   -webkit-box-shadow: 0 0 5px #ebebeb;
   -moz-box-shadow: 0 0 5px #ebebeb;
   -o-box-shadow: 0 0 5px #ebebeb;
   -ms-box-shadow: 0 0 5px #ebebeb;
- */
+*/
 }
 
 p img {
@@ -423,3 +422,28 @@ Small Device Styles
   }
 
 }
+
+
+/*********************
+   Anne Jan Brouwer
+*********************/
+
+.hidden {
+	display: none;
+}
+
+.screenshots {
+	position: relative;
+	height: 520px;
+}
+
+.screenshots img {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+}
+
+#config {
+	top: -30px;
+	left: 30px;
+}
\ No newline at end of file