Bu JavaScript tekniği, araç ipuçları ve görüntü haritaları dahil olmak üzere birçok efekt için kullanılabilir.

Etkileşimli web siteleri, kullanıcılar için daha ilgi çekici bir deneyim sağlayabilir. Animasyonlar, araç ipuçları veya başka ekstra efektler eklemek gibi bir web sitesini daha etkileşimli hale getirmenin birçok yolu vardır.

Bazı web siteleri, kullanıcı fareyle sayfadaki bir öğenin üzerine geldiğinde de bilgi görüntüler. Bu, kullanıcının bir araç ipucu kullanarak bir veri noktasını görüntülemek için görüntünün üzerine gelmesine izin veren haritaları veya diğer görsel verileri içerir.

Belirli CSS tekniklerini ve JavaScript DOM kavramlarını kullanarak HTML, CSS ve JavaScript kullanarak bu etkiyi elde edebilirsiniz.

Resimler, bilgileri bir web sayfasında görsel olarak çekici bir şekilde iletmenin yararlı bir yolu olabilir. gibi başka ilgi çekici efektler eklemek için de yararlıdırlar. basit resim galerisi.

CSS ve JavaScript kullanarak HTML'de bir görüntünün üzerine araç ipucu ekleyebilirsiniz.

instagram viewer

Bu projede kullanılan kod burada mevcuttur. GitHub deposu MIT lisansı altında.

  1. index.html adlı yeni bir dosyaya, bir HTML dosyasının temel yapısını ekleyin:
    html>
    <html>
    <KAFA>
    <başlık>Resim Araç İpucu Örneğibaşlık>
    KAFA>
    <vücut>
    vücut>
    html>
  2. Gövde etiketinin içine bir kapsayıcı div ekleyin. Bu div, hem görüntüyü hem de araç ipucu öğelerini içerecektir:
    <divsınıf="konteyner">
    div>
  3. Kapsayıcının içine bir resim ekleyin. Eşleşen dosya adına sahip bir görüntünün HTML dosyanızla aynı klasörde olduğundan emin olun:
    <imgkaynak="resim.jpg"sınıf="resim"yükseklik="420"Genişlik="840"alternatif="Senin resim">
  4. Görüntünün altına araç ipucunu temsil edecek bir div ekleyin:
    <divsınıf="araç ipucu">div>
  5. Head etiketinde bir stil etiketi ekleyin. Stil etiketinin içine, resim kabı ve araç ipucu için biraz stil ekleyin:
    <stil>
    .konteyner {
    konum: akraba;
    görüntülemek: satır içi blok;
     }

    .araç ipucu {
    konum: mutlak;
    sol: 0;
    görüntülemek: hiçbiri;
    dolgu malzemesi: 5piksel;
    arka plan rengi: #000;
    renk: #ffff;
    yazı Boyutu: 12piksel;
     }
    stil>
  6. Gövde etiketinin altında yeni bir komut dosyası etiketi oluşturun:
    <vücut>
     Web sayfanızın içeriği burada 
    <senaryo>
    senaryo>
    vücut>
  7. Komut dosyası etiketinin içinde, DOM seçiciyi kullan görüntünün ve araç ipucunun HTML öğelerini almak için querySelector işlevi:
    sabit görüntü = belge.querySelector(".resim");
    sabit araç ipucu = belge.querySelector('.araç ipucu');
  8. için bir olay dinleyicisi ekleyin. fareyle üzerine gelindiğinde etkinlik. Bu işlev, fareyi görüntünün üzerine getirdiğinizde çalışacaktır. Bu meydana geldiğinde, araç ipucu ekranda görüntülenecektir:
    image.addEventListener("fareyle üzerine gelme", () => {
     tooltip.style.display = 'engellemek';
    });
  9. için bir olay dinleyicisi ekleyin. fareyle dışarı çıkma etkinlik. Bu işlev, fare görüntüden ayrıldığında çalışacaktır. Bu meydana geldiğinde, araç ipucu ekrandan kaybolacaktır:
    image.addEventListener("fare", () => {
     tooltip.style.display = 'hiçbiri';
    });
  10. index.html dosyasını herhangi bir tarayıcıda açın ve araç ipucunu görüntülemek için görüntünün üzerine gelin:

Görüntünün X ve Y Piksel Koordinatlarını Hesaplama ve Görüntüleme

Araç ipucu artık sayfada göründüğüne göre, farenin X ve Y koordinatlarını görüntülemek için konumunu ve metnini değiştirin.

  1. Araç ipucunun CSS stilini, siz görüntünün üzerine gelmeden önce araç ipucunun görünmeyeceği şekilde değiştirin. Bu, imlecin konumuna atlamadan önce görüntünün altındaki araç ipucunu görmenizi engeller:
    .araç ipucu {
    konum: mutlak;
    tepe: -30px;
    sol: 0;
    görüntülemek: hiçbiri;
    dolgu malzemesi: 5piksel;
    arka plan rengi: #000;
    renk: #ffff;
    yazı Boyutu: 12piksel;
    }
  2. Komut dosyası etiketinin içine, dinlemek için başka bir olay dinleyicisi ekleyin. fare hareketi etkinlik. Bu işlev, fareniz her yeni pikselin üzerine geldiğinde sürekli olarak yürütülür. hakkında bilgi girecek olay parametresini ekleyin. fare hareketi fonksiyona olay. Bu bilgi, farenin o noktada olduğu görüntü koordinatlarını içerir:
    image.addEventListener("fare hareketi", (e) => {
    });
  3. Olayı kullanarak, sol CSS özelliğini kullanarak araç ipucunun yatay konumunu değiştirin. Fare her hareket ettiğinde, bu, değeri imlecin X koordinatlarıyla eşleşecek şekilde güncelleyecektir. istemciX değişken:
    tooltip.style.left = e.clientX + 'piksel';
  4. Üst CSS özelliğini kullanarak araç ipucunun dikey konumunu değiştirin. İstemciY farenin y koordinatlarını temsil eder. bu ofset Yüksekliği özelliği, araç ipucunun içindeki herhangi bir ek dolgu veya kenarlığı içerir. Araç ipucunun doğrudan imlecin bulunduğu yerde olmasını istemediğiniz için, konumdan ek bir 10 piksel kaldırabilirsiniz:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'piksel';
  5. Koordinatları görüntülemek için araç ipucunun metin içeriğini değiştirin:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. index.html dosyasını herhangi bir tarayıcıda açın ve güncellenmiş ipucunu görüntülemek için resmin üzerine gelin:

Etkileşimli Web Sayfanıza Efektler Ekleme

Artık web sayfanızdaki bir görüntünün üzerine etkileşimli araç ipucunu nasıl ekleyeceğinizi biliyorsunuz. Diğer ilginç HTML efektlerini deneyerek HTML ve CSS becerilerinizi geliştirmeye devam edebilirsiniz.