How Do These Buttons Work !!!!???

Go TO: http://www.discovermoneymerge.com/demo
and on the left you will see a video in flash and on the right of the video you will see three buttons. What i want to know is how the web developers to that site make it so that when click on the three buttons to the right, the flash video changes and the rest of the page doesn't reload with it. Only the flash video changes and nothing else. I also know that the buttons are just images and that some how they are assigned some code that when you rollover them it makes to button interactive and it switches to a different image that makes it appear highlighted.

That was done in flash. They was written in Action Script. As for the buttons changing colours and highlighting, they are called Rollover Images.

The rollover images can be achieved a few different ways, the easiest being with CSS.

Firstly you add css to give it its default appearance:

Code: Select all

div#menu img{
    background-image: url(myfolder/images/backgroundimg.jpg);
}

then you add the CSS Hover property for that image:

Code: Select all

div#menu img:hover{
    background-image: url(myfolder/images/backgroundimg2.jpg);
}

What this does is whenever the mouse rolls over it, the background image from the hover will replace the old image. Ofcourse there are downfalls, mainly that :hover is not entirely supported, but your other reasonable alternative is JavaScript, which is still widely supported but not as widely as CSS (and can be turned off by users).

Hope this helps.