site-accueil-insa/assets/fonts/cursor.php

<script type="text/javascript">

    /** les variables x/y MousePos contiennent les coordonnés de la souris */
    var xMousePos = 0;
    var yMousePos = 0;

    /** stockent des informations sur le dernier scroll (pour update le positionnement de la souris) */
    var lastScrolledLeft = 0;
    var lastScrolledTop = 0;

    addEventListener("mousemove", (ev) => {

        if(navigator.appName=="Microsoft Internet Explorer") {
            xMousePos = event.x+document.body.scrollLeft;
            yMousePos = event.y+document.body.scrollTop;
        } else {
            xMousePos =  ev.pageX;
            yMousePos =  ev.pageY;
        }

        document.getElementById("image_suit_souris").style.left = (xMousePos+1/*+1-43*/)+'px';
        document.getElementById("image_suit_souris").style.top  = (yMousePos+1/*-17*/)+'px';
    })

    addEventListener("scroll", (ev) => {
        if(lastScrolledLeft !== document.scrollingElement.scrollLeft){
            xMousePos -= lastScrolledLeft;
            lastScrolledLeft = document.scrollingElement.scrollLeft;
            xMousePos += lastScrolledLeft;
        }
        if(lastScrolledTop !== document.scrollingElement.scrollTop){
            yMousePos -= lastScrolledTop;
            lastScrolledTop = document.scrollingElement.scrollTop;
            yMousePos += lastScrolledTop;
        }

        document.getElementById("image_suit_souris").style.left = (xMousePos+1/*+1-43*/)+'px';
        document.getElementById("image_suit_souris").style.top  = (yMousePos+1/*-17*/)+'px';
    })

</script>

<style>

body {
    overflow-x: hidden;
}

.cursor {
    position: absolute;
    display: block;
    z-index: 5;
    width: 75px;
    transform: translateX(-22px) translateY(-106px);
    pointer-events: none;
}
</style>

<img src="assets/img/cursor.png" alt="Image qui suit la souris" id="image_suit_souris" class="cursor" />