 Objekte verschieben
Objekte mit festgehaltener Maustaste verschieben. Das müssen nicht immer Grafiken sein. Die Position eines Notizfensters oder eine kleines Menü könnte man frei positionieren. Hier habe ich mit dieser Technik ein Puzzle hergestellt.
 14.05.2005 neues Script! Funktioniert nun auch im NS6 und Mozilla (allerdings nicht mehr im NS4)
Ein simples Anwendungsbeispiel finden sie unter  Lesezeichen
Im Beispiel werden Images mit festgehaltener Maustaste verschoben. Zur Anschauung gibt es hier eine simples Bildpuzzle. Öffnen sie für eine weitere Demo einer Anwendung das Beispiel im PopUpWindow.
Für die 12 Grafiken im Beispiel dieser Seite wird in den IMG-Tags lediglich ein class-Attribut mit dem Wert "dragme" eingetragen.
Der Vorteil der neuen Script-Version (Mai 2005) ist: Nun können sie beliebig viele Images eintragen, die immer das gleiche CSS-Attribut bekommen. Im alten Script musste man für jedes Image einen eigenen Layer notieren.
| |
|
Beispiel der Notierung:
<img src="puzzle01.gif" width="123" height="110" border="0" class="dragme">
aktives Beispiel Bildrätsel - wer ist das?
Aufwand:
- JavaScript in den Head-Bereich eintragen
- CSS-Block in den Head-Bereich eintragen
- Images im Body-Bereich notieren
- für jedes Image CSS-Klasse eintragen
Script im Head
(vollständiger Quelltext als Textdatei im Kopfbereich unter Scriptcode)
<script type="text/javascript">
<!-- Begin
// Created by: elouai.com
// mod: W. jansen
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var verschieben=false;
var x,y;
var dobj;
function movemouse(e)
{
if (verschieben)
{
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")
{
verschieben = 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("verschieben=false");
// End -->
</script>
CSS im Head
<style type="text/css">
<!--
.dragme{position:relative;}
-->
</style>
Grafik(en) im Body
Egal welche und wie viele Grafik(en) sie einbinden möchten, sie notieren erst einmal ein ganz normales <img>-Tag mit den üblichen HTML-Anweisungen. In dieses HTML-Tag wird dann ein zusätzliches Attribut für die CSS-Klasse eingetragen.
<img class="dragme" src="dateiname.gif" width="150" height="150" border="0">
Dieses Attribut tragen sie für jede der Grafiken ein, die sie mit der Maus ziehen / bewegen möchten.
Im Beispiel '50 ways to leave your lover' verwendete Images:
gun.gif
|
skorpion.gif
|
schlange.gif
|
| 
WWW.WEB-TOOLBOX.NET
DOWNLOAD 
BEISPIEL 
ZURÜCK 
