Arama kutucuğunda ekrana getirme

06-06-2023, 00:51:50

Kimlik doğrulama veya yönetimden onay bekliyor.

Arkadaşlar selamlar. Basit bir anlatım ile arama kutucuğuna girdiğim herhangi bir rakam veya bir kelimeye istinaden arka planda tanımladığım resimi veya yazıyı popup olarak ekrana getirmesini istiyorum.

Örnek : 195878 veya Aytaç yazınca ekrana popup olarak fotoğrafımın gelmesini istiyorum. Bunu php veya html olarak nasıl yaparız?

06-06-2023, 00:54:32

#2

~~Emirkirax~~

Üyeliği durduruldu

<!DOCTYPE html>
<html>
<head>
  <title>Popup Örneği</title>
  <style>
    .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border: 1px solid black;
      border-radius: 5px;
      z-index: 9999;
    }
  </style>
</head>
<body>
  <input type="text" id="searchInput" placeholder="Arama yapın">
  
  <div id="popup" class="popup">
    <img id="popupImage" src="" alt="Popup Resim">
    <p id="popupText"></p>
  </div>

  <script>
    var popup = document.getElementById("popup");
    var popupImage = document.getElementById("popupImage");
    var popupText = document.getElementById("popupText");
    var searchInput = document.getElementById("searchInput");
    
    searchInput.addEventListener("keyup", function(event) {
      if (event.keyCode === 13) { // Enter tuşuna basıldığında
        event.preventDefault();
        showPopup();
      }
    });
    
    function showPopup() {
      var searchText = searchInput.value;
      if (searchText === "195878") {
        popupImage.src = "link_to_image.jpg"; // Resim URL'sini buraya girin
        popupText.textContent = ""; // İsterseniz bir metin de ekleyebilirsiniz
        popup.style.display = "block";
      } else if (searchText === "Aytaç") {
        popupImage.src = "link_to_image.jpg";
        popupText.textContent = ""; // İsterseniz bir metin de ekleyebilirsiniz
        popup.style.display = "block";
      } else {
        popup.style.display = "none";
      }
    }
  </script>
</body>
</html>

06-06-2023, 01:02:23

#3

Aytacgogu

teşekkür ederim hocam

06-06-2023, 01:02:54

#4

~~Emirkirax~~

Üyeliği durduruldu

Aytacgogu adlı üyeden alıntı: mesajı görüntüle

teşekkür ederim hocam

rica ederim e demek

06-06-2023, 01:21:07