[SOLUCIONADO] Crear un área con contenido desplazable

[waspeis]

Buenas a todos,

Mi pregunta puede que no sea muy común, pero sólo necesito algo para poder empezar, alguna pista...

Necesito tener en una página web un área (por ejemplo un cuadrado o un rectángulo) cuyo contenido sea desplazable. Sería una especie de cuadrícula donde podría moverme a izquierda y derecha, arriba y abajo, y donde cada recuadro sería clickable, o al menos al pasar el ratón por encima que muestre alguna información.

Necesito crear "un mapa" y poder moverme en él. Como la dimensión del mapa sería más grande que la ventana del navegador tendría que meterlo en un área donde poder moverme.

Cómo podría hacerlo? Qué lenguaje debería utilizar?

Graciasss

[javiandgo]

Podrías meterlo dentro de una caja con una dimensión definida y aplicarle la propiedad overflow:hidden; para que solo muestre el contenido de la caja y no todo lo que hay dentro de ella.

[Rafael]

Una opción es usar javascript con cosas como estas:

https://www.magictoolbox.com/magiczoom/

http://www.dynamicdrive.com/dynamici...owerzoomer.htm

Hace muuucho me encontré algo como lo que quieres, donde podías hacerle como el google maps con cierta "inercia" al arrastrar tu mapa pero no lo encuentro.

También recuerdo que había algo de google maps, donde podías poner tus propias imágenes usando su api, para usarse por ejemplo en mapas ficticios de fantasía.

[waspeis]

Interesante...

Pero lo que necesito es poder mover una imagen, que será bastante grande, en un espacio determinado en la página web. El área donde iría la imagen lo voy a definir mediante una etiqueta DIV. La imagen, al ser más grande que el DIV, se podría mover con las barras de desplazamiento, pero me interesaría saber si se puede mover haciendo click en la imagen y arrastrándola...

También me gustaría dividir la imagen por zonas, como si fuera una cuadrícula, y según donde pinche que salga una información...

Gracias por las ideas

[juramar]

Hola, creo que esto te puede servir, Arrastrar y soltar en HTML5 Mover imágenes. saludos.

[Rafael]

Sí entendí perfectamente, pero eeeeese mero javascript no lo encuentro.

El problema es que antes no existía el concepto draggable en html. Por lo que una búsqueda de google encontraba ese script. Mover la imagen como si fuera un mapa.

Pero ahora cuando gogleas draggable te la arrastra como el ejemplo de juramar.

Tal vez adaptándolo dentro de un contenedor con overflow auto.

Acá hay algo parecido: http://jqueryui.com/draggable/

[waspeis]

Gracias amigos, ya tengo algo para poder empezar...


Gracias ;)