Bilder mit der Maus bewegen

Bestimmt hast du das auch schon auf vielen Seiten gesehen, diesen kleinen Pfeil zum mitnehmen....:

Diesen Pfeil kannst du dir zur besseren Orientierung mitnehmen.

So geht es:

Zunächst benötigst du natürlich den Pfeil als gif-Bild.
Der Pfeil bekommt einen Stil zugewiesen:

In den Head-Bereich deiner Seite musst du noch dieses Style-Sheet und Script einfügen:

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>

Das war es dann auch schon, dein Pfeil zum Mitnehmen ist fertig....

Mit diesem Script kannst du beliebig viele Bilder auf der Seite mit der Maus verschieben lassen, die Bilder müssen nur immer den Stil "dragme" zugewiesen bekommen.
So kann man z.B. auch Dollmaker oder Anziehpuppen oder Puzze machen....

nach oben

<< zurück