Maximizing and Restoring Images in a Tabular Database Form in HTML - Image Tags
(Page 2 of 4 )
The image tags for all the images at their original large size have been written just below the start tag of the BODY element of the HTML document. This is the tag for the first image:
<img src="watch1Big.jpg" id="I03" style="position:absolute; z-index:2; left:300px; top:100px; border:4px solid blue; display:none" onclick="maxRest('I03')" />
The ID here is the same as that for the File Input element that has the corresponding background image in the tabular form. Each of the images are given a CSS property of “position:absolute” and “z-index:2.” The BODY element is given a z-index value of 0. We shall let the maximized picture appear around the top area of the screen. The position I have chosen is “left:300px; top:100px;”.
Each maximized image has been given a blue border of 4px. Each of these images have been given the display property with the value “none.” Now each of these images is at its original size, which is bigger than the corresponding background image at the File Input control. With the value of the display property at “none,” the image is not displayed and does not occupy space. Each of the tags has the onclick event.
When the corresponding File Input element is clicked, the maxRest() function is called. This function receives as argument the ID of the image. When the maximized image is clicked, this same function is called with the same ID. When the maxRest() is called, it simply checks whether the value of the above display property is “none” or “block.” If it is “none,” the function changes it to “block.” If it is “block,” the function changes it to “none.” When it is “block,” the picture is made to appear in front of its surrounding elements. When it is “none,” the picture does not appear and does not occupy space. This is the JavaScript Code, which you should fit with that of the previous part of the series.
<script type="text/JavaScript">
//function to maximize and restore image
function maxRest(ID)
{
if (document.getElementById(ID).style.display == "none")
{
document.getElementById(ID).style.display = "block";
}
else
(document.getElementById(ID).style.display = "none");
}
</script>
The maximized images are separate images in their original sizes. This is the code for the five images. A good place to fit them is just below the start tag of the BODY element. However, you can fit them anywhere in the body element.
<img src="watch1Big.jpg" id="I03" style="position:absolute; z-index:2; left:300px; top:100px; border:4px solid blue; display:none" onclick="maxRest('I03')" />
<img src="watch2Big.jpg" id="I13" style="position:absolute; z-index:2; left:300px; top:100px; border:4px solid blue; display:none" onclick="maxRest('I13')" />
<img src="watch3Big.jpg" id="I23" style="position:absolute; z-index:2; left:300px; top:100px; border:4px solid blue; display:none" onclick="maxRest('I23')" />
<img src="watch4Big.jpg" id="I33" style="position:absolute; z-index:2; left:300px; top:100px; border:4px solid blue; display:none" onclick="maxRest('I33')" />
<img src="watch5Big.jpg" id="I43" style="position:absolute; z-index:2; left:300px; top:100px; border:4px solid blue; display:none" onclick="maxRest('I43')" />
Next: Second Method of Maximizing and Restoring >>
More HTML Articles
More By Chrysanthus Forcha
