|
|
Posted by Onideus Mad Hatter on 07/14/05 11:30
Teh new uber streamlined version:
http://www.backwater-productions.net/_test_platform/liquid/index.html
Here's teh code:
: // Browser Reload
: window.onresize = function reload() { window.location.replace('index.html'); }
:
: // Variables
: IE = document.all ? true : false;
: $A = " <div id='";
: $B = "' style='position:absolute; left:";
: $C = "px; top:";
: $D = "px; width:";
: $E = "px; height:";
: $F1 = "px; background:url(";
: $F2 = "px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src= ";
: $F3 = "px'><img src='";
: $G1 = ")'>";
: $G2 = ")'></div>";
: $G3 = "'></div>";
: $G4 = ")' onClick='clickscreen()'></div>";
: $G5 = "' onClick='clickscreen()'></div>";
: N = new Array(4);
: L = new Array(4);
: T = new Array(4);
: W = new Array(4);
: H = new Array(4);
: I = new Array(4);
: c1 = 0;
: c2 = 0;
: placeX = 0;
: placeY = 0;
: screenX = 0;
: screenY = 0;
: hot = 0;
: swidth = document.body.clientWidth;
: sheight = .6 * swidth;
: document.cookie = "farfoos=" + swidth;
:
: // Arrays
: N[1] = 'matrix'; L[1] = 0; T[1] = 0; W[1] = 1000; H[1] = 600; I[1] = 'background1.gif?'+swidth;
: N[2] = 'gray'; L[2] = 0; T[2] = 0; W[2] = 1000; H[2] = 600; I[2] = 'image.php?filename=background2.png&swidth='+swidth;
: N[3] = 'window'; L[3] = 50; T[3] = 200; W[3] = 726; H[3] = 167; I[3] = 'image.php?filename=window.png&swidth='+swidth;
: N[4] = 'text'; L[4] = 250; T[4] = 250; W[4] = 182; H[4] = 21; I[4] = 'image.php?filename=text.png&swidth='+swidth;
:
: // Image Resizing
: while (c1++ < 5)
: {
: H[c1] = H[c1] / W[c1] * ( W[c1] / 1000 * swidth );
: W[c1] = W[c1] / 1000 * swidth;
: }
:
: // Image Placement
: while (c2++ < 5)
: {
: L[c2] = L[c2] / 1000 * swidth;
: T[c2] = T[c2] / 600 * sheight;
: }
:
: // Get The Mouse Coordinates
: document.onmousemove = getMouseXY;
: function getMouseXY(e)
: {
: if (IE) { tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; }
: else { tempX = e.pageX; tempY = e.pageY; }
: }
:
: // Click And Drag Screen
: function clickscreen()
: {
: if (hot == 0)
: {
: placeY = tempY; placeX = tempX; hot = 1;
: farfoos = window.setInterval('movescreen()', 1)
: }
: else
: {
: window.clearInterval(farfoos);
: T[3] = ( tempY - placeY + T[3] ); L[3] = ( tempX - placeX + L[3] ); hot = 0;
: T[4] = ( tempY - placeY + T[4] ); L[4] = ( tempX - placeX + L[4] ); hot = 0;
: }
: }
: function movescreen()
: {
: document.getElementById("window").style.top = ( tempY - placeY + T[3] ) + "px";
: document.getElementById("window").style.left = ( tempX - placeX + L[3] ) + "px";
: document.getElementById("text").style.top = ( tempY - placeY + T[4] ) + "px";
: document.getElementById("text").style.left = ( tempX - placeX + L[4] ) + "px";
: }
:
: // Page Content
: document.write( $A + N[1] + $B + L[1] + $C + T[1] + $D + W[1] + $E + H[1] + $F1 + I[1] + $G1 );
: if (IE)
: {
: document.write( $A + N[2] + $B + L[2] + $C + T[2] + $D + W[2] + $E + H[2] + $F2 + I[2] + $G2 );
: document.write( $A + N[3] + $B + L[3] + $C + T[3] + $D + W[3] + $E + H[3] + $F2 + I[3] + $G4 );
: document.write( $A + N[4] + $B + L[4] + $C + T[4] + $D + W[4] + $E + H[4] + $F2 + I[4] + $G2 );
: }
: else
: {
: document.write( $A + N[2] + $B + L[2] + $C + T[2] + $D + W[2] + $E + H[2] + $F3 + I[2] + $G3 );
: document.write( $A + N[3] + $B + L[3] + $C + T[3] + $D + W[3] + $E + H[3] + $F3 + I[3] + $G5 );
: document.write( $A + N[4] + $B + L[4] + $C + T[4] + $D + W[4] + $E + H[4] + $F3 + I[4] + $G3 );
: }
: document.write("</div>");
The sweet thing about this version is that it's almost entirely
automated, there's only one single php file that controls the image
manipulation, where as the previous version required a custom php file
for each image. This one also has all the images set up in an array,
so adding new images is easy breezy. You simply increase the size of
the array, add the new initial data, and then copy and paste however
many page content document writes you need. And if you've got a whole
bunch you can even streamline the page content further by adding a
third counter and another while statement (since I only had 4 images I
skipped it this time).
The only actual downside to using a liquid site is that you can't get
as good a file size savings on images...but then only if you have the
skill and knowledge to know what you're doing. The problem is if yer
starting images are palette based they're going to resize like shit.
I'm working on a method to solve the problem though. In theory, I
should be able to start out with a true color image, resize it while
it's still in that form and then take that resized image and convert
it into a palette based image...where as if you just went and copied
it as a palette based image first and then resized it'd wind up
looking like shit. I also need to get the php so that it can deal
with 8 bit grayscale based PNG files with alpha transparencies.
--
Onideus Mad Hatter
mhm ¹ x ¹
http://www.backwater-productions.net
Navigation:
[Reply to this message]
|