|
This one is Sally's idea, an extension of lessons 1 + 2. So there are three changes to recognize. One function- two moves. In the following code you will see we now have two tables. Each table has two limiting moves. Table one says if it is more than -50 pixels from the left side of the screen then move it 10pixels. How can something be minus fifty pixels from the left? Well, it actually means that part of the table is going off screen out of view by 50 pixels. function split1() { if (document.all.table1.style.posLeft > -50) document.all.table1.style.posLeft -=10 if (document.all.table2.style.posLeft < 500) document.all.table2.style.posLeft +=10 } Table two says if it is less than 500 pixels from the left side of the screen then move it 10 pixels. So table one starts in the center and moves left 10 pixels at a time. And table two moves ten pixels at a time to the right. The second function Shows where they begin and end and gives the pixels moved as shown in the following code. function split2() { if (document.all.table1.style.posLeft < 225) document.all.table1.style.posLeft +=10 if (document.all.table2.style.posLeft > 225) document.all.table2.style.posLeft -=10 } Traditional link We've dumped the Rom buttons and used a text link instead. Remember what the code for those buttons looked like? We had to use a form tag and include the button url <input type="button" borderimage="file://rom/borders/buttonborder4 .bif" text=white value="L" onClick=limitedL()></form> Now the code looks like this. <a href="javascript:void()" onClick="split1()">Split</a> This appears as a regular link but instead of a URL the javascript void still gives us our sound per click. This is sometimes wanted to count the pixel jumps. The onClick activates the function. Z-index In the CSS positioning code the Z-index or layering index has been added. Layer 0 would be the screen so we have two layers of tables; both of them at the exact same spot.. #table1 {position:absolute; top:1300; left:225;z-index:1} #table2 {position:absolute; top:1300; left:225;z-index:2} More Z-index information can be found here:
Split Return |
| Cool eh |