Merge pull request #1 from JoaoRoccella/feat-resizemap

feat: redimenzionamento do map
JoaoRoccella · Dec 26, 2023 · 26b0222 · 26b0222
2 parents e8bdf46 + 22bbb2b
commit 26b0222
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Demonstração da tag map para imagem, utilizando JavaScript para algumas funcionalidades.">
+    <meta name="description"
+        content="Demonstração da tag map para imagem, utilizando JavaScript para algumas funcionalidades.">
     <meta name="author" content="João Roccella">
     <title>Projeto Carro</title>
     <link rel="stylesheet" href="style.css">
@@ -17,7 +18,8 @@
     <map name="carro-map">
         <area id="area-parabrisa" data-target="parabrisa" title="Pára-brisa"
             coords="363,109,397,245,503,239,604,248,639,108,582,79,501,70,418,80" shape="poly">
-        <area id="area-retrovisor-dir" data-target="retrovisor-dir" title="Retrovisor" coords="889,442,26" shape="circle">
+        <area id="area-retrovisor-dir" data-target="retrovisor-dir" title="Retrovisor" coords="889,442,26"
+            shape="circle">
     </map>
 
     <div id="parabrisa" class="data oculto">
@@ -37,7 +39,11 @@ <h3>Retrovisor</h3>
             nihil sequi dolorem ad unde porro libero ratione sapiente! Nostrum, consequuntur sapiente?</p>
     </div>
 
-    <script src="./script.js"></script>
+    <script src="./scripts/script.js"></script>
+    <script src="./scripts/imageMapResizer.min.js"></script>
+    <script>
+        imageMapResize();
+    </script>
 </body>
 
 </html>
diff --git a/scripts/imageMapResizer.min.js b/scripts/imageMapResizer.min.js
diff --git a/script.js → scripts/script.js b/script.js → scripts/script.js
@@ -3,8 +3,6 @@ document.addEventListener('click', e => {
 
     if (e.target.localName === 'area') {
 
-        console.log(e.target.getAttribute('data-target'));
-
         document.querySelectorAll('div.data').forEach(dataDiv => {
             dataDiv.classList.add('oculto');
         });

diff --git a/style.css b/style.css
@@ -7,6 +7,10 @@
     scroll-behavior: smooth;
 }
 
+img {
+    width: 100%;
+}
+
 .oculto {
     display: none;
 }
@@ -35,8 +39,8 @@ area {
 }
 
 #retrovisor-dir {
-    top: 110px;
-    left: 700px;
+    top: 50%;
+    left: calc(50% - 100px);
 }
 
 .close {