Captain's Priorities Masthead

by mrjordy

HTML

<div id="preload">
   <img src="http://techstatic.org/falconwood-pitch/CaptainsPriorities/TL-hover.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/CaptainsPriorities/TR-hover.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/CaptainsPriorities/BR-hover.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/CaptainsPriorities/BL-hover.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/perf-man/shadowclick.png" width="1" height="1"/>
</div>
<div id ="perfman-back">
     <div class="PMcenter-noselect"></div>
     <div class="diag-noselect"></div>
     <div class="Define toggle"></div>
     <div class="Define-popup hidden">
         <div class="PopupTitle">Innovation</div>
         <div class="PopupText">Continue to enhance existing capability while we plan the future network architecture.</div>
    </div>
     <div class="Measure toggle"></div>
     <div class="Measure-popup hidden">
         <div class="PopupTitle">Network Defense</div>
         <div class="PopupText">Support successful operations and defense of the network.</div>
    </div>
     <div class="Manage toggle"></div>
     <div class="Manage-popup hidden">
         <div class="PopupTitle">Partnerships</div>
         <div class="PopupText">Continue to develop an effective program team with our mission partners and the service provider.</div>
    </div>
     <div class="Improve toggle"></div>
     <div class="Improve-popup hidden">
         <div class="PopupTitle">Transition</div>
         <div class="PopupText">Execute a smooth and effective transition to NGEN, with minimal disruption to the Fleet.</div>
    </div>
</div>

CSS

#preload { 
    display: none; 
}
#perfman-back {
    background: url("http://techstatic.org/falconwood-pitch/CaptainsPriorities/captains%20priorities.png");
    width: 857px;
    height: 320px;
    overflow: hidden;
    border-radius: 2px;
    margin-left: auto;
    margin-right: auto;
}
.PMcenter-noselect {
    height: 155px;
    width: 155px;
    display: block;
    border-radius: 80px;
    position: absolute;
    margin-top: 106px;
    margin-left: 98px;
    cursor: auto;
    z-index: 3;
}
.diag-noselect {
    height: 278px;
    width: 436px;
    display: block;
    position: absolute;
    transform: skewX(-23deg);
    margin-left: 360px;
    margin-top: 44px;
    cursor: auto;
    z-index: 3;
}
.Define {
    height: 139px;
    width: 176px;
    display: block;
    position: absolute;
    margin-top: 44px;
    cursor: pointer;
}
.Define:hover {
    background: url("http://techstatic.org/falconwood-pitch/CaptainsPriorities/TL-hover.png");
}
.Define-popup, .Measure-popup, .Manage-popup, .Improve-popup {
    background: url("http://techstatic.org/falconwood-pitch/perf-man/shadowclick.png");
    height: 276px;
    width: 551px;
    display: block;
    position: absolute;
    margin-top: 44px;
    margin-left: 306px;
    border-bottom-right-radius: 2px;
}
.Measure {
    height: 139px;
    width: 240px;
    display: block;
    position: absolute;
    margin-top: 44px;
    margin-left: 176px;
    cursor: pointer;
}
.Measure:hover {
    background: url("http://techstatic.org/falconwood-pitch/CaptainsPriorities/TR-hover.png");
}
.Manage {
    height: 139px;
    width: 240px;
    display: block;
    position: absolute;
    margin-top: 183px;
    margin-left: 177px;
    cursor: pointer;
}
.Manage:hover {
    background: url("http://techstatic.org/falconwood-pitch/CaptainsPriorities/BR-hover.png");
}
.Improve {
    height: 139px;
    width: 176px;
    display: block;
    position: absolute;
    margin-top: 183px;
    cursor: pointer;
}
.Improve:hover {
    background:...

JavaScript

jQuery(document).ready(function() {
    jQuery(".toggle").next(".hidden").hide();
    jQuery(".toggle").click(function() {
        $('.active').not(this).toggleClass('active').next('.hidden').fadeToggle(100);
        $(this).toggleClass('active').next().fadeToggle(500);

    });
});

//<meta http-equiv="X-UA-Compatible" content="IE=8" />