Page 1 —
Netscape Communicator - Another Story Altogether
Just the other week, Taylor and I were working on the Dynamic HTML version of HotWired's new front door. At first our modest goal was, simply, to make stuff fly around the screen. But Anna wanted more; we had to make images grow really big and really small and fly around the screen. And we had to do it for both Netscape's Communicator 4.0 and Microsoft's IE 4.0. Argh! By the end of this column, you'll have a good idea why I like standards so much.
How'd we do it?
Let's start with Microsoft Internet Explorer.
IE 4.0's Document Object Model makes it a snap to change existing HTML code on the fly using any available language, whether it's Java, VBScript, or (my choice for this project) JavaScript. So, to make stuff start to fly, we merely have to name an <img> tag by giving it an ID:
<img id="zoomazoomzoom" style="position: absolute;
left: 10; top: 50; width: 30; height: 30; z-index: 10" src="pike.gif">
The above image can be referred to, in JavaScript code, as
document.all('zoomazoomzoom')
Furthermore, its CSS properties can be read and written. We'll start with the image offscreen (left: -500; top: -500); to place it onscreen (at 100, 100), our code would be:
document.all('zoomazoomzoom').style.left = 100;
document.all('zoomazoomzoom').style.top = 100;
Of course, to make an image zoom requires a little more work. We have to establish its starting width and height, its ending width and height, and the number and size of steps it will take to zoom to the new size. We'll use a scale amount (daScale below) to calculate the height from the width at all points. Noting that laziness can be a virtue, we'll first shorten our object's name to zoomer:
<script language="javascript">
zoomer = document.all('zoomazoomzoom');
daScale = 1; // this is the proportion of height to width
var startWidth = parseInt(zoomer.style.width); // parseInt removes the 'px'
var startHeight = startWidth * daScale;
var endWidth = Math.round(Math.random() * 800 + 200);
var numSteps = Math.round(Math.random() * 10) + 3; // from 3 to 13 steps
var widthIncrement = (endWidth - startWidth) / numSteps; // size of each step
var inc = 0;
</script>
Now that we have all the parameters set, we need to actually do something. We will loop through the same function numSteps times, each time adding widthIncrement to the width of zoomer, and widthIncrement * daScale to the height of zoomer:
<script language="javascript">
function zoom() {
zoomer.style.width = Math.round(startWidth + (widthIncrement * inc));
zoomer.style.height = parseInt(zoomer.style.width) * daScale;
if(inc <= numSteps) {
inc++;
setTimeout('zoom();', 5);
}
}
</script>
If you have IE 4.0, you can see the above code in action.
|
