Mapear Imagen con div con tamaños dinamicos

alexisfch · #1 (**permalink**) 15/09/2015, 10:46

Estoy trabajando en una imagen SVG, en la cual mediante divs flotantes quiero hacer un efecto hover en algunas posiciones del mapa, hasta ahi todo bien, el problema es que estoy usando una libreria para hacer un wheel mouse zoom y drag, lo que sucede es que cuando se redimensiona la imagen no se redimensionan los divs en razon del zoom ni se mantiene su posicion relativo al mapa.

http://www.salondental.cl/mapa-compra/

Código HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Wheelzoom</title>
	<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
	<style>
	#capa-btn{ position:relative; width:300px; height:150px; border:2px solid #ccc; z-index:2; top: -690px; left: 100px; }
	.btn-a{ position: relative;	width: 20px; height: 20px; top: 40px; background: #ccc;	}
	</style>
</head>
<body>
	<img class='zoom' src='PLANO_SALONDENTAL_CASAPIEDRA_1_copia-1.svg' alt='Daisy!' width='100%' height='100%'/>
	<script src="wheelzoom.js"></script>
	<script>
		wheelzoom(document.querySelector('img.zoom'));
	</script>
</body>
</html>

Código Javascript:

Ver original/*!
    Wheelzoom 3.0.1
    license: MIT
    http://www.jacklmoore.com/wheelzoom
*/
window.wheelzoom = (function(){
    var defaults = {
        zoom: 0.10
    };
 
    var canvas = document.createElement('canvas');
 
    function setSrcToBackground(img) {
        img.style.backgroundImage = 'url("'+img.src+'")';
        img.style.backgroundRepeat = 'no-repeat';
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        img.src = canvas.toDataURL();
    }
 
    var main = function(img, options){
        if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }
 
        var settings = {};
        var width;
        var height;
        var bgWidth;
        var bgHeight;
        var bgPosX;
        var bgPosY;
        var previousEvent;
 
        function updateBgStyle() {
            if (bgPosX > 0) {
                bgPosX = 0;
            } else if (bgPosX < width - bgWidth) {
                bgPosX = width - bgWidth;
            }
 
            if (bgPosY > 0) {
                bgPosY = 0;
            } else if (bgPosY < height - bgHeight) {
                bgPosY = height - bgHeight;
            }
 
            img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
            img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
        }
 
        function reset() {
            bgWidth = width;
            bgHeight = height;
            bgPosX = bgPosY = 0;
            updateBgStyle();
        }
 
        function onwheel(e) {
            var deltaY = 0;
 
            e.preventDefault();
 
            if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
                deltaY = e.deltaY;
            } else if (e.wheelDelta) {
                deltaY = -e.wheelDelta;
            }
 
            // As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
            // We have to calculate the target element's position relative to the document, and subtrack that from the
            // cursor's position relative to the document.
            var rect = img.getBoundingClientRect();
            var offsetX = e.pageX - rect.left - document.body.scrollLeft;
            var offsetY = e.pageY - rect.top - document.body.scrollTop;
 
            // Record the offset between the bg edge and cursor:
            var bgCursorX = offsetX - bgPosX;
            var bgCursorY = offsetY - bgPosY;
            
            // Use the previous offset to get the percent offset between the bg edge and cursor:
            var bgRatioX = bgCursorX/bgWidth;
            var bgRatioY = bgCursorY/bgHeight;
 
            // Update the bg size:
            if (deltaY < 0) {
                bgWidth += bgWidth*settings.zoom;
                bgHeight += bgHeight*settings.zoom;
            } else {
                bgWidth -= bgWidth*settings.zoom;
                bgHeight -= bgHeight*settings.zoom;
            }
 
            // Take the percent offset and apply it to the new size:
            bgPosX = offsetX - (bgWidth * bgRatioX);
            bgPosY = offsetY - (bgHeight * bgRatioY);
 
            // Prevent zooming out beyond the starting size
            if (bgWidth <= width || bgHeight <= height) {
                reset();
            } else {
                updateBgStyle();
            }
        }
 
        function drag(e) {
            e.preventDefault();
            bgPosX += (e.pageX - previousEvent.pageX);
            bgPosY += (e.pageY - previousEvent.pageY);
            previousEvent = e;
            updateBgStyle();
        }
 
        function removeDrag() {
            document.removeEventListener('mouseup', removeDrag);
            document.removeEventListener('mousemove', drag);
        }
 
        // Make the background draggable
        function draggable(e) {
            e.preventDefault();
            previousEvent = e;
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', removeDrag);
        }
 
        function loaded() {
            var computedStyle = window.getComputedStyle(img, null);
 
            width = parseInt(computedStyle.width, 10);
            height = parseInt(computedStyle.height, 10);
            bgWidth = width;
            bgHeight = height;
            bgPosX = 0;
            bgPosY = 0;
 
            setSrcToBackground(img);
 
            img.style.backgroundSize =  width+'px '+height+'px';
            img.style.backgroundPosition = '0 0';
            img.addEventListener('wheelzoom.reset', reset);
 
            img.addEventListener('wheel', onwheel);
            img.addEventListener('mousedown', draggable);
        }
 
        img.addEventListener('wheelzoom.destroy', function (originalProperties) {
            console.log(originalProperties);
            img.removeEventListener('wheelzoom.destroy');
            img.removeEventListener('wheelzoom.reset', reset);
            img.removeEventListener('load', onload);
            img.removeEventListener('mouseup', removeDrag);
            img.removeEventListener('mousemove', drag);
            img.removeEventListener('mousedown', draggable);
            img.removeEventListener('wheel', onwheel);
 
            img.style.backgroundImage = originalProperties.backgroundImage;
            img.style.backgroundRepeat = originalProperties.backgroundRepeat;
            img.src = originalProperties.src;
        }.bind(null, {
            backgroundImage: img.style.backgroundImage,
            backgroundRepeat: img.style.backgroundRepeat,
            src: img.src
        }));
 
        options = options || {};
 
        Object.keys(defaults).forEach(function(key){
            settings[key] = options[key] !== undefined ? options[key] : defaults[key];
        });
 
        if (img.complete) {
            loaded();
        } else {
            img.addEventListener('load', function onload() {
                img.removeEventListener('load', onload);
                loaded();
            });
        }
    };
 
    // Do nothing in IE8
    if (typeof window.getComputedStyle !== 'function') {
        return function(elements) {
            return elements;
        };
    } else {
        return function(elements, options) {
            if (elements && elements.length) {
                Array.prototype.forEach.call(elements, main, options);
            } else if (elements && elements.nodeName) {
                main(elements, options);
            }
            return elements;
        };
    }
}());