Maximizing and Restoring HTML Images with the Image Map Method

I assume you already know how to create an image map. We shall call the clickable area "clickMaxRes" (meaning, click to maximize or restore). With simple calculation you can figure out that the start of a clickable area of 16 X 16 pixels, at the bottom right end of the normal sized image, will begin at approximately 171px, 208px of the image. It will end at the bottom right end of the main image, which is approximately 187px, 224px. With this in mind, replace the image code in the body element of the HTML file with the following:

<img id="w1" src="watch.jpg" usemap ="#clickMaxRest" class="watch" />

<map id ="clickMaxRest" name="clickMaxRest">

<area id = "a1" shape ="rect" coords ="171,208,187,224" onclick="maximizeRestore()" title="Maximize" />

</map>

The usemap attribute has been given the value #clickMaxRest, so the ID for the map tag has been given the value clickMaxRest. Its name attribute has been given the same value, clickMaxRest, for backward compatibility with older browsers. The area tag has been given the ID a1 (we shall see its function shortly). As indicated above, the start x and y coordinates for the clickable area are (171px, 208px). The end x and y coordinates are (187px, 224px), which are the bottom right end coordinates. Would it not be nice for a tool tip to display the text "Maximize" when the mouse pointer is over the clickable maximization area? This is why the area tag ends with title="Maximize".

When the triangle is clicked, a JavaScript function will be called. This is the only function in the JavaScript. It will be called maximizeRestore(). That is why you have onclick="maximizeRestore()" for the onclick event in the area tag above. A code block in this function will increase the dimensions of the image using the style sheet. It will also give the image new image-map coordinates, where the clickable area will be at the bottom right end of the enlarged (maximized) image. The maximized image is twice the size of the normal-sized image, so the area containing the triangle will be approximately 32px X 32px.

When the triangle is clicked at the maximized size, the same JavaScript function will be called. Another code block in this function will decrease the dimensions of the image back to its normal size using the style sheet. It will also give the image the old image-map coordinates. Type the following JavaScript in the head element of the HTML file below the style sheet:

<script type="text/javascript">

//flag to indicate whether the image is maximized or restored

var restored = true; 

//function to maximize or restore the main image.

function maximizeRestore()

{

if (restored == true)

{//block to maximize the image.

document.getElementById("w1").style.width="374";

document.getElementById("w1").style.height="448";

document.getElementById("a1").coords="342,416,374,448";

document.getElementById("a1").title="Restore";

restored = false;

}

else

{//block to restore the image.

document.getElementById("w1").style.width="187";

document.getElementById("w1").style.height="224";

document.getElementById("a1").coords="171,208,187,224";

document.getElementById("a1").title="Maximize";

restored = true;

}

}

</script>

There is a variable in the script called "restored." Its value at the start of the script is Boolean TRUE. This is a flag that indicates whether the image is restored or maximized. When the web page is loaded, the image is initially at the restored size, so the value is initially TRUE. If you click the triangle, the JavaScript function maximizeRestore() will be called. This is the only function in the script. Since the Restored variable is true, the first code block will be executed. The first line in this code increases the width of the image. The second line in the code increases the height of the image. The third line sets the new clickable area of the image. The fourth line gives the new clickable area the title "Restored," so that if the user's mouse pointer is over it, the word "Restored" will appear to indicate that clicking the area will restore the image. Since the image is now maximized, the fifth line sets the Restored flag to False.

If you click the triangle while the image is maximized,, the JavaScript function will be called. Since the Restored flag has been set to False, the second code block of the function will be executed. The first line of this block decreases the width of the image. The second line in the code decreases the height of the image. The third line sets the former clickable area of the image back. The fourth line gives the former clickable area its former title, "Maximize," so that if the user's mouse pointer is over it, the word "Maximize" will appear to indicate that clicking the area will maximize the image. Since the image is now restored, the fifth line sets the Restored flag to True, as it was before.