Format:MapCoords: Diferență între versiuni

[versiune verificată][versiune verificată]
 
(Nu s-au afișat 107 versiuni intermediare efectuate de alți 3 utilizatori)
Linia 1: Linia 1:
−
<div class="mapContainer">
+
<div style="display: inline-block; position: relative;"> <!-- Centering and relative positioning -->
−
     <img src="{{{calea_imaginii}}}" alt="Harta Metin2" id="mapImage">
+
     <!-- Original wiki-style image format -->
−
     {{#if: {{{x|}}} | {{#if: {{{y|}}} | <div class="dot" style="left: {{{x}}}px; top: {{{y}}}px;"></div> }} }}
+
     [[{{{image}}}|thumb]]
−
</div>
 
  
−
<form id="coordForm">
+
    <!-- Point 1 -->
−
     <label for="xCoord">Coordonata X:</label>
+
     {{#if: {{{x1|}}}{{{y1|}}} |
−
    <input type="number" id="xCoord" name="xCoord" min="0" max="800" required>
+
      {{#ifexpr: {{{width}}}>300
−
    <label for="yCoord">Coordonata Y:</label>
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y1}}}px * 300/{{{width}}}); left: calc(37px + {{{x1}}}px * 300/{{{width}}});"></div>
−
    <input type="number" id="yCoord" name="yCoord" min="0" max="600" required>
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y1}}}px); left: calc(37px + {{{x1}}}px);"></div>
−
    <label for="numeHarta">Numele Hărții:</label>
+
      }}
−
    <input type="text" id="numeHarta" name="numeHarta" required>
+
    }}
−
    <button type="button" onclick="addPoint()">Adaugă Punctul</button>
 
−
</form>
 
  
−
<style>
+
    <!-- Point 2 -->
−
.mapContainer {
+
    {{#if: {{{x2|}}}{{{y2|}}} |
−
    position: relative;
+
      {{#ifexpr: {{{width}}} > 300
−
    width: 100%;
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y2}}}px * 300/{{{width}}}); left: calc(37px + {{{x2}}}px * 300/{{{width}}});"></div>
−
     max-width: 800px; /* Lățime maximă pentru imagine */
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y2}}}px); left: calc(37px + {{{x2}}}px);"></div>
−
    margin: 20px auto;
+
      }}
−
}
+
    }}
−
 
+
     <!-- Point 3 -->
−
.dot {
+
    {{#if: {{{x3|}}}{{{y3|}}} |
−
    width: 10px;
+
      {{#ifexpr: {{{width}}} > 300
−
    height: 10px;
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y3}}}px * 300/{{{width}}}); left: calc(37px + {{{x3}}}px * 300/{{{width}}});"></div>
−
     background-color: red;
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y3}}}px); left: calc(37px + {{{x3}}}px);"></div>
−
    border-radius: 50%;
+
      }}
−
     position: absolute;
+
    }}
−
    transform: translate(-50%, -50%);
+
    <!-- Point 4 -->
−
}
+
    {{#if: {{{x4|}}}{{{y4|}}} |
−
</style>
+
      {{#ifexpr: {{{width}}} > 300
−
 
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y4}}}px * 300/{{{width}}}); left: calc(37px + {{{x4}}}px * 300/{{{width}}});"></div>
−
<script>
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y4}}}px); left: calc(37px + {{{x4}}}px);"></div>
−
function addPoint() {
+
      }}
−
    var x = document.getElementById('xCoord').value;
+
    }}
−
     var y = document.getElementById('yCoord').value;
+
        <!-- Point 5 -->
−
    var numeHarta = document.getElementById('numeHarta').value;
+
     {{#if: {{{x5|}}}{{{y5|}}} |
−
 
+
      {{#ifexpr: {{{width}}} > 300
−
     var mapImage = document.getElementById('mapImage');
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y5}}}px * 300/{{{width}}}); left: calc(37px + {{{x5}}}px * 300/{{{width}}});"></div>
−
    var point = document.getElementById('point');
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y5}}}px); left: calc(37px + {{{x5}}}px);"></div>
−
 
+
      }}
−
     // Setează calea imaginii în funcție de numele hărții
