Come realizzare un'immagine spostabile?

**Yasha** · 20-03-2008, 12:42

Ciao a tutti,
Scusate il titolo ma non sapevo come altro descrivere quello che vorrei realizzare.
Purtroppo ho un immagine molto grande e un layout del mio sito nella norma, allora mi è venuto in mente ad esempio http://maps.google.com.

E' possibile realizzaare un box, di dimensioni "classiche" (480*300px) in cui inserire un immagine in modo da poterla spostare all'interno con il mouse (come accade su google maps)?

Sarebbe possibile inoltre mappare l'immagine (o meglio dite che funziona il map poi dentro il box) in modo che poi ci si possa cliccare sopra e aprire altre pagine?

Grazie

**Yasha** · 20-03-2008, 14:47

Qui usano addirittura google come base, nessuno ha mai visto se è possibile fare, io non ho trovato niente. A me basta spostare l'immagine, il discorso zoom è relativo.

http://slurl.com/secondlife/Cervinia/

**deleted_110** · 20-03-2008, 16:06

ho imporvvisato questo

funziona solo su FF. E' quindi solo uno spunto. Pero' il concetto e' quello

L'immagine la imposti nei css. Ho settato un quadrato 100x100 scrollabile. Metti i valori che vuoi

codice:

<html>
  <head>
    <style type="text/css">
    div.container {
       background: url("immagine.jpg") no-repeat ;
       background-position: 0px 0px;
       width: 100px;
       height: 100px;
    }
    </style>
    
    <script>
    var mouseisdown = false
    var x, y;
    var posX = 0, posY = 0;
    function pressed(p, evt)
    {
      mouseisdown = p;
      
      x = evt.clientX - posX;
      y = evt.clientY - posY;
    }
    
    function scroll(el, evt)
    {
      if(mouseisdown)
      {
        posX = evt.clientX - x;
        posY = evt.clientY - y;
        el.style.backgroundPosition= posX+"px" + " " + posY+"px";
      }
    }
    
    </script>
  </head>
  <body>
    <div id="cont" class="container" onmousemove="scroll(this, event)" onmousedown="pressed(true, event)" onmouseout="pressed(false, event)" onmouseup="pressed(false, event)"></div>
  </body>
</html>

**Yasha** · 20-03-2008, 17:27

esatto!!!!
Però con l'immagine in background non si riesce a mapparla, non si riesce a muovere un oggetto (in questo caso img) all'interno di un div dimensionato (nel tuo esempio 100x100) con overflow:hidden (per limitare l'immagine)?

**Yasha** · 20-03-2008, 17:34

Ho fatto una prova, ma non va, però ti rendo l'idea:

codice:

<html>
<head>
<style type="text/css">
    div.container {
    overflow: hidden;
    width: 480px;
    height: 500px;
    border:black solid 1px;
    }
	
    .foto{
    position: absolute;
    left:-70px;
    top:-300px;
}
</style>
    
<script>
    var mouseisdown = false
    var x, y;
    var posX = 0, posY = 0;
    function pressed(p, evt)
    {
      mouseisdown = p;
      
      x = evt.clientX - posX;
      y = evt.clientY - posY;
    }
    
    function scroll(el, evt)
    {
      if(mouseisdown)
      {
        posX = evt.clientX - x;
        posY = evt.clientY - y;
        el.style.Position= posX+"px" + " " + posY+"px";
      }
    }
</script>

</head>
<body>

<div class="container" >[img]hyboria.jpg[/img]</div>
</body>
</html>

In questo modo se aggiungo la mappatura dell'immagine dovrebbe funzionare...spero :P

**Yasha** · 20-03-2008, 17:36

Ho trovato il problema, ma non funziona correttamente:

codice:

function scroll(el, evt)
    {
      if(mouseisdown)
      {
        posX = evt.clientX - x;
        posY = evt.clientY - y;
        el.style.left= posX+"px";
		el.style.top= posY+"px";
      }
    }

Ho impostato valori negativi per impostare il punto base, poi però l'immagine non si muove bene. Forse capisci il perchè?

**deleted_110** · 20-03-2008, 19:09

Avevo anche io pensato di mettere un'immagine nel div e di non usare lo sfondo ma mi pareva meno elegante

ora non ho tempo di guardare il tuo codice pero' potresti fare cosi':

usa il mio codice senza modificarlo.

Ma dentro il div ci metti una gif trasparente che puoi mappare come vuoi.

Prova e fammi sapere

Discussione: Come realizzare un'immagine spostabile?

Strumenti discussione

Ricerca discussione

Visualizza

Come realizzare un'immagine spostabile?

Permessi di invio