Puzzle fertigstellen

Jetzt geht's ans Programmieren

So, da wir jetzt alle Teile erstellt haben, müssen wir sie nur noch zu einem fertigen Puzzle zusammenbauen. Und das funktioniert so:

Zuerst erstellst du ein HTML-Grundgerüst. Hier kommt der Code:

<html>
<head>
<title>Javascript Puzzle</title>
</head>
<body>
</body>
</html>
~

Diesen fügst du in den Editor (nicht in Word!!!) ein und speicherst in unter dem Namen Puzzle.html ab. Jetzt musst du folgenden Code zwischen <head> und </head> einfügen. Es ist wichtig, dass du ihn nicht veränderst!


<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
/**
Make a Puzzle**/
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
~

Jetzt alles abspeichern. Dach müssen noch die Puzzleteile eingefügt werden. Das geht so:
Diesen Code musst du zwischen <body> und </body> einfügen.

<img src="teil0#.gif" class="drag">~

Für das # setzt du die Nummer des Teiles ein. Z. B. 1, 6, 4....
Diesen Code musst du solange einfügen, bis jedes Teil mit seiner Nummer einmal vorkommt. Jetzt alles abspeichern und fertig.

*Tipp*: Wenn du die Teile in verdrehter Reihenfolge einfügst, wird das Puzzle ein wenig schwieriger. Um das Puzzle auf deine Homepage zu setzen, musst du die html-Datei und jedes Teil hochladen. Dann funktioniert es. Natürlich musst du auch einen Link zu deinem Rätsel setzen. Wenn du nur eine Lizzypage hast, musst du die Bilder und die html-Datei unter "Selbstgebaute Page" hochladen und setzt dann diesen Link auf deine LizzyPage:

http://www.lizzynet.de/home/deinNickname/Puzzle.html~.
Natürlich musst du "deinNickname" noch ersetzen :-)).

*Viel Spaß von Nukki* Schreibt mir! Nukki

Autorin / Autor: Nukki - Stand: 26. November 2003