Brugsanvisning

Du får brug for følgende:

Et billede behandlings program hvor du kan tilpasse og beskærer dit valgte billede. størrelsen af dit billede, og konvertere det til jpg format.

Et program der kan dele dit billede op i små felter.
Her er brugt:  SplitImage 

Puslespillet kan bruges på Internet Explorer 4 eller højre niveau.

Du kan nu begynde:
Opret en mappe hvor du vil have dit puslespil i.
Du kan gemme mappen på dit skrivebord, og senere gemme den i den mappe hvor du ønsker det. Det bliver lidt lettere på den måde. 

Puslespils  scriptet i html filen, er baseret på et billede der måler 400 x 300, så hvis dit billede er større må du "resize" det eller/og klippe det ud i den størrelse, og derefter gemme det i mappen som et jpg. Derefter fremstiller du et mindre billede med de samme proportioner, vælg fx 50%. Dette vil være det lille billede man ser efter, når man lægger puslespillet. Gem dette billede som lille-navn.jpg.

(Når du bruger de angivne navne så skal du ikke rette så meget i scriptet.)

Nu skal bruge dit Splitimage program, skal du åbne det store billede. 

Vælg følgende i File | New, klik dig frem til dit 400 x 300 billede.
Klik Open. Vælg nu Edit | Edit Using Dialog menu. 

Her vil vi dele billedet i 48 lige  store firkanter. Otte på den lange led, og seks på den korte. Hver firkant skal være 50x50.

Så ser det sådan ud.



Klik Okay.

 

Så går du i fil menuen og vælger:

Preferences


I File menuen, skal du klikke på Generate Image.

.

Indskriv: .jpg (dette er noget usædvanligt - men lige nu er det sådan det fungerer.)
Klik på Gem.

 Nu burde du have 48 små billeder i din puslespilsfolder, som tilsammen udgør det oprindelige billede. De er nummererede fra 0-48.

De hedder alle _image og så er de nummereret.

 

Nu skal vi have oprettet html filen. Dette er den måde jeg finder lettest.
Kopier teksten i rammen nedenunder, og sæt den ind i din teksteditor eller dit HTML program. Gem filen som html fil. og ikke en txt fil, og gem den i din arbejdsmappe. Husk at gemme alt i denne folder.
Ellers går der kludder i det. Det store billede på 400 x 300 anvendes ikke i selv puslespillet.

Herfra kan du kopier...........................

<HTML>

<HEAD>

<!-- Minus AutoDato -->

<TITLE>A Picture Jigsaw Puzzle - kan du komme brikkerne på plads?</TITLE>

<META NAME="Generator" CONTENT="Microsoft FrontPage 4.0">

<STYLE type=text/css>BODY {

BACKGROUND-REPEAT: no-repeat; MARGIN-LEFT: 500px; MARGIN-RIGHT: 20px

}

DIV {

COLOR: #ffffff; FONT-FAMILY: Comic Sans; FONT-SIZE: 20px; FONT-STYLE: normal; FONT-WEIGHT: normal; MARGIN-TOP: 10px; TEXT-ALIGN: left

}

</STYLE>

</HEAD>

<BODY bgColor=#009933 onload=checkit()>

<DIV>&nbsp;</DIV>

<DIV>&nbsp;</DIV>

<CENTER>

<H1><FONT color=#191970 face="Comic Sans" size=6>The Cottage her indskrives dit navn</FONT></H1><BR>

<DIV>

<CENTER>

 

<IMG src="lille-billed.jpg"></DIV>

<DIV><CENTER><BR><FONT color=#191970 face="Comic Sans" size=5>Off-line <BR>PUSLESPIL

<BR>

<CENTER>

<BR>God forn&oslash;jelse<BR><BR></FONT></DIV></CENTER>

<SCRIPT language=JavaScript>

<!--

var temp = new Image()

var loc

var gotit

function checkit()

{

if ((navigator.appName=="Microsoft Internet Explorer")

&& (parseInt(navigator.appVersion) >= 4))

return

else

alert("To play, you need MSIE 4 or greater")

}

function exch()

{

if ((event.button == 1) && (event.srcElement.className == "drag"))

{

if (gotit == 1)

{

gotit = 0

document.images[loc].src = document.images[event.srcElement.name].src

document.images[event.srcElement.name].src = temp.src

}

else

{

gotit = 1

loc = event.srcElement.name

temp.src = document.images[loc].src

}

}

}

