Format:MapCoords: Diferență între versiuni

[versiune verificată][versiune verificată]
Linia 1: Linia 1:
−
<div class="mapContainer">
+
<!-- Format:MapCoords -->
−
     <img src="{{{calea_imaginii}}}" alt="Harta Metin2" id="mapImage">
+
<style>
−
     {{#if: {{{x|}}} | {{#if: {{{y|}}} | <div class="dot" style="left: {{{x}}}px; top: {{{y}}}px;"></div> }} }}
+
    @keyframes pulse {
−
</div>
+
        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 -->
 +
     {{#if: {{{x1|}}}{{{y1|}}} |
 +
    <div class="animated-point" style="top: {{{y1}}}px; left: {{{x1}}}px;"></div>
 +
    }}
  
−
<form id="coordForm">
+
    <!-- Point 2 -->
−
     <label for="xCoord">Coordonata X:</label>
+
     {{#if: {{{x2|}}}{{{y2|}}} |
−
     <input type="number" id="xCoord" name="xCoord" min="0" max="800" required>
+
     <div class="animated-point" style="top: {{{y2}}}px; left: {{{x2}}}px;"></div>
−
    <label for="yCoord">Coordonata Y:</label>
+
     }}
−
    <input type="number" id="yCoord" name="yCoord" min="0" max="600" required>
 
−
    <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 3 -->
−
.mapContainer {
+
    {{#if: {{{x3|}}}{{{y3|}}} |
−
    position: relative;
+
     <div class="animated-point" style="top: {{{y3}}}px; left: {{{x3}}}px;"></div>
−
     width: 100%;
+
     }}
−
    max-width: 800px; /* Lățime maximă pentru imagine */
 
−
     margin: 20px auto;
 
−
}
 
  
−
.dot {
+
     <!-- Point 4 -->
−
     width: 10px;
+
     {{#if: {{{x4|}}}{{{y4|}}} |
−
     height: 10px;
+
     <div class="animated-point" style="top: {{{y4}}}px; left: {{{x4}}}px;"></div>
−
     background-color: red;
+
     }}
−
    border-radius: 50%;
 
−
     position: absolute;
 
−
    transform: translate(-50%, -50%);
 
−
}
 
−
</style>
 
  
−
<script>
+
    <!-- Point 5 -->
−
function addPoint() {
+
    {{#if: {{{x5|}}}{{{y5|}}} |
−
     var x = document.getElementById('xCoord').value;
+
     <div class="animated-point" style="top: {{{y5}}}px; left: {{{x5}}}px;"></div>
−
    var y = document.getElementById('yCoord').value;
+
     }}
−
     var numeHarta = document.getElementById('numeHarta').value;
 
  
−
     var mapImage = document.getElementById('mapImage');
+
     <!-- Point 6 -->
−
     var point = document.getElementById('point');
+
    {{#if: {{{x6|}}}{{{y6|}}} |
 +
     <div class="animated-point" style="top: {{{y6}}}px; left: {{{x6}}}px;"></div>
 +
    }}
  
−
     // Setează calea imaginii în funcție de numele hărții
+
     <!-- Point 7 -->
−
     mapImage.src = 'calea/imaginilor/' + numeHarta + '.jpg';
+
    {{#if: {{{x7|}}}{{{y7|}}} |
 +
     <div class="animated-point" style="top: {{{y7}}}px; left: {{{x7}}}px;"></div>
 +
    }}
  
−
     // Calculează poziția punctului relativ la imagine
+
     <!-- Point 8 -->
−
     var imageWidth = mapImage.width;
+
    {{#if: {{{x8|}}}{{{y8|}}} |
−
     var imageHeight = mapImage.height;
+
     <div class="animated-point" style="top: {{{y8}}}px; left: {{{x8}}}px;"></div>
 +
     }}
  
−
     var posX = (x / 800) * imageWidth; // 800 este lățimea imaginii, ajustați conform necesităților
+
     <!-- Point 9 -->
−
     var posY = (y / 600) * imageHeight; // 600 este înălțimea imaginii, ajustați conform necesităților
+
    {{#if: {{{x9|}}}{{{y9|}}} |
 +
    <div class="animated-point" style="top: {{{y9}}}px; left: {{{x9}}}px;"></div>
 +
     }}
  
−
     // Actualizează poziția punctului
+
     <!-- Point 10 -->
−
     point.style.left = posX + 'px';
+
     {{#if: {{{x10|}}}{{{y10|}}} |
−
     point.style.top = posY + 'px';
+
     <div class="animated-point" style="top: {{{y10}}}px; left: {{{x10}}}px;"></div>
−
    point.style.display = 'block'; // Afișează punctul
+
    }}
−
}
+
</div>
−
</script>
 

Versiunea de la data 16 august 2024 23:18

<style> 

   @keyframes pulse {
       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> 

   <img src="{{{image}}}" alt="Annotated Image" style="width:100%; height:auto;">











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