CODEWITHSUNDEEP
jquery
ArleyM
ArleyM

Reputation: 853

jQuery Plugin or Technique suggestion?

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!

Upvotes: 0

Views: 67

Answers (1)

jkoreska
jkoreska

Reputation: 7200

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. :D

Upvotes: 1

Related Questions