Of Buttons and Menus

To create the button bar at the top of my new Zudescape pages, I went through a series of simple steps. Remembering that I am not a programmer or a web developer, the steps that I took are quite easy for anyone to follow. The technique that I am applying is a very old web technology which essentially replaces one GIF image with another when the mouse passes over it. Here’s how I did it.

1. Create the buttons themselves. This was achieved using the Glassy Button Generator website. I simply specified the color, the roll-over color, the text to put on the button and the size, I selected a transparent background, then downloaded the resulting ZIP file to my computer. I then extracted the contents of the ZIP file and uploaded the GIF images to the Zude File Manager, renaming each one to represent the text on the button. Remember to keep the suffix on the filename the same though, because “AboutMe-1.gif” is the mouseover version and “AboutMe-0.gif” is the plain version. Make a note of the Zude File ID number that is assigned to each image as you upload it, as this will be vital later. I found it useful to create a list in Notepad of all the filenames (there will be two for each button) then beside each one paste the File ID number.

2. Create the mouse over script. This was achieved using the Dual Mouseover Machine Generator website. Once again, I am not a great web developer, so I rely on script generators to do most of the work for me. Put the File ID, (including the full URL), into the boxes for each button. This generator is designed to change a third image depending on which of the two buttons is moused over. I didn’t use this functionality so I avoided the last set of boxes. The generator will create two scripts, one goes into the HEAD of every page that will use your button bar, the other is the Object code that you can drag and drop onto your Zudescape pages. You can now copy and paste the relevant parts of the scripts to create more entries for more buttons (no, you‘re not limited to only two menu options), and edit them with the relevant File ID numbers. But wait, there’s more…

3. Separate out the buttons. You my have noticed that in the above step I didn’t mention the URLs for the pages that the buttons will link to. This is because I am not using the URLs from within the script. As I found out when I was creating the button for  the “Enter Page” of my Zudescape, launching a link from within a script will open the Zude page within the current Zude page, resulting in two Zude Menu Bars and two lots of advertising along the bottom of the screen. Instead, we are going to use Zude’s Action-Click property for an Object to make a link to another Zude page when your new shiny button is clicked. That said, the Action-Click property applies to an Object, not to the contents of the Object. If you were to drag and drop our resulting Object script from the Dual Mouseover Machine Generator website onto your Zudescape page and edit the Action-Click property, it would apply to all the buttons in the object, meaning that no matter which button you clicked, it would link to the same page. Not exactly what we wanted from a button bar, is it?! So, instead, we carve up our Object script into individual Objects, copying and pasting each button out of the script as a new Object. Now you can align the buttons on the page as you want them, then apply the Action-Click property to each one. DON’T FORGET TO SAVE for each button, because if you accidentally click the button once you have applied the Action-Click property you will be whisked away to your target page and the changes will be lost. It is best to leave the Action-Click property to last, setting the background to transparent for each Object, removing headers, footers & borders first, adjusting exact dimensions and co-ordinates next, and then finally setting the Action-Click property. Then save! Do not forget! You have been warned!

4. Making it all work. You must ensure that the script for the HEAD that was generated by the Dual Mouseover Machine Generator website has been placed into the HEAD section of your page. You can do this by accessing “Edit – Edit Page Properties” from the Zude Menu Bar, then selecting the “Advanced” tab. Paste the script into the HEAD textbox and save it. Without this part the buttons will still work fine, but the mouseover effect won’t happen. Don’t forget that for every extra button you add to your button bar object, you need to add extra lines to the HEAD section of the script as well.

If you have any comments or questions about this process, or need specific help with getting it working, please leave me a comment on this Blog entry and I‘ll see what I can do. Remember, I’m not an expert! If I can do it, I’m sure you can do it too.