Creating graphic rollover buttons with WebYep

I started looking into this for someone a little while back and it’s taken sometime to come up with a solution, that is not only easy to create in freeway but is also easy to adjust via a browser. The main aim was to be able to create graphic rollover buttons that were generated via WebYep and also completely adjustable via a browser (including the url link)

so the result is a little tutorial written below but before you read the instructions have a look at the example http://www.max-izzat.co.uk/rollovers/vis.php

Ok first thing I have had to do is chuck out all the methods I had worked out and described to a few people before (sorry about that to those people) the old method just wouldn’t allow me to change the URL and for a cms button that’s a bigeeeee but the result of the new method is no in-lines items no multiple layers on top of others items and no javascript and its really simple to make, though its taken loads of head scratching.

[b:778426fde9]FREEWAY ARTWORK[/b:778426fde9] First you start off with creating a page called [b:778426fde9]index.php[/b:778426fde9] and a second page called [b:778426fde9]admin.php[/b:778426fde9] in Freeway.(the names are not critical as long as you end up with two pages) navigate to the admin page and insert a WebYep image item in the normal way. Adjust this to the size you want call this anything you like in the inspector, but in the WebYep action palette name the WebYep image item: [b:778426fde9]button1[/b:778426fde9] and set global drop down to true. Duplicate it and place this duplicate item below the original and name this one in the WebYep action palette: [b:778426fde9]button1b[/b:778426fde9] Now highlight both buttons and duplicate these two for the next set of buttons. Adjust the names of these items within the WebYep action palette: [b:778426fde9]button2[/b:778426fde9] and [b:778426fde9]button2b[/b:778426fde9] You should now see 4 empty boxes

Ok Now highlite all four boxes and copy and go to your index page and paste. You should now see the 4 buttons on this page

Now this is the precise part, click on your first button and name it in the inspector pallette: [b:778426fde9]menu1[/b:778426fde9] click on the box below (which will be the rollover state and name it: [b:778426fde9]menu-1[/b:778426fde9] go to to the next set of buttons and click on the top button and name this one in the inspector palette: [b:778426fde9]menu2[/b:778426fde9] and the corresponding button below: [b:778426fde9]menu-2[/b:778426fde9]

[b:778426fde9]CSS PART[/b:778426fde9] Now for targeting these items with CSS. Click on edit styles and create a new style in the tag field type this in make sure there is nothing in the name field

#menu-1

then duplicate this style and adjust the tag field to

#menu-1:hover

this time click on extended button to launch the extended attributes window, click the new button and copy this into the name field: [b:778426fde9]opacity[/b:778426fde9] and this into the Value field: [b:778426fde9]0; -moz-opacity: 0; filter:alpha(opacity=0)[/b:778426fde9] click ok now duplicate both these styles and re-name

#menu-2
#menu-2:hover

you should end up with a list in the edit styles window that looks like this

sheet1
#menu-1
#menu-1:hover
#menu-2
#menu-2:hover
h1
h2
h3
p
strong

click ok to close the window now finally align the sets of buttons using item align so you should end up with two stacks

remember to add a WebYep unlock either on the admin page or on the index page and apply the WebYep init code action and rename the pages with a php extension rather than html.

All you need to do now is create your buttons graphics and upload then via a browser. The advantage of this method is you or your client can change the look of these buttons and or the url links without ever republishing from Freeway as its all handled by WebYep.

max

quote

To all the people that wanted this method to work in Internet explorer 6…… Yipeeee…. it can now….

Well with a little bit of help through the use of an extra uploaded .htc document and an amended style sheet.

I will adjust this tutorial to incorporate this, in the next few days

max it’s better to be lucky that clever.. :o)

---

tutorials mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options

quote