HTML and CSS Reference
In-Depth Information
Because the image size will be based on the height and width of the client's window, it
is better to base the size of the image on the height of the window rather than the width,
as vertical positioning is less flexible in most browsers. The width of the image will be
scaled automatically as long at the browser knows its height. Example 12.9 demonstrates
how to resize the window and to see its actual dimensions once it has been resized.
EXAMPLE
12.9
<html>
<head>
<title>Planet Earth</title>
<script type="text/javascript">
1
function alert_me(){
alert("This window's outer width is: "
2
+window.outerWidth+" and the outer height is: "
+window.outerHeight);
}
3
function resizeEarth()
{
4
document.images["earth"].style.height =
5
(document.body.clientHeight - 75) * 0.9;
}
</script>
</head>
6 <
body onload="resizeEarth();"
>
7 <div style="margin-top:75px; text-align:center">
<img name="earth"
src="http://recycle4acause.files.wordpress.com/2009/12/earth.jpg"
alt="earth"images/Earth.jpg" alt="earth picture"
onclick="alert_me();"/>
</div>
</body>
</html>
EXPLANATION
1
This is a test to find the dimensions of the window's dimensions before resizing it.
2
The properties of the window object are used to get the height and width of the
window.
3
If the user resizes his browser window, this function will scale the image down to
be proportional to the size of the screen.
4
The
style
property of the object will be used to resize the height of the image. Be-
cause the image was initially given a margin of 75 pixels from the top of the page,
75 is subtracted from the total height of the browser window (clientHeight - 75),
and multiplied by 90 percent.
5, 6
Now resize your browser window manually. The image will not be proportioned
properly, but if you refresh/reload the page, the
onLoad
event handler is triggered
and the
resizeEarth()
function will be called.
7
This style for the image of the earth is defined. If the user clicks the image, a func-
tion called
alert_me()
will be called to display the window dimensions in an alert
dialog box. The results are shown in Figures 12.17, 12.18, and 12.19.
