Lightweight Rollovers

Exercise 1

Draw a table on a page. Make it 2 columns by 1 row, any size you like. Set cell spacing, cell margin and border values to zero (0) in the Inspector. When you have created the table, click once on one of the cells to select it and then look at the Inspector. You will see two Extend buttons in the Cell tab. Click on the topmost one. This will bring up a dialogue window. Click the New button to open the code editor.

Step 2 is to enter a Name, which defines the type of declaration you’re doing. Type style.

Next, add the following code snippet in the Value field:
background-color: #CACACA;

Now, click OK to confirm the style you just created. Then click New again to make a new declaration, this time call it onMouseover (which is a Javascript event handler). Then in the value field, type the following code:
this.style.backgroundColor='#FFFF00'; style.cursor='pointer'
Note that the single quotes around the colour name are necessary for this to work. Click OK to confirm.

Finally we’re going to reset the rollover with another Javascript event, onMouseout. Click New again, type onMouseout in Name and the following in Value:
this.style.backgroundColor='#CACACA'
This brings the rollover back to the neutral state, otherwise it would "stick" in the mouseover state. Again, remember those single quotes around the colour name. You will also notice that I have omitted the ending semi-colon on both mouse events (Mouseover and Mouseout) as well as the cursor style for Mouseout —this is as it should be. So, click OK to confirm the input. Click OK again to save every code bit and return to the layout view. Last, put some content in your cells —text or graphic— because otherwise the rollover won’t work at all. Now test your html rollover in a browser. Any modern, javascript-enabled browser will do. What you should see is a cell that is greyish in the normal state, yellow on mouseover and back to greyish when you move the pointer off the cell. It may be necessary to tweak a few other details, in the text styles f.i, to get everything as you like it (for example, set cell alignment to middle and text alignment to center to have the text land square in the middle of the cell). If it’s not working, go back and look at your code input. Check for misspellings, use of commas instead of periods; things like that.