but here…
html – index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frame Extender</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<!-- <link rel="stylesheet" type="text/css" href="form.css" /> -->
<script language="javascript" type="text/javascript" src="interfaceclass.js"></script>
<script language="javascript" type="text/javascript" src="frameextenderclass.js"></script>
</head>
<body>
<ul id="PhotographMenu">
<li><a href="photographs/pig-one.jpg">Photo of a piggie</a></li>
<li><a href="photographs/penguin-one.jpg">Photo of a penguin</a></li>
<li><a href="photographs/chicken-one.jpg">Photo of a chicken</a></li>
<li><a href="photographs/cat-one.jpg">Photo of a cat</a></li>
<li><a href="photographs/dog-one.jpg">Photo of a dog</a></li>
<li><a href=<?php echo '"'. $_SERVER['PHP_SELF'].'?image=hotels.jpg"'; ?>>Typography work</a></li>
<li><a href="photographs/being-human-cover-spread.jpg">Publication work</a></li>
</ul> <!-- end of PhotographMenu unordered list -->
<div id="PictureFrame" style="border:3px solid black;">
<img src="photographs/pig-one.jpg" <?php $size = getimagesize("photographs/pig-one.jpg"); echo $size[3]; ?> alt="" />
</div> <!-- end of PictureFrame div -->
</body>
</html>
javascript – frameextenderclass.js
function FrameExtender() {
this.startWidth; // starting width of element property
this.startHeight; // starting height of element property
this.oldWidth;
this.oldHeight;
this.setoldWidth = setoldWidth; // method to set oldWidth property
function setoldWidth(x) {
this.oldWidth = x;
}
this.setoldHeight = setoldHeight; // method to set oldHeight property
function setoldHeight(x) {
this.oldHeight = x;
}
this.setoldWH = setoldWH; // method to set both oldHeight and oldWidth properties
function setoldWH(w,h) {
this.oldWidth = w; // call to setoldWidth
this.oldHeight = h; // call setoldHeight
}
this.getoldWidth = getoldWidth; // method to get oldWidth
function getoldWidth() {
return this.oldWidth; // returns oldWidth property
}
this.getoldHeight = getoldHeight; // method gets oldHeight property
function getoldHeight() {
return this.oldHeight; // returns oldHeight property
}
this.element; // element to attach Frame extender property. This element should have one image child.
this.image; // property holds reference to image element that is a child of element
this.setElement = setElement; // method to set element property
function setElement(x) {
if(x.nodeType != 1) return alert("Element can only be an element node."); // Robust - verifies argument is a element node
this.element = x;
this.setImage();
}
this.setstartWidth = setstartWidth; // method to set startWidth property
function setstartWidth(x) {
this.startWidth = x;
}
this.setstartHeight = setstartHeight; // method to set startHeight property
function setstartHeight(x) {
this.startHeight = x;
}
this.setHeightWidth = setHeightWidth; // method to set startHeight and startWidth properties
function setHeightWidth(w,h) {
this.startWidth = w;
this.startHeight = h;
}
this.getElement = getElement; // method gets element property
function getElement() {
return this.element;
}
this.getstartHeight = getstartHeight; // method gets startHeight property
function getstartHeight() {
return this.startHeight;
}
this.getstartWidth = getstartWidth; // method gets startWidth property
function getstartWidth() {
return this.startWidth;
}
this.setImage = setImage;
function setImage() {
if(this.element.nodeType != 1) return alert("An element property must be assigned before image."); // Robust - verifies that element has been assigned a value and that value is a element node.
if(!this.element.getElementsByTagName('img')) return("Element assignment must have a image child node."); // Robust - verfiies that element has a img child node
if(this.element.getElementsByTagName('img').length != 1) alert("Property element is only allowed one img child."); // Robust - verifies that element property only has one img child.
this.image = this.element.getElementsByTagName('img')[0]; // Assigns value to image property.
this.setImageWidth(); // Call: calls setImageWidth
this.setImageHeight(); // Call: calls setImageHeight
}
this.getImage = getImage; // method gets Image property
function getImage() {
return this.image;
}
this.setImageWidth = setImageWidth; // method to set startWidth by referencing image property. Calls setstartWidth.
function setImageWidth() {
if(this.image.nodeType != 1) return alert("setImageWidth method can't be called unless image has been assigned a value."); // Robust - verifies that image property has been assigned a value.
if(!this.image.getAttribute("width")) return alert("image property does not have a width attribute. Therefore, setImageWidth method is unable to finish."); // Robust - verifies that a width property of image value exists in html.
if(typeof parseFloat(this.image.getAttribute("width")) != 'number') return alert("The width attribute of image must be a number."); // Robust - verifies that width attribute of value image in html contains a number value.
this.setstartWidth(this.image.getAttribute('width' )); // Call: calls setstartWidth method and passes width attribute of image node value.
}
this.setImageHeight = setImageHeight; // method to set startHeight by referencing image property. Calls setstartHeight.
function setImageHeight() {
if(this.image.nodeType != 1) return alert("setImageHeight method can't be called unless image has been assigned a value."); // Robust - verifies that image property has been assigned a value.
if(!this.image.getAttribute("height")) return alert("image property does not have a height attribute. Therefore, setImageHeight method is unable to finish."); // Robust - verifies that a height property of image value exists in html.
if(typeof parseFloat(this.image.getAttribute("height")) != 'number') return alert("The height attribute of image must be a number."); // Robust - verifies that height attribute of value image in html contains a number value.
this.setstartHeight(this.image.getAttribute('heigh t')); // Call: calls setstartheight method and passes height attribute of image node value.
}
this.setFrameHeight = setFrameHeight; // method that sets frame height px
function setFrameHeight() {
var h = this.getstartHeight();
this.element.style.height = h+"px";
}
this.setFrameWidth = setFrameWidth; // method that sets frame width px
function setFrameWidth() {
var w = this.getstartWidth();
this.element.style.width = w +"px";
}
this.setFrameSize = setFrameSize; // method sets frame width and height by calling setFrameHeight and setFrameWidth methods
function setFrameSize() {
this.setFrameWidth();
this.setFrameHeight();
}
/*................................................. .....................*/
this.setoldFrameHeight = setoldFrameHeight; // method that sets old frame height px
function setoldFrameHeight() {
var h = this.getoldHeight();
this.element.style.height = h+"px";
}
this.setoldFrameWidth = setoldFrameWidth; // method that sets old frame width px
function setoldFrameWidth() {
var w = this.getoldWidth();
this.element.style.width = w +"px";
}
this.setoldFrameSize = setoldFrameSize; // method sets old frame width and height by calling setoldFrameHeight and setoldFrameWidth methods
function setoldFrameSize() {
this.setoldFrameWidth();
this.setoldFrameHeight();
}
this.interval; // hold reference to animation interval so that it can be cleared/stopped
this.trackWidth; // track width of element property during animation
this.trackHeight; // track height of element property during animation
this.widthdif; // difference between oldWidth and newWidth property
this.heightdif; // difference between oldHeight and newHeight property
this.settrackWidth = settrackWidth; // method sets trackWidth property
function settrackWidth(x) {
this.trackWidth = x;
}
this.settrackHeight = settrackHeight; // method sets trackHeight property
function settrackHeight(x) {
this.trackHeight = x;
}
this.setwidthDif = setwidthDif; // method sets widthdif property
function setwidthDif(x) {
var ow; var nw; // local variables
ow = this.getoldWidth(); nw = this.getstartWidth(); // Call: sets ow and nw equal to oldWidth and startWidth property value
this.widthdif = nw-ow;
}
this.setheightDif = setheightDif; // method sets heightdif property
function setheightDif() {
var oh; var nh; // local variables
oh = this.getoldHeight(); nh = this.getstartHeight(); // Call: sets oh and nh equal to oldHeight and startHeight property value
this.heightdif = nh-oh;
}
this.gettrackWidth = gettrackWidth; // method gets trackWidth property
function gettrackWidth() {
return this.trackWidth;
}
this.gettrackHeight = gettrackHeight; // method gets trackHeight property
function gettrackHeight() {
return this.trackHeight;
}
this.getwidthDif = getwidthDif; // method gets widthDif property
function getwidthDif() {
return this.widthdif;
}
this.getheightDif = getheightDif; // method gets heightDif
function getheightDif() {
return this.heightdif;
}
this.setwhDif = setwhDif; // method that calls setwidthDif and setheightDif
function setwhDif() {
this.setwidthDif(); // Call: sets widthDif property to difference between new and old width
this.setheightDif(); // Call: sets heightDif property to difference between new and old height
}
this.animateElement = animateElement; // method that begins animation
function animateElement() {
this.setwhDif();
//alert([this.getwidthDif(),this.getheightDif()]);
this.decreaseSizeWidth(); // !IMPORTANT IMPORTANT
}
this.initialvector; // property holds value of inital hypotonus of element property
this.currentvector; // property holds value of current hypotonus size of element property
this.setinitialVector = setinitialVector; // method sets initialvector property
function setinitialVector() {
var h;var ow; var oh; // local variables
ow = this.getoldWidth(); // Call: get oldWidth property
oh = this.getoldHeight(); // Call: get oldheight property
h = Math.sqrt(((ow*ow)+(oh*oh))); // calculates length of hypotoneus of rectangle with oldheight and oldWidth proportions
this.initialvector = h; // Assignment: Assigns value of variable h to initalVector property
//alert(this.getinitialVector());
}
this.getinitialVector = getinitialVector; // method gets initialvector property
function getinitialVector() {
return this.initialvector;
}
this.displacement; // main property hld displacement
this.wdisplacement; // property holds w value of displacement for interval
this.hdisplacement; // property holds h value of displacement for interval
this.initialprop; // initial proportional value of y/x or oldHeight/oldWidth property
this.setDisplacement = setDisplacement; // method sets main displacement
function setDisplacement(x) {
this.setwDisplacement(x); // Call: sets wdisplacement property to argument value
this.sethDisplacement(x); // Call: sets hdisplacement property to argument value
}
this.setwDisplacement = setwDisplacement; // method sets displacement property
function setwDisplacement(x) {
this.wdisplacement = x;
}
this.sethDisplacement = sethDisplacement; // method sets displacement property
function sethDisplacement(x) {
this.hdisplacement = x;
}
this.getwDisplacement = getwDisplacement; // method gets displacement
function getwDisplacement() {
if(typeof this.wdisplacement != 'number') return 5; else return this.wdisplacement;
}
this.gethDisplacement = gethDisplacement; // method gets displacement
function gethDisplacement() {
if(typeof this.hdisplacement != 'number') return 5; else return this.hdisplacement;
}
this.setinitialProp = setinitialProp; // method sets initialprop property to oldheight/oldWidth or y/x
function setinitialProp() {
var p; var ow; var oh; // local variables
ow = this.getoldWidth(); // Call: gets oldWidth property from getoldWidth method
oh = this.getoldHeight(); // Call: gets oldHeight property from getoldHeight method
p = oh/ow; // calculates for old proportions
this.initialprop = p; // Assignment: assigns value of variable p to initialprop property
}
this.getinitialProp = getinitialProp; // method gets initialprop property
function getinitialProp() {
return this.initialprop;
}
this.decreaseSizeProp = decreaseSizeProp; // method decrease width and height propotionally - called from interval
function decreaseSizeProp() {
//this.setinitialVector(); // Call: calls method setinitialVector to set initialvector property to hypotonus size of element
this.settrackWidth(this.getoldWidth()); // Call: sets trackWidth property to value of oldWidth property
this.settrackHeight(this.getoldHeight()); // Call: sets trackHeight property to value of oldHeight property
this.setDisplacement(20); // IMPORTANT- Call: sets displacement value as argument
this.setinitialProp(); // Call: sets initialprop property equal to oldHeight/oldWidth or y/x
this.setcurrentFrame(0); // Call: sets currentframe property to zero by calling setcurrentFrame property
this.startAnimationProp();
}
this.typeDisplacement = typeDisplacement; // methods calls both wtypeDisplacement and htypeDisplacement methods
function typeDisplacement() {
this.wtypeDisplacement(); // Call: calls wtypeDisplacement method to set wdisplacement property
this.htypeDisplacement(); // Call: calls htypeDisplacement method to set hdisplacement property
}
this.wtypeDisplacement = wtypeDisplacement; // method determines if the width is a negative or positive change
function wtypeDisplacement() {
var wd; var d; // local variable
wd = this.getwidthDif(); // Call: gets widthdif property by calling getwidthDif property
d = this.getwDisplacement();
if(wd < 0) this.setwDisplacement(((1-2)*d));
}