Your Own Code to Enlarge and Reduce HTML Images

Introduction
In this article, I show you how to write code that will cause an HTML image to enlarged itself and cause it to reduce itself to its original size. The enlargement and reduction takes place where the image is. If you want to know how to write code that will enlarge the image in a different place on the web page, then read my article called Producing an Image Gallery by Hand.

You need basic knowledge in HTML, CSS and JavaScript to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

The Example
I will use a simple example for illustration. In this example, you have a DIV element with text and an image anywhere within the text. When you click the image, you see the enlarged image without any change in layout (positions of HTML text and elements). When you then click the enlarged image it reduces to its original size.

This is the code; you can try it and then read the explanation below:

img#I1A {width:400px; height:400px; display:none; position:absolute; z-index:2}
img#I1B {width:100px; height:100px}

var size = "small"
function maxRest()
{
if (size == "small")
{
document.getElementById('I1A').style.display = "inline";
size = "big";
}
else
{
document.getElementById('I1A').style.display = "none";
size = "small";
}
}

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

There are actually two image tags for the same image, but do not worry, the browser does not have to download it twice. When a browser downloads an image, it caches it. The next time it is required in the session, it gets it from its cache. These two images tags lie, one immediately next to the other, in the code. In this example, the two image tags have two different IDs, but they are the same in their other attributes; same source and same onclick attribute.

The two image tags have two different CSS rules; one for each tag. An image is an inline element. When you give an image a CSS absolute position property, and a high z-index value, but you do not give it a left, top, right and bottom position property, at the browser, the image stays where you put it, in the normal flow. It will not occupy space at the browser, but it will cover the other HTML elements or text, near it. This is the property we exploit to enlarge the image.

So there are two image tags for the same image from the server. One results in a small image element and the other results in a large image element. The tag for the small image element has smaller CSS dimensions in its CSS rule. The tag for the large image element has bigger CSS dimensions in its CSS rule.

This is the trick: At the browser, the element resulting from the first image tag is not displayed initially. The two image tags call the same JavaScript function. When you click the small image tag element, the element for the big tag is displayed. While the big image is displayed, when you click either of the displayed images, the big image (element for the large image) is un-displayed (removed from screen). Now, the words "large" and "big" mean the same thing in this article.

Concerning the sequence of the two image tags in the code, the tag for the large image comes first. When it is displayed, it appears extending to the right and downward. So when it is displayed, it covers the smaller image element. Note: there is only one image at the server, but two image elements at the browser. An image element (tag) displays one image.

Let us now look at the code. The CSS rule for the first image tag is:

img#I1A {width:400px; height:400px; display:none; position:absolute; z-index:2}

This is the large image element. You can see its large width and height values. The value of its display property is "none". With this value, it is initially not displayed. The value of its position property is "absolute". The BODY element is assumed to have a z-index value of zero; elements of the CSS normal flow in the BODY element are considered to have a z-index property of 1. So, under normal circumstances, if you want any element to cover other elements near it, give it a z-index property of 2. So the large image element for the above code has a z-index value of 2.

The CSS rule for the small image element is:

img#I1B {width:100px; height:100px}

This rule has just the dimensions for the small image element. Note that the width and height values here are smaller than those of the large image element. The small image element is always there, it does not go away or do any other thing, so this is all it needs for its CSS rule.

Let us now look at the JavaScript. It begins with the global variable,

var size = "small"

This variable, can take the value, "small" or "big". The variable has the value "small", when the big image element is not displayed. It has the value "big" when the big (large) image element is displayed.

When either the small or big image element is clicked, the function, maxRest() is called. It first of all check if the value of the variable, size, is "small". If it is "small", it displays the image and sets the value of the variable, size, to "big". Else, if the value is "big", it removes the large image element from the screen and sets the value of the variable, size, to "small".

The function displays the big image element by giving the value "inline" to its CSS display property. It removes the element by giving the value, "none" to its display property.

Floating Images
If you have tried the above code, you would have noticed that the small initial image element is in a line of text and the height of the line is that of the image. There is a blank space on the left and/or right side of the image. You usually do not want this. The solution to this problem is to float the image to the left or right of the containing element. When you float an image, the text goes to the side, top and/or right or left of the image.

The following code is the above code, with the image floated. This offers a solution to the blank space (s) but introduces a new small new problem. The code works, but the enlarged image appears on a different place on the web page. This is not really a big problem, because users are already used to seeing enlarged image appear on a different place on the page or in a different web page (tab) or a different browser window.

img#I1A {width:400px; height:400px; display:none; position:absolute; z-index:2; float:right}
img#I1B {width:100px; height:100px; float:right}

var size = "small"
function maxRest()
{
if (size == "small")
{
document.getElementById('I1A').style.display = "inline";
size = "big";
}
else
{
document.getElementById('I1A').style.display = "none";
size = "small";
}
}

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Ideal Solution
The ideal way to solve the small problem above is to use an HTML Table element for part or your entire page layout. Try the following code and read the explanation below:

img#I1A {width:400px; height:400px; display:none; position:absolute; z-index:2}
img#I1B {width:100px; height:100px}
table#T1 {float:left}

var size = "small"
function maxRest()
{
if (size == "small")
{
document.getElementById('I1A').style.display = "inline";
size = "big";
}
else
{
document.getElementById('I1A').style.display = "none";
size = "small";
}
}

Some header text go here.

Some left text here.onclick="maxRest()">Some right text here.

Some text here.

Some text and inline elements on the sides of the TABLE go here.

The table element has as a CSS rule. The table has three rows and three columns. The two image tags are in the center cell (center column and middle row). A table cell by default puts its content in the middle. We do not want that now, so this center cell has the, align="left" and valign="top" attributes.

The first row and the last row have their three cells spanned; this is not obligatory. The table cells have borders; this also is not obligatory, but I put them there so that you should understand what is going on.

The Table element offers just part of the layout for the whole web page. So it is floated left so that other text and inline elements for the web page can be on its sides.

Resolution
The image element at the large size should not be higher in resolution (pixels) than the image at the server, otherwise there would be a lost of resolution for the large image.

Now, you have the basic knowledge to enlarge and reduce HTML images by hand; you can modify what you have read to suit your commercial projects.

Chrys