document.onmousedown=exch

// -->

</SCRIPT>

<DIV id=table1

style="BORDER-BOTTOM: 10px; BORDER-LEFT: 10px; BORDER-RIGHT: 10px; BORDER-TOP: 10px; LEFT: 20px; POSITION: absolute; TOP: 20px; Z-INDEX: -1"

width="400px" height="300px">

<TABLE border=0 cellPadding=0 cellSpacing=0

style="BORDER-BOTTOM: white 15px ridge; BORDER-LEFT: white 15px ridge; BORDER-RIGHT: white 15px ridge; BORDER-TOP: white 15px ridge; HEIGHT: 300px; LEFT: 0%; POSITION: absolute; TOP: 0%; WIDTH: 400px">

<TBODY>

<TR>

<TD><IMG alt="" class=drag height=50 name=pic13

src="_image13.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic02

src="_image2.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic16

src="_image16.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic19

src="_image19.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic06

src="_image6.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic27

src="_image27.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic30

src="_image30.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic42

src="_image42.jpg" width=50></TD></TR>

<TR>

<TD><IMG alt="" class=drag height=50 name=pic28

src="_image28.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic35

src="_image35.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic03

src="_image3.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic39

src="_image39.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic17

src="_image17.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic43

src="_image43.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic20

src="_image20.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic14

src="_image14.jpg" width=50></TD></TR>

<TR>

<TD><IMG alt="" class=drag height=50 name=pic11

src="_image11.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic04

src="_image4.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic25

src="_image25.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic29

src="_image29.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic18

src="_image18.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic08

src="_image8.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic36

src="_image36.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic44

src="_image44.jpg" width=50></TD></TR>

<TR>

<TD><IMG alt="" class=drag height=50 name=pic37

src="_image37.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic15

src="_image15.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic01

src="_image1.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic05

src="_image5.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic31

src="_image31.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic41

src="_image41.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic23

src="_image23.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic45

src="_image45.jpg" width=50></TD></TR>

<TR>

<TD><IMG alt="" class=drag height=50 name=pic34

src="_image34.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic22

src="_image22.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic38

src="_image38.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic09

src="_image9.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic40

src="_image40.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic10

src="_image10.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic32

src="_image32.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic46

src="_image46.jpg" width=50></TD></TR>

<TR>

<TD><IMG alt="" class=drag height=50 name=pic33

src="_image33.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic26

src="_image26.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic24

src="_image24.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic00

src="_image0.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic12

src="_image12.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic21

src="_image21.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic47

src="_image47.jpg" width=50></TD>

<TD><IMG alt="" class=drag height=50 name=pic07

src="_image7.jpg"

width=50></TD></TR></TD></TR></TBODY></TABLE></DIV>

<BLOCKQUOTE></BLOCKQUOTE></SCRIPT><!--This is the ticker, replace "REPLACE" with what you want to appear on the ticker-->

<SCRIPT language=JavaScript>

<!--

ScrollSpeed = 250; // milliseconds between scrolls

ScrollChars = 4; // chars scrolled per time period

function SetupTicker() {

// add space to the left of the message

msg = "A picture puzzle for you, just point and click your cursor on the pieces to move them!! Enjoy!! ";

RunTicker();}

function RunTicker() {

window.setTimeout('RunTicker()',ScrollSpeed);

window.status = msg;

msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}

SetupTicker();

<!-- end -->

</SCRIPT>

<DIV></DIV>

<BLOCKQUOTE>En hilsen til alle mine venner<BR>ogs&aring; dem jeg ikke kender!</BLOCKQUOTE></CENTER></BODY></HTML>

Her til kopierers..........................................

 

 

 

 

 

Du er nødt til, at lave nogle få forandringer i html filen. Åben den i dit foretrukne program eller teksteditor. Teksten markeret med rødt i scriptet ovenfor skal tilpasses dit billede. Teksten markeret med blå skal er det navn som alle dine filer burde have. Ellers må du  erstattes med filnavnet på dine egne filer. brug funktioner med "søg og erstat" i Stowns, det vil spare en masse tid. 

Du kan også ændre beskeden i tickeren der løber under billedet.


Det var det. ..
God fornøjelse!

22-01-01 Hanne VF

 

Dette er en stærkt ændret udgave af en tidligere brugs anvisning, som var oversat af Humlekop.