Wednesday, November 23, 2011

Javascript - One Image, Two Buttons

Downloading one image instead of several is one way to optimize web performance. This code shows how to use different portions of the image at various points in the page. 
<html>
    <head>
         <style type="text/css">
            .button-up {
                position: absolute;
                clip: rect(215px 49px 270px 0);
            }
            .button-down {
                position: absolute;
                clip: rect(0 49px 50px 0);
            }
        </style>

    </head>
    <body>
        <div id="content">
                <span id="upButton" style="position:absolute;top:-215;left:200;width:50px;height:50px;">
                    <img src="UpAndDownButtons.jpg" class="button-up" onclick="pressButton('upButton', 'downButton')"/>
                </span>
                <span id="downButton" style="position:absolute;top:2;left:200;width:50px;height:50px;">
                    <img src="UpAndDownButtons.jpg" class="button-down" onclick="pressButton('downButton', 'upButton')"/>
                </span>
        </div>
        <script type="text/javascript">

            function pressButton(fromButton, toButton) {
                var from = document.getElementById(fromButton);
                from.style.display = "none";

                var to = document.getElementById(toButton);
                to.style.display = "block";
            }

            function initPage() {
                var up = document.getElementById("upButton");
                up.style.display = "block";
                var down = document.getElementById("downButton");
                down.style.display = "none";
            }

            initPage();
        </script>
    </body>
</html>

at