Format:MapCoords: Diferență între versiuni

[versiune verificată][versiune verificată]
(Pagină nouă: <div class="mapContainer"> <img src="calea/imaginii/harta.jpg" alt="Harta Metin2" id="mapImage"> {{#if: {{{x|}}} | {{#if: {{{y|}}} | <div class="dot" style="left: {{{x}}}px...)
 
 
(Nu s-au afișat 105 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/harta.jpg" 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>
 
  
<style>
+
    <!-- Point 1 -->
.mapContainer {
+
    {{#if: {{{x1|}}}{{{y1|}}} |
    position: relative;
+
      {{#ifexpr: {{{width}}}>300
    width: 100%;
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y1}}}px * 300/{{{width}}}); left: calc(37px + {{{x1}}}px * 300/{{{width}}});"></div>
    max-width: 800px; /* Lățime maximă pentru imagine */
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y1}}}px); left: calc(37px + {{{x1}}}px);"></div>
     margin: 20px auto;
+
      }}
}
+
     }}
  
.dot {
+
    <!-- Point 2 -->
    width: 10px;
+
    {{#if: {{{x2|}}}{{{y2|}}} |
    height: 10px;
+
      {{#ifexpr: {{{width}}} > 300
     background-color: red;
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y2}}}px * 300/{{{width}}}); left: calc(37px + {{{x2}}}px * 300/{{{width}}});"></div>
    border-radius: 50%;
+
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y2}}}px); left: calc(37px + {{{x2}}}px);"></div>
     position: absolute;
+
      }}
    transform: translate(-50%, -50%);
+
    }}
}
+
    <!-- Point 3 -->
</style>
+
     {{#if: {{{x3|}}}{{{y3|}}} |
 +
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y3}}}px * 300/{{{width}}}); left: calc(37px + {{{x3}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y3}}}px); left: calc(37px + {{{x3}}}px);"></div>
 +
      }}
 +
     }}
 +
    <!-- Point 4 -->
 +
    {{#if: {{{x4|}}}{{{y4|}}} |
 +
      {{#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>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y4}}}px); left: calc(37px + {{{x4}}}px);"></div>
 +
      }}
 +
    }}
 +
</div>

Versiunea curentă din 13 noiembrie 2024 14:22

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