PDA

View Full Version : Custom Buttons


Chapo
02-11-2012, 12:53 PM
Ok...i really liked these buttons, how are they made ?
http://www.sciencechicago.com/

DWcourse
02-11-2012, 02:52 PM
Simple CSS rollover buttons. Two buttons in one image that is repositioned on rollover. Here's one of the images: http://www.sciencechicago.com/images/menu-about.gif

Chapo
02-11-2012, 07:16 PM
But how those images fit, they seem different sizes.. do they overlap to the button next to it ?

DWcourse
02-11-2012, 07:27 PM
This rule forces the overlap:

#main-nav li {
float: left;
margin-left: -11px;
position: relative;
}

Chapo
02-12-2012, 05:55 PM
And what about the animation that occurs above the button when its hovered ?

DWcourse
02-12-2012, 06:24 PM
It's in this script:

<script type="text/javascript">
params = {swliveconnect: true, wmode: "transparent"};
flashvars = {};
attributes = {};

swfobject.embedSWF("/swf/nav.swf", "nav-movie", "960", "97", "8", "/swf/expressinstall.swf", flashvars, params, attributes);

/*
* BEGIN Nav Handling
*/
function thisMovie(movieName){
return navigator.appName.indexOf('Microsoft') != -1 ? window[movieName] : document[movieName] ;
}

function deactivateCurrentClip() {
thisMovie("nav-movie").deactivateCurrentClip();
}

// Nav Item 1
function activateNavAnim1() {
thisMovie("nav-movie").activateScienceSaturdays();
}

function activateSubNav1(){
document.getElementById('highlightmenu').style.dis play="block";
document.getElementById('menu-highlights').style.backgroundPosition="bottom";
}

function deactivateSubNav1(){
TList3=document.getElementById('highlightmenu').st yle.display='none';
document.getElementById('menu-highlights').style.backgroundPosition="top";
deactivateCurrentClip();
}

// Nav Item 2
function activateNavAnim2() {
thisMovie("nav-movie").activateScienceConversations();
}

// Nav Item 3
function activateNavAnim3() {
thisMovie("nav-movie").activateLabFest();
}

// Nav Item 4
function activateNavAnim4() {
thisMovie("nav-movie").activateTeachersLounge();
}

function activateSubNav4(){
document.getElementById('teachermenu').style.displ ay="block";
document.getElementById('iframe').style.display="block";
document.getElementById('menu-teachers').style.backgroundPosition="bottom";
}

function deactivateSubNav4(){
TList=document.getElementById('teachermenu').style .display='none';
document.getElementById('iframe').style.display="none";
document.getElementById('menu-teachers').style.backgroundPosition="top";
deactivateCurrentClip();
}

// Nav Item 5
function activateNavAnim5() {
thisMovie("nav-movie").activateFindAScientist();
}

// Nav Item 6
function activateNavAnim6() {
thisMovie("nav-movie").activateLab();
}

function activateSubNav6(){
document.getElementById('labmenu').style.display="block";
document.getElementById('menu-lab').style.backgroundPosition="bottom";
}

function deactivateSubNav6(){
TList2=document.getElementById('labmenu').style.di splay='none';
document.getElementById('menu-lab').style.backgroundPosition="top";
deactivateCurrentClip();
}
/* END Nav Handling */
</script>

Chapo
02-12-2012, 07:56 PM
Thats kool... so basicacally those animations are made in flash but called with php or javascript ? where can i learn that ?