Google Maps utiliza imágenes divididas en bloques que se cargan dinámicamente a medida que el usuario avanza en diferentes direcciones. El Google Maps Image Cutter que menciona Paul Dixon es la herramienta que desea para esto.
Si solo desea formar una imagen grande, en lugar de tener la complejidad adicional de dividir la imagen en bloques, en lugar de usar la propiedad de desbordamiento CSS, debe usar la propiedad clip. Esto es compatible con todos los navegadores que vale la pena pensar, hasta IE4 si no recuerdo mal.
Un punto a tener en cuenta: la especificación CSS2.1 muestra ejemplos con los valores rect separados por comas. Sin embargo, esto no es compatible con IE6 (quizás tampoco con IE7). Sin embargo, todos los demás navegadores entienden la versión sin comas. Así que en lugar de
clip: rect(5px, 40px, 45px, 5px);
se debe utilizar
clip: rect(5px 40px 45px 5px);
para la compatibilidad.
Se necesita un contenedor div < > conjunto a la posición: relativa alrededor del elemento img > <, que luego se ajusta a la posición: absoluta.
Así que la técnica básica es actualizar los valores superiores e izquierdos mientras el usuario arrastra, utilícelos junto con el ancho y alto definidos de la vista en la imagen para crear la cadena rect() adecuada y actualice la parte superior. izquierda, y propiedades de clip de la propiedad de estilo del elemento <img>.
No haga lo que hice y omita el "px" después de los valores en la cadena rect(). Me llevó años darme cuenta de por qué no estaba funcionando :-)
gracias, eso es exactamente lo que necesitaba, lo he tenido en cuenta para el futuro – sydlawrence