centered image test

EmreT58 · Jan 17, 2024 · af203e6 · af203e6
1 parent dfc6608
commit af203e6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -7,24 +7,12 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <header>
-        <h1>Een Colombiaans Reisverhaal</h1>
-        <p>Coffeeshop La Tienda</p>
-    </header>
     <main>
-        <div id="container">
-            <img id="outsideImage" src="images/buiten-ss.png" alt="Outside of the Building" usemap="#doorMap" onclick="goInside()">
-            <img id="insideImage" src="images/binnen-ss.png" alt="Inside of the Building" style="display: none;">
+        <div id="image-container">
+            <img id="buitenkant" src="images/buiten-ss.png" alt="">
         </div>
-
-        <!-- Define the map for the door on the outside image -->
-        <map name="doorMap">
-            <area shape="rect" coords="1013,680,925,567" alt="Click to enter the building" onclick="goInside()">
-        </map>
     </main>
-    <footer>
-        <p>FOOTER</p>
-    </footer>
     <script src="script.js"></script>
 </body>
-</html>
+</html>
+
diff --git a/script.js b/script.js
@@ -1,7 +1,17 @@
-function goInside() {
-    // Hide the outside image
-    document.getElementById('outsideImage').style.display = 'none';
-
-    // Show the inside image
-    document.getElementById('insideImage').style.display = 'block';
-}
+window.onload = function() {
+    // Get the dimensions of the image and the viewport
+    var image = document.getElementById('buitenkant'); // Replace 'yourImageId' with the actual ID of your image
+    var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+
+    // Calculate the scroll position to center the image
+    var scrollX = (image.width - viewportWidth) / 2;
+    var scrollY = (image.height - viewportHeight) / 2;
+
+    // Scroll to the calculated position, considering the mobile browser quirks
+    window.scrollTo({
+      top: scrollY,
+      left: scrollX,
+      behavior: 'smooth' // You can adjust this to 'auto' or 'instant' based on your preference
+    });
+  };
diff --git a/style.css b/style.css
@@ -1,44 +1,15 @@
 html {
     margin: 0;
     padding: 0;
-    /* box-sizing: border-box; */
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    /* box-sizing: border-box; */
 }
 body {
-    background-color: aliceblue;
-    height: auto;
     width: 100%;
+    height: 100vh;
 }
-header {
-    border: 1px solid red;
-}
-
 /* ================================================================= */
-
-main {
-    border: 1px solid green;
-}
-#container {
-    position: relative;
-}
-
 img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: auto;
-}
-area {
-    outline: 2px solid red; /* Change the color and style as needed */
-}
-
-area:hover {
-    background-color: rgba(255, 0, 0, 0.2); /* Change the color and transparency as needed */
-}
-area {
-    cursor: pointer;
-}
-/* ================================================================= */
-footer {
-    border: 1px solid blue;
+    width: 500%;
+    border: 1px solid red;
 }