Step Four - User Feedback.  |
The quickest and easiest way to get some sort of user feedback into our collapsible navigation is to simply select our text and tell GoLive we want to make it a link. Do this by highlighting your text and then click on the link button in the inspector pallet (highlighted below – it looks like a blue chain). The inspector pallet will then tell you you have an empty reference. Essentially we've made a link that does nothing. To fix this, add a # sign in the link reference window like I've shown below. This will let GoLive and browsers ingore that there is no real link, but still treat it as a link.
We only need to do this for our Three Main Triggers – Oracle, Fallen, and Innocent. The sub link categories you will simply make actual links to wherever you need them to go! You will see I've added the links to the next examples as we proceed.
There is one more excellent trick we can do. We can add an image to help clue the user in that there is further information waiting for them. Most commonly this is seen as a + or - box or a triangle pointing sideways or down. Common in most interfaces. The great thing about our show/hide engine, is that it has this wife swapping, I mean image swapping capability built in. We just need to get dirty with code again to enable it. Bring it on!
Make yourself some open/close icons, or just use mine here: 
I made mine extra big just so they would be easier to work with. Now, drag the 'plus' icon onto your navigation, wherever you are going to use it. Now, we are going to change the code in our trigger so it will do 2 things. First, it will tell what we want to show/hide. Second, it will also swap images for us, depending on if we are showing or hiding. Copy the code for STEP ONE:
STEP ONE: Show/Hide trigger with image swap:
|
onclick="showrec('id1', 'img1', 'openbox.gif', 'closebox.gif')"
|
STEP TWO: Code for image swap - goes in the <img> tag
This is adding image info to the trigger. Just like we had to have specific id names for each show/hide trigger, we need specific names for each time we swap an image on show/hide.
Note** This does NOT mean you need to have specific names for your actual images!
Since this is the first time we are using an image with our trigger, we are going to call it 'img1' in our code. But, the actual names of the images you plan to use need to be listed in the trigger code like I've shown above. I have named my images OPENBOX.GIF and CLOSEBOX.GIF and you can see how it is set up in the code for step one.
A little explination about the trigger. You will notice that the trigger code we used previously looked like this: onclick="showrec('id1','','','');" Notice all the blank quotations? These are containers so to speak, that will hold code for images. They were empty because we had none. Now, we are using an image in the trigger so we have filled the empty quotes with the image info. So, we are now saying, in the first set of quotes, 'id1' – this is the name of what we are showing or hiding. In the second set of quotes, 'img1' – we are saying, this is the specific instance of image swapping we want to control (even though we use the exact same images, we need to tell it which set on the page to control). The next quote 'openbox.gif' – tells the showhide engine the name of the actual image to use for the closed state. The final set of quotes tells the show/hide engine what the secondary image is called.
That poor explination out of the way, select the top cell (in my case it is the Oracle cell) and switch to your code view again. This time however, we are going to replace the code we added earlier. You should find the code for your cell that looks like the bright red example I've highlighted below. Replace it with the new code from above.
BEFORE:
<tr onclick="showrec('id1','','','');" height="19">
<td valign="middle" bgcolor="#9fa9a2" height="19">
<div align="left">
<a href="#"><img src="openbox.gif" alt="" width="16" height="16" border="0"></a> <a href="#">The Oracle</a></div>
</td>
</tr>
AFTER:
<tr onclick="showrec('id1', 'img1', 'openbox.gif', 'closebox.gif')" height="19">
<td valign="middle" bgcolor="#9fa9a2" height="19">
<div align="left">
<a href="#"><img name="img1" src="openbox.gif" alt="" width="16" height="16" border="0"></a> <a href="#">The Oracle</a></div>
</td>
</tr>
|
Next we are going to give our image the 'img1' name from the trigger. Go copy the code from the STEP TWO table above. In your layout, click on the image and then switch to your code view. The code for your image will be highlighted. Near the beginning of what you have highlighted, you need to find the <img... section. paste your new text right after the <img. See the example above. That is how your code should look. I have highlighted red, what we have added in this last step.
Now, guess what? To do this for the other cells of your navigation, you need to repeat these steps. BUT! be sure to pay close attention that you keep your unique id names. Also, the next time you add an image, you will need to change the 'img1' to 'img2' and then 'img3' in both of the above places for the second and third cells. If all works well, you should have what I have below.
|
|
|
Secrets Revealed
Prophetic Tortise Shell
Divining Rods
|
|
|
|
Secrets Betrayed
Daughters of Man
Anathema
|
|
|
|
Deus Ex Machina
Mitigation
Eschatology
|
That's it! Now go and combine this tutorial with the rollover cell's tutorial to get the look of the example at the beginning of this page. Ouch. That was akin to the torture of Tantalus. Thanks for hanging in!
|
|
