Enlarge and Reduce HTML Image with ECMAScript

Foreword: In this article I explain how to use ECMAScript, HTML, DOM, and CSS to enlarge and reduce the same image.

By: Chrysanthus Date Published: 28 Mar 2016

Introduction

In this article I explain how to use ECMAScript, HTML, DOM, and CSS to enlarge and reduce the same image. There are two approaches for this. The main approach involves clicking and the second approach involves entering the image surface with the mouse pointer and leaving the image surface with the mouse pointer.

Technique
- For each figure element, you use the same image from the same source.
- You use two different img tags for this same image, and the two different tags are coded on the same place in the HTML document.
- One img tag has the smaller dimension and the other has the bigger dimension.
- The smaller dimension is the default dimension, which is shown initially; and the bigger dimension is not shown (initially).
- The img tag for the bigger dimension is typed in front of the tag for the smaller dimension.
- When a particular mouse even occurs on the smaller dimension, the bigger dimension is shown to cover the smaller dimension.
- When a particular mouse even occurs on the bigger dimension, it is removed and the smaller dimension is shown.

The Example
I use a simple example for illustration. In this example, you have a section 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:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    img#I1A {width:400px; height:400px; display:none; position:absolute; z-index:2}
    img#I1B {width:100px; height:100px}
</style>
<script type="text/ecmascript">
    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";
                }
        }
</script>
</head>
<body>
    <section>
        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 <img src="myImg.jpg" id="I1A" onclick="maxRest()"><img src="myImg.jpg" id="I1B" onclick="maxRest()"> 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
    </section>
</body>
</html>

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 ecmascript 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 ecmascript. 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 place the image tags in an HTML figure element and float the figure element to the left or right. The following code illustrates this (read and try it):

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    img#I1A {width:400px; height:400px; display:none; position:absolute; z-index:2}
    img#I1B {width:100px; height:100px}
    figure {float:left}
</style>
<script type="text/ecmascript">
    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";
                }
        }
</script>
</head>
<body>
    <section>
        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 <figure><img src="myImg.jpg" id="I1A" onclick="maxRest()"><img src="myImg.jpg" id="I1B" onclick="maxRest()"></figure> 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
    </section>
</body>
</html>

Mouse Enter and Mouse Leave Approach
In this approach the ecmascript is completely changed. There is no size variable. There are two functions: one for onmouseenter event for the small dimension, and the other for onmouseleave event for the bigger dimension. onmouseenter, the smaller dimension is removed and the bigger presented. onmouseleave, the bigger dimension is removed and the smaller presented. Read and try the following code that illustrates this:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    img#I1A {width:400px; height:400px; display:none; position:absolute; z-index:2}
    img#I1B {width:100px; height:100px}
    figure {float:left}
</style>
<script type="text/ecmascript">
    function max()
        {
            document.getElementById('I1A').style.display = "inline";
        }
    function rest()
        {
            document.getElementById('I1A').style.display = "none";
        }
</script>
</head>
<body>
    <section>
        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 <figure><img src="myImg.jpg" id="I1A" onmouseleave="rest()"><img src="myImg.jpg" id="I1B" onmouseenter="max()"></figure> 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
    </section>
</body>
</html>

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 lost of resolution for the large image.

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

Chrys

Broad Network

Related Articles

Enlarge and Reduce HTML Image with ECMAScript

Introduction

Related Links

Comments