Home/ Questions/Q 7053137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:28:05+00:00

I’m a bit of a jQuery novice and I’m looking to create an interactive

  • 0

I’m a bit of a jQuery novice and I’m looking to create an interactive rollover: Rollover a small image and have a HTML window move respectively with the mouse cursor.

I love the look and feel of JQZoom – but when rolling over the small image I’d like the zoomed area to be actual HTML (images and live type) rather than a static image.

The thought of muddling through figuring out percentage based cursor locations when over the small image and transposing that into a div of html (with hidden overflow) BOGGLES MY MIND!!!

I crave the advice of jQuery ninjas out there!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Transposing the mouse position is exactly what you want and quite simple. Observe:

    HTML:

    <body>
  <div id="driver" />
  <div id="viewport">
    <div id="tile" />
  </div>
</body>

    CSS:

    #driver { width:100px; height:100px; }
#viewport { width:100px; height:100px; overflow:hidden; }
#tile { width:800px; height:333px; position:relative; }

    JS (with jQuery):

    $(function() {
    var tileSize = {
        width: $('#tile').innerWidth(),
        height: $('#tile').innerHeight()
    };
    var driverSize = {
        width: $('#driver').innerWidth(),
        height: $('#driver').innerHeight()
    };
    var viewportSize = {
        width: $('#viewport').innerWidth(),
        height: $('#viewport').innerHeight()
    };
    $('#driver').mousemove(function(e) {
        var mousePos = {
            left: e.pageX - $(this).offset().left,
            top: e.pageY - $(this).offset().top
        };
        var posRatio = {
            x: mousePos .left / driverSize.width,
            y: mousePos .top / driverSize.height
        };
        var tilePos = {
            left: viewportSize.width / 2 - tileSize.width * posRatio.x,
            top: viewportSize.height / 2 - tileSize.height * posRatio.y
        };
        $('#tile').css(tilePos);
    });
});

    Consider your mind, UNBOGGLED. 😀

    • 0