Format:MapCoords: Diferență între versiuni

[versiune verificată][versiune verificată]
 
(Nu s-au afișat 106 versiuni intermediare efectuate de alți 3 utilizatori)
Linia 1: Linia 1:
−
<!-- Format:MapCoords -->
+
<div style="display: inline-block; position: relative;"> <!-- Centering and relative positioning -->
−
<style>
+
    <!-- Original wiki-style image format -->
−
    @keyframes pulse {
+
     [[{{{image}}}|thumb]]
−
        0% {
 
−
            transform: scale(1);
 
−
            opacity: 1;
 
−
        }
 
−
        50% {
 
−
            transform: scale(1.5);
 
−
            opacity: 0.5;
 
−
        }
 
−
        100% {
 
−
            transform: scale(1);
 
−
            opacity: 1;
 
−
        }
 
−
    }
 
−
    .animated-point {
 
−
        width: 10px;
 
−
        height: 10px;
 
−
        background-color: red;
 
−
        border-radius: 50%;
 
−
        position: absolute;
 
−
        animation: pulse 1.5s infinite;
 
−
    }
 
−
</style>
 
−
 
 
−
<div style="position: relative; display: inline-block;">
 
−
     <img src="{{{image}}}" alt="Annotated Image" style="width:100%; height:auto;">
 
  
 
     <!-- Point 1 -->
 
     <!-- Point 1 -->
 
     {{#if: {{{x1|}}}{{{y1|}}} |
 
     {{#if: {{{x1|}}}{{{y1|}}} |
−
    <div class="animated-point" style="top: {{{y1}}}px; left: {{{x1}}}px;"></div>
+
      {{#ifexpr: {{{width}}}>300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y1}}}px * 300/{{{width}}}); left: calc(37px + {{{x1}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y1}}}px); left: calc(37px + {{{x1}}}px);"></div>
 +
      }}
 
     }}
 
     }}
  
 
     <!-- Point 2 -->
 
     <!-- Point 2 -->
 
     {{#if: {{{x2|}}}{{{y2|}}} |
 
     {{#if: {{{x2|}}}{{{y2|}}} |
−
    <div class="animated-point" style="top: {{{y2}}}px; left: {{{x2}}}px;"></div>
+
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y2}}}px * 300/{{{width}}}); left: calc(37px + {{{x2}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y2}}}px); left: calc(37px + {{{x2}}}px);"></div>
 +
      }}
 
     }}
 
     }}
−
 
 
     <!-- Point 3 -->
 
     <!-- Point 3 -->
 
     {{#if: {{{x3|}}}{{{y3|}}} |
 
     {{#if: {{{x3|}}}{{{y3|}}} |
−
    <div class="animated-point" style="top: {{{y3}}}px; left: {{{x3}}}px;"></div>
+
      {{#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 -->
 
     <!-- Point 4 -->
 
     {{#if: {{{x4|}}}{{{y4|}}} |
 
     {{#if: {{{x4|}}}{{{y4|}}} |
−
    <div class="animated-point" style="top: {{{y4}}}px; left: {{{x4}}}px;"></div>
+
      {{#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>
 +
      }}
 
     }}
 
     }}
−
 
+
        <!-- Point 5 -->
−
    <!-- Point 5 -->
 
 
     {{#if: {{{x5|}}}{{{y5|}}} |
 
     {{#if: {{{x5|}}}{{{y5|}}} |
−
    <div class="animated-point" style="top: {{{y5}}}px; left: {{{x5}}}px;"></div>
+
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y5}}}px * 300/{{{width}}}); left: calc(37px + {{{x5}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y5}}}px); left: calc(37px + {{{x5}}}px);"></div>
 +
      }}
 
     }}
 
     }}
−
 
+
        <!-- Point 6 -->
−
    <!-- Point 6 -->
 
 
     {{#if: {{{x6|}}}{{{y6|}}} |
 
     {{#if: {{{x6|}}}{{{y6|}}} |
−
    <div class="animated-point" style="top: {{{y6}}}px; left: {{{x6}}}px;"></div>
+
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y6}}}px * 300/{{{width}}}); left: calc(37px + {{{x6}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y6}}}px); left: calc(37px + {{{x6}}}px);"></div>
 +
      }}
 
     }}
 
     }}
−
 
+
            <!-- Point 7 -->
−
    <!-- Point 7 -->
 
 
     {{#if: {{{x7|}}}{{{y7|}}} |
 
     {{#if: {{{x7|}}}{{{y7|}}} |
−
    <div class="animated-point" style="top: {{{y7}}}px; left: {{{x7}}}px;"></div>
+
      {{#ifexpr: {{{width}}} > 300
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y7}}}px * 300/{{{width}}}); left: calc(37px + {{{x7}}}px * 300/{{{width}}});"></div>
 +
        |<div class="animated-point" style="position: absolute; top: calc(7px + {{{y7}}}px); left: calc(37px + {{{x7}}}px);"></div>
 +
      }}
 
     }}
 
     }}
−
 
+
            <!-- Point 8 -->
−
    <!-- Point 8 -->
 
 
     {{#if: {{{x8|}}}{{{y8|}}} |
 
     {{#if: {{{x8|}}}{{{y8|}}} |
−
    <div class="animated-point" style="top: {{{y8}}}px; left: {{{x8}}}px;"></div>
+
      {{#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 -->
−
    <!-- Point 9 -->
 
 
     {{#if: {{{x9|}}}{{{y9|}}} |
 
     {{#if: {{{x9|}}}{{{y9|}}} |
−
    <div class="animated-point" style="top: {{{y9}}}px; left: {{{x9}}}px;"></div>
+
      {{#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 -->
−
    <!-- Point 10 -->
 
 
     {{#if: {{{x10|}}}{{{y10|}}} |
 
     {{#if: {{{x10|}}}{{{y10|}}} |
−
    <div class="animated-point" style="top: {{{y10}}}px; left: {{{x10}}}px;"></div>
+
      {{#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>
 
</div>

Versiunea curentă din 20 ianuarie 2025 10:19

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









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