Rollovers without graphics



Back for more huh?
Here is another thing I've seen and always thought was cool but never really understood it. I still don't but I know how to get it done. :)~

Let's say you have a menu of links that changes so often that making images for the menu would become a great burden, weighing you down till you don't even want to be saved from your own misery. Ouch, that's pretty bad. Here is a quick way to add some feedback to your links that is quite easy and cool.

A note on browser compatibility: well, let's just say the neo-antiquarian won't be enjoying the effect, along with say fire and peanutbutter. ;) I hate to discriminate against those that cannot afford the upgrade but these things do happen...




Step One - Make a menu from a table.

Drag a table onto your page from the objects pallet.



By default GoLive drops a 3x3 table for you.



In the table inspector, change it to a 1x2 for now. Eventually you will want to turn the border to 0 and adjust the cell padding or spacing to your aesthetical whim. For now set up the table for your menu positioning. I usually leave mine as a two-column so I can use the first column to give it some space from the side of the page. You can do this by using the table-inspector but I usually just hold down the option/alt key with my mouse over the cell I want to change and just drag the column or row, while watching the inspector, it gives you a live update of how many pixels your size is at. It's cool, try it.(I tried to get a screen shot of this but it was impossible with the default capture in OSX)



Now, enter some text into your table for a link. Next, select the table cell with your text and assign the cell a color in the inspector pallet.



(As an aside, sometimes it can be frustrating trying to select cells of a table. Go to the Table pallet and use the selection tool there. Very nice.



Great! Step one complete. Your table should look kinda like this one.

 
 Link One

Let's move on.




Step Two - Enter the Code Surgery.

I've looked for easy ways to do this and this is about the best I can find. In the following table I have some code. "onMouseOver" is the color we are going to be changing the cell to. The color is at the very end following the # symbol. "onMouseOut" is the color it wil change back to. These are the colors I am using for this example. You will want to have some colors of your own chosen I'd think. You'll need them shortly, or just use mine and go back and change yours later. For now, Select and Copy the following string of code:

onMouseOver="this.style.backgroundColor='#9FA9A2';" onMouseOut="this.style.backgroundColor='#7D8681';"



And now for the ugly internal workings...
As always, there are a few ways to do this. Before you do either, select the cell that is going to be changing color. (again, use the table selector mentioned above if you find it helps) Since I'm not like those guys in the Matrix, by having the cell selected when you go into the source code, it will be highlighted for you and you won't have to fish around trying to find it. Imagine trying to find where a severed nerve connects to the brian to give a correct response. That's usually what I feel looking at a big page of code (or a small one). That said, you can either select the Source tab at the top of your page,



or select the split pane view at the bottom left of your page.



I'm starting to become partial to the split pane view. It updates dynamically depending on what you have selected above. Cool to watch. Anyway, all roads lead to the top of Mt. Fuji on this one so let's continue. I'm going in. Mask please.

Now, (assuming you have your cell selected) see the highlighted area in the code?



That is our cell. Now, find the <td> tag for the cell we have selected. See the picture. You can see the color we assigned the cell. Insert your scalpel, I mean cursor right after that and the '>' and space once. Now paste the code we copied earlier.



Now, change back to your normal layout mode and preview in your browser. We should have a cell that behaves like this one.

 
 Link One


Hard parts finished. Now is the time however, to change the colors of your cell. Makes it easier later. On to step three.




Step Three - Populate the Navigation.

This is the fun part. Now, let's say you have 10 links. We're going to need 10 rows. Select the cell and go to the cell tab of the inspector. Add the other rows using the 'insta-row' maker.



The reason we only made once row earlier, is so that now we don't have to open up the operating room again, copying and pasting code, avoiding an ugly mal-practice etc. We simply have to create new rows and it automatically creates our new cells with the color change code inside. Otherwise you'd have to copy and paste for every cell in your table. I generally try to avoid that kind of proceedure. Also, if you haven't done allready, turn the table border to 0 and the cell spacing to 0 so your cells apear to sit right next to each other. Finally, let's say you want all your text to be centered. Instead of selecting each line and pushing the align center button up top, do it the quick way. Select the table. Now hold your mouse over the very top of the table and slightly move it up and down till it becomes an arrow pointing down. This means we are going to select the entire column. Select, NOW apply the center text button up top. Perfect. Centers everything for us at once. At this point, your navigation should look like this.

 
 Link One
 Link Two
Link Three
Link Four
Link Five
Link Six
Link Seven
Link Eight
Link Nine
Link Ten

If at this point, you decide to change colors, go back into the code and change it for one of the cells. Then, select the cell and add more just like we have done. It should automatically generate new cells with your new colors. And links are no problem so great. If everything is how you want it, were done!





Back to Tutorials Page
Or visit «sad.ark»
©Jeff Seal 2002