Maximizing and Restoring HTML Images with the Absolute Method - Accomplishing it with JavaScript and CSS continued
(Page 3 of 4 )
To simplify the calculations of the positions of the elements in the web page, I have given the body element zero margins in the CSS. The main image, referred to by the class “watch,” has been given the initial dimensions of “width:187px; height:224px;” respectively. I have given its position property the relative value of (left:0px; top:0px), so that it should remain in the second cell. As I said above, the absolute position of any element is measured from the top-left corner of the web page (client area). If you want to position an element independently anywhere on the web page, you have to use the absolute position.
In order to place each of the small images at the bottom right of the main image, I have given each of them the absolute position “position:absolute; left:256px; top:193px;” respectively. The two small images have also been given class names in the CSS. Now add these class names to the second Table Cell element in the code, so that its content looks as follows:
<img id="w1" src="watch.jpg" class="watch" />
<img id="m1" src="maximize.jpg" class="maximize" />
<img id="r1" src="restore.jpg" class="restore" />
Before we carry on, let us see the result in the browser. Save the file, max_rest.htm, and then open it with your browser. The overall image should look like that of Fig.3. There should be a space (of 100px width) between the left edge of the page and main image.
The main image now has the initial size that we want. You should see the small restoration image at the bottom right of the main image. The truth now is that the small restoration image is on top of the small maximization image, which is on top of the main image. We cannot see the maximization image since it is covered by the restoration image.
We have forced the normal size of the main image to be 187 X 224 pixels. When the web page is loaded for the first time with the main image at its normal size, we are supposed to see the small maximization image and not the small restoration image on the main image. So let us give the visibility property for the restoration image the value “hidden”. Modify the fourth line of the style sheet to obtain the following:
img.restore {position:absolute; left:256px; top:193px; visibility:hidden}
Save the HTML file and open it in your browser. You should see the maximization image at the bottom right of the main image. This is what we want to see when the web page is loaded into the browser for the first time.
The z-index is the CSS property that tells the browser what image should be on top the other. When the main image is at its normal size, we want to be sure that the maximization image is on top of it. When the main image is at its larger dimensions, we want to be sure that the restoration image is on top. So let us give the main image a z–index value of 1, and each of the small images a z-index value of 2. Now modify the last three statements of the style sheet so that they look as follows:
img.watch {position:relative; width:187px; height:224px; left:0px; top:0px; z-index:1}
img.maximize {position:absolute; left:256px; top:193px; z-index:2}
img.restore {position:absolute; left:256px; top:193px; visibility:hidden; z-index:2}
As we said above, when you click the maximization image, a JavaScript function is called, which uses a CSS property to change (increase) the dimensions of the main image. Type the following JavaScript below the style sheet as part of the content of the HTML head:
<script type="text/javascript">
//function to maximize the image.
function maximizeFn()
{
document.getElementById("w1").style.width="374";
document.getElementById("w1").style.height="448";
document.getElementById("m1").style.visibility="hidden";
document.getElementById("r1").style.visibility="visible";
document.getElementById("r1").style.left="443";
document.getElementById("r1").style.top="417";
}
//function to restore the image.
function restoreFn()
{
document.getElementById("w1").style.width="187";
document.getElementById("w1").style.height="224";
document.getElementById("m1").style.visibility="visible";
document.getElementById("r1").style.visibility="hidden";
document.getElementById("r1").style.left="256";
document.getElementById("r1").style.top="193";
}
</script>
The maximizeFn() function will increase (maximize) the dimensions of the main image. The first line of this function increases the width to 374 px. The second line increases the height to 448 px. When the main image is maximized, we do not have to see the small maximization image, but we have to see the small restoration image. So the third line hides the maximization image and the fourth line makes the restoration image visible. While the main image is maximized, the restoration image should be at its bottom right corner. The fifth and sixth lines do this. Note how we have made use of the IDs of the image tags in this function.
The restoreFn() function will decrease (restore) the dimensions of the main image. The first line of this function decreases the width back to 187 px. The second line decreases the height back to 224 px. When the main image is restored, we do not have to see the small restoration image, but we have to see the small maximization image. So the third line makes the maximization image visible, and the fourth line hides the restoration image. The fifth and sixth lines bring the hidden restoration image to its original position.
We now have to make the maximization and restoration images clickable. We do this by adding the onclick event to their image tags. The maximizeFn() function will respond to the onclick event of the maximization image tag and the restoreFn() function will respond to the onclick event of the restoration image tag. Modify the small image tags to have the following:
<img id="m1" src="maximize.jpg" class="maximize" onclick="maximizeFn()" />
<img id="r1" src="restore.jpg" class="restore" onclick="restoreFn()" />
Next: Testing and Finalizing >>
More HTML Articles
More By Chrysanthus Forcha
