Javascript Zoom / Locator Continued, Conclusion
Copy the whole thing, (CTRL+A, CTRL+C) and paste into your text editor of choice; I use SciTE
Remove all tabs, ie: replace all tabs (\t) with "" (empty string); make sure you tick "Transform backslash expressions"
Add a line at the top that says var i = Array();
Now save the files as "avatar_list.js"
In this step we will cut the mosaic into pieces, appropriate for zooming-in. Open the mosaic in Photoshop, and cut out 12 x 6 pieces, most being 840x693 pixels, and the bottom ones being 840x423 pixels. This takes a lot of time... The images need to be name [column]x[row].jpg
This shows how each image needs to be named; you end up with 72 images; it takes a while to do, and I'm sure there is a better way, eg: a photoshop action, or a different program with a feature to do this, but I don't have one at hand. It took me about 1.5 hours to cut out the 72 images - depending on your skill with keyboard and mouse, expect about the same...
In this step we will integrate the JavaScript in a html file, useful for zooming and displaying the mosaic. You will need to download three files, so right-click and choose save-as on the following:-
avatar_locator.js: This is the script that makes the avatar locator work.
avatar_locator.css: Describes the look & feel of some components of the avatar locator.
ocau_mosaic_index.htm: Example mosaic file.
Note: If you have followed the instructions here completely as described, then the script should work without any modifications, so the rest of this tutorial simply explains briefly how it all works...
Open ocau_mosaic_index.htm in SciTE, and I'll briefly describe what the most important lines do, then you can modify ocau_mosaic_index.htm to work with your avatar. Please note that the names of each DIV is hard-coded in the JS, so don't change the names of the divs.
This line creates the image-map; parameters for function makeMap(numXTile, numYTile, tileWidth, tileHeight) are:
numXTile - number of tiles across
numYTile - number of tiles down
tileWidth - width of individual tile
tileHeight - height of individual tile
This div is used for highlighting the image, when it's found on the map image.
This div contains the "zoomed-in" image, and is displayed only when you zoom in.
This div highlights the image (fades red for a second), when you zoom in; it MUST be the same size of each avatar in your mosaic.
This contains the map image, fairly self-explanitory.
This contains the explanation, and you may change this to whatever you see fit; you can change the style (explainBox), in the css file (avatar_locatos.css).
These are the arrows you can click on when you are zoomed in.
Conclusion:
Well, that's it, you should now have a mosaic, with a fully functioning zoom-in and locator JavaScript. In hindsight, this was quite a manual process, and I'm certain that a lot of it could be scripted and automated quite a lot. For example step 5, the JavaScript part, could be completely done in a php or similar CGI style script. I might even do that one day, if there is enough of a need for it.
For an example of what the end result should look like, check out the OCAU Avatar Mosaic!
|
