5.00 / 1 oy

Mouse hover yaptığında tooltip yerine görsel göstermek (HTML+CSS+Javascript)

Html'deki Standart tooltip yerine mouse ile bir linkin üzerine geldiğimde bir görselin mouse'un olduğu alanda görünmesini istiyorum, facebook'taki ismin üzerinde mouse'u bekletince ortaya çıkan kullanıcı bilgileri ekranı gibi ama sadece fotoğrafı olacak, ilave js ya da jquery plugin'i kullanmadan bunu sadece html+css+javascript ile nasıl yapabiliriz?

Kati3kat

08.07.2019 10:31

Bu soru 1 kez yanıtlandı.

  • 8 Temmuz 2019 12:17
    28

    Yazılandan benim anadığım şöyle bir şey:

    hover gif animation

    Yukarıdaki Standart tooltip yazısı bildiğimiz title özelliği:

    <div title="regular tooltip">Standart tooltip</div>

    Aşağıdaki ise mouse imleci ile üzerine geldiğinizde bir jpg ya da gif gibi bir görseli imlecin üzerinde hover işlemi ile birlikte gösteren bir a etileti.

    
    <a class="tooltip" href="http://www.google.com/">
        Afili tooltip
        <span id="afili-span">
            <img alt="Şekilli Hover" src="https://media.giphy.com/media/AVI22zTw4QUpO/giphy.gif" />
        </span>
    </a>

    Ancak html kodlarından da görebileceğiniz gibi aslında bu görseli gösteren bir title kullanmıyoruz, aksine sizin istediğiniz gibi arka planda çalışan bir javascript kodu var ve windows.onmousemove özelliği ile şu şekilde çalışıyor:

    var sekilliSpan = document.getElementById('afili-span');
    
    window.onmousemove = function (e) {
        var x = e.clientX,
            y = e.clientY;
        sekilliSpan.style.top = (y + 20) + 'px';
        sekilliSpan.style.left = (x + 20) + 'px';
    };

     

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
Mouse hover yaptığında tooltip yerine görsel göstermek (HTML+CSS+Javascript)

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.