Back to the Electric Paper Doll Page.
How it works
It's rather easy:
To pick up an item, click it.
To move an item, move the mouse pointer.
To drop an item, click again.
There are just three things you should note:
1. If you move too fast, you may lose an item.
If this happens, just move back the mouse pointer till it hoovers over the item again, than move again towards its destination. Losing an item is more likely with smaller objects.
2. If you scroll down the document and click on an item, it will disappear. This is because it is transferred to the top of the document.
This isn't a bug, since I assume that you want this item to appear on top of the document to be placed somewhere on the image of the girl.
If an item disappears this way, just scroll back to the top of the page, catch the item again by moving the mouse pointer over it, and move it to its destination.
NOTE: If you are using a screen resolution of 640x480, you will be transferred automatically to a special page for smaller resolutions. You will nevertheless have to ensure that you have sufficient working space by closing unused features, rulers, task lines, frames etc.
IMPORTANT NOTE: If an item behaves strange and seems to try to avoid you and escape you, moving higher and higher, scroll to the top of the page!
3. The briefs are not a regular item, but part of the basic picture.
Therefore, they can only be removed with a very, very secret cheat code.
Credits
The basic idea of the script follows lines developed by Stefan Münz. He has an excellent german page about HTML, Style Sheets, Javascript and all that stuff.
The script was adopted (and shortened) by Jan Thor (that's me), and I did also all the art work.
You may download all this and use it on your personal local hard drive for your pleasure.
You are also allowed to use the Javascript code, as long as you give credits to Stefan Münz and me.
You are not allowed to copy or distribute or publish any of the pictures, neither a part of them nor all of them. If your friends want a copy, they may download their own one.
"Unauthorized duplications or any such nonsense could possibly result in death or dismemberment" (The Melvins)
21 march 1999 - Jan Thor
improved code:
1 june 1999 - Jan Thor
Version 2.0 (download):
29 june 1999 - Jan Thor
Compatibility (some words for excuse)
This works only with Microsoft Internet Explorer 4.0 or above; the original script by Stefan Münz was also aimed to work with Netscape Navigator 4.0 or above.
I think if it is possible to maintain compatibility with different browsers, this is a goal that should be allways be beared in mind. But I have some words of explanation why this doesn't work with Netscape.
The original source code had to deal only with 3 different layers, instead of 52; also, the exact position of this layers was of minor importance, while it is crucial here; and, last, the layers were large in comparison, while I have to deal with small objects. To include a version that would be able for Netscape to display would have been possible, but it would have to be very roundabout, inaccurate and frustrating.
Nevertheless, if anybody wants to re-write this page, I would welcome any submissions: jan@janthor.de
For a long time (which means: for some years), I think, Netscape was the best browser at all, doing all the inovations. But recently, I find it very ennoying to see recommendations by third partys like the W3-consortium being ignored by Netscape. The result is that doing some lines of Javascript, I often find IExplorer to behave like expected, while the same lines don't work with Navigator, and sometimes they run only after careful debugging, sometimes they run after a lot of trial-and-error, and sometimes they don't run at all. I regret to have to say this, since I would greet the existence of several different browsers. But in this case, I see no way to enable this page for Netscape Navigator without destroying the aesthetical integrity of my page.
Download
If you prefer, you may download this entire page with all the according GIFs and JPEGs to play with it offline on your local hard drive. Download the file
and unzip it in a directory of your choice. The file is 549 KB large while zipped, and 609 KB unzipped. It contains 110 files, that is:
dy2kleid.htm
dy2kleis.htm
el2sorry.htm
el2help.htm
ichkleid.jpg
elikl01.gif
.
.
.
elikl52.gif
kladd01.gif
.
.
.
kladd53.gif
Open the file dynkleid.htm in your browser. Have fun.
This contains 53 additional items not in the online page, like a samurai dress or Seven of Nine dress or wings or leather pants or see-through shirt &c. &c. &c.
KiSS Download
Surfing the net I discovered that the paper dolls are popular enough in Japan to encourage some people to develop a special file format for electronic paper dolls, together with programms to read them. Those files are called "KiSS", from "Kisekae Set System". "Kisekae ningyou" means "dolls for changing clothes", "Kisekae" means "changing clothes" and is used for paper dolls.
So I made a KiSS file which you can download:
This file is 438 KB large. It contains all the 52 items from my web page and also the 53 additional items mentioned above. To use this file, you need a KiSS programm. You can download one from
For more information see also
The Big KiSS Page
Further Notes
I hope you enjoy playing with this page as much as I enjoyed making it.
The origins of this can be traced far in the past: it first started, I think, with an image I draw 12 june 1994 with black trousers and green shirt. I later scanned this picture with a black-and-white hand-scanner of a friend of mine and added the colour by hand. Fiddling with it, I invented different versions: a version with a grey shirt, a version with bra and trousers, a version with briefs and bra, a version with just the briefs. I also wrote a little C or Pascal programm (I don't remember; I just remember that the compiler was Borland's) wich blended one picture into the other.
Another thing I made was a
Later, playing with Javascript, I discovered how you can make animations with JPEGs instead of GIFs, and as I built the "Any Color"-Page, I decided that dark green should be an animation with a girl taking off her dark green shirt and so on, triggered by the viewer.
Now this is the latest version: a kind of flat virtuel barbie doll you can dress and undress.
Some words to some of the pieces:
The ochre dress is made of linen. The long black dress is made of something my dictionary leaves me alone with: a kind of velvet for the poor. The necklace is made of malachit, a stone I like for its beautiful structure (not its spiritual powers, of course, since I'm a boring rationalist unable to recognize them). The source code says that the bridal dress is used just one time, but that's only a joke: in fact, it was never used. The shoes with the sun and the moon are made by the company THINK!. The first time I saw a ballon cap, I liked it very much, but later, as everybody was wearing one, I changed my view. The leopard dress is something I think to be very ridiculous: as terrible as red underwear, cheap and unerotic. The futuristic dress is owned by a super-heroine I invented, Miss Wonderbra. The traditional japanese dress was added because I admire japanese woodcuts. Usually, those dresses are covered with sophisticated patterns, but I thought that wouldnt fit with my style of drawing.
If you downloaded kleider2.zip, you may add your own pictures to this page, if you want (and have some basic HTML-knowledge). To do so, you must have a GIF-file with transparent background. Lets assume you have a file named "mydress.gif", with a size of, say, 130x273 pixels, and you want to replace my "elikl43.gif", the leopard dress. To do so, you have to place your file in the same directory as my page, and search for the following piece of code:
<!--Friseusenleopardenkleid-->
<div id="div43" style="position:absolute; top:1536px; left:356px;
width:88px; height:161px; background-image:url(elikl43.gif); padding:10px;">
</div>
Now replace "88" with "130", "161" with "273" and "elikl43.gif" with "mydress.gif".
Next, search the following piece of code:
halbx[43] = 44;
halby[43] = 80;
Replace "44" with "65" (half of the width of your picture), and "80" with "136" (half of the height of your picture). That's it! If you now reload the page, your own picture should be displayed.
You may also add your own picture as an additional picture instead of replacing one. In that case, you should increment the value of
var Anzahl = 106;
add your own "halbx" and "halby" values and your own DIV-tag. The ID-property of your DIV-tag should have a name like "div**" with ** being the new number of the image; TOP and LEFT should be the position of the new image, and WIDTH and HEIGHT the corresponding values of your image.
If you think your own picture is that great that you want to share it with the world, you may contact me: jan@janthor.de
Have fun!
August 2000:
In the meantime, I developed a Java applet that allows to costumize Java applet paper dolls in a more conveniant way. For further details, check The Kisekae Java Applet Page.