Spostamento immagini in Javascript

[StefanoCsl]

Ciao, ho messo una immagine in un DIV. L'immagine è più grande del DIV che la contiene e quindi dovrei scorrerla per visualizzarne le varie parti. Sto cercando un sistema per scorrerla senza usare gli scrollbar ma spostando semplicemente la mappa (per intenderci l'effetto di Google Maps).
Come posso fare?

[MEMon]

Non so se puoi agire direttamente sugli scroller di un DIV.
Comunque potresti mettere l'immagine come sfondo del div invece che come vera e propria immagine img, e poi settare il valore del background-position in base a dove la vuoi

[StefanoCsl]

Originariamente inviato da MEMon

Non so se puoi agire direttamente sugli scroller di un DIV.
Comunque potresti mettere l'immagine come sfondo del div invece che come vera e propria immagine img, e poi settare il valore del background-position in base a dove la vuoi

Ciao, grazie per la risposta. Non posso metterla come BG del DIV perché l'immagine è mappata. Anche io ho provato ad agire direttamente sugli scrollbar ma non ho trovato come fare.

[misterx]

Originariamente inviato da StefanoCsl

Ciao, ho messo una immagine in un DIV. L'immagine è più grande del DIV che la contiene e quindi dovrei scorrerla per visualizzarne le varie parti. Sto cercando un sistema per scorrerla senza usare gli scrollbar ma spostando semplicemente la mappa (per intenderci l'effetto di Google Maps).
Come posso fare?

usa questo
copialo brutalmente in cima alla tua pagina HTML

<style>
.dragme{position:relative;}
</style>
<script language="JavaScript1.2">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}
function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }
  if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false")
</script>

manca un pezzo

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px">
<img src="tuaimmagine.jpg"  class="dragme">
</div>

[StefanoCsl]

Originariamente inviato da misterx

usa questo
copialo brutalmente in cima alla tua pagina HTML

<style>
.dragme{position:relative;}
</style>
<script language="JavaScript1.2">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}
function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";
  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }
  if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false")
</script>

manca un pezzo

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 0px; top: 0px">
<img src="tuaimmagine.jpg"  class="dragme">
</div>

OTTIMO!!!
Era proprio quello che cercavo, ora ti chiedo un'altra cosa: come posso vedere la larghezza di un DIV in Javascript?

[MEMon]

bhe basta leggere il suo style.
div.style.width
dove div è l'oggetto DOM di un DIV

[StefanoCsl]

Originariamente inviato da MEMon

bhe basta leggere il suo style.
div.style.width
dove div è l'oggetto DOM di un DIV

già... ma non torna il valore. E' stata la prima cosa che ho provato, ma forse sbaglio qualcosa.
Io ho fatto un tag DIV ed il suo ID è "videata".

nello JavaScript ho scritto "document.getElementById("videata").style.width" ma non funziona

[MEMon]

ma nn ti torna proprio nulla??? stranissimo
lo fai dopo che il div esiste vero si?

[StefanoCsl]

Originariamente inviato da MEMon

ma nn ti torna proprio nulla??? stranissimo
lo fai dopo che il div esiste vero si?

Sì, perché ho messo lo script in una funzione che viene chiamata quando premo un pulsante, ma niente da fare

[MEMon]

ah sai cosa, potrebbe essere che il width è settato nei CSS ma non nell'attributo style del div.

[StefanoCsl]

Originariamente inviato da MEMon

ah sai cosa, potrebbe essere che il width è settato nei CSS ma non nell'attributo style del div.

Infatti, ora ho messo lo style anche all'interno della pagina ed è andato bene ma c'è un altro problema: per impostarlo devo usare la percentuale ma ora mi serve la larghezza in pixel