+
     }}
−
     mapImage.src = 'calea/imaginilor/' + numeHarta + '.jpg';
+
        <!-- Point 6 -->
−
 
+
    {{#if: {{{x6|}}}{{{y6|}}} |
−
     // Calculează poziția punctului relativ la imagine
+
      {{#ifexpr: {{{width}}} > 300
−
     var imageWidth = mapImage.width;
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y6}}}px * 300/{{{width}}}); left: calc(37px + {{{x6}}}px * 300/{{{width}}});"></div>
−
    var imageHeight = mapImage.height;
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y6}}}px); left: calc(37px + {{{x6}}}px);"></div>
−
 
+
      }}
−
     var posX = (x / 800) * imageWidth; // 800 este lățimea imaginii, ajustați conform necesităților
+
    }}
−
     var posY = (y / 600) * imageHeight; // 600 este înălțimea imaginii, ajustați conform necesităților
+
            <!-- Point 7 -->
−
 
+
    {{#if: {{{x7|}}}{{{y7|}}} |
−
     // Actualizează poziția punctului
+
      {{#ifexpr: {{{width}}} > 300
−
    point.style.left = posX + 'px';
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y7}}}px * 300/{{{width}}}); left: calc(37px + {{{x7}}}px * 300/{{{width}}});"></div>
−
     point.style.top = posY + 'px';
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y7}}}px); left: calc(37px + {{{x7}}}px);"></div>
−
    point.style.display = 'block'; // Afișează punctul
+
      }}
−
}
+
     }}
−
</script>
+
            <!-- Point 8 -->
 +
    {{#if: {{{x8|}}}{{{y8|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y8}}}px * 300/{{{width}}}); left: calc(37px + {{{x8}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y8}}}px); left: calc(37px + {{{x8}}}px);"></div>
 +
      }}
 +
    }}
 +
            <!-- Point 9 -->
 +
     {{#if: {{{x9|}}}{{{y9|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y9}}}px * 300/{{{width}}}); left: calc(37px + {{{x9}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y9}}}px); left: calc(37px + {{{x9}}}px);"></div>
 +
      }}
 +
     }}
 +
            <!-- Point 10 -->
 +
     {{#if: {{{x10|}}}{{{y10|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y10}}}px * 300/{{{width}}}); left: calc(37px + {{{x10}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y10}}}px); left: calc(37px + {{{x10}}}px);"></div>
 +
      }}
 +
     }}
 +
                <!-- Point 11 -->
 +
     {{#if: {{{x11|}}}{{{y11|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y11}}}px * 300/{{{width}}}); left: calc(37px + {{{x11}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y11}}}px); left: calc(37px + {{{x11}}}px);"></div>
 +
      }}
 +
    }}
 +
                <!-- Point 12 -->
 +
     {{#if: {{{x12|}}}{{{y12|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y12}}}px * 300/{{{width}}}); left: calc(37px + {{{x12}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y12}}}px); left: calc(37px + {{{x12}}}px);"></div>
 +
      }}
 +
     }}
 +
                    <!-- Point 13 -->
 +
    {{#if: {{{x13|}}}{{{y13|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y13}}}px * 300/{{{width}}}); left: calc(37px + {{{x13}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y13}}}px); left: calc(37px + {{{x13}}}px);"></div>
 +
      }}
 +
    }}
 +
                    <!-- Point 14 -->
 +
     {{#if: {{{x14|}}}{{{y14|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y14}}}px * 300/{{{width}}}); left: calc(37px + {{{x14}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y14}}}px); left: calc(37px + {{{x14}}}px);"></div>
 +
      }}
 +
     }}
 +
                    <!-- Point 15 -->
 +
    {{#if: {{{x15|}}}{{{y15|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y15}}}px * 300/{{{width}}}); left: calc(37px + {{{x15}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y15}}}px); left: calc(37px + {{{x15}}}px);"></div>
 +
      }}
 +
    }}
 +
</div>

Versiunea curentă din 20 ianuarie 2025 11:19

   [[{{{image}}}|thumb]]









Adus de la „https://ro-wiki.metin2.gameforge.com/index.php?title=Format:MapCoords&oldid=63991”