<html>
<body>

<link rel="stylesheet" href="css/product.css" type="text/css">

<div id='product'>
   <a href="javascript:product.scrollToEvent('iMac G3')"><div id="iMac"></div></a>
</div>
<div id="shadow"></div>

<script>
   var product = new Timeline ( "product", "xml/product.xml" );
   
   //======================================
   function toggle_image ( event_title, turn_on ){

      var event_id = "product" + event_title;
      event_id=event_id.replace(/([^a-z0-9]+)/gi, '');
      
      var event_background_div = document.getElementById( event_id );
      if ( event_background_div ){
         
         /* find the image child */
         for(var i=0; i<event_background_div.children.length; i++) {
            var div = event_background_div.children[i];
            if( div.className == "event_image" ){

               div.style.opacity = turn_on ? "1" : "0";
               
               div.style.webkitTransition = "all 1s ease-out";
               div.style.oTransition = "all 1s ease-out";
               div.style.mozTransition = "all 1s ease-out";
               div.style.msTransition = "all 1s ease-out";
               div.style.kthtmlTransition = "all 1s ease-out";
               div.style.transition = "all 1s ease-out";
               break;
            }
         }         
      }
   }
   
   //======================================
   function replaceAll(str, find, replace) {
      return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
   }
   
   //======================================
   function escapeRegExp(string) {
      return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
   }
   
   //======================================
   
</script>


</body>
</html>

 

 

 

HTML




/* == main timeline div (background) =================================== */

#product {
   position: relative;
   width: 100%;
   height: 10cm;

   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

   background: rgba(255, 255, 255, 1);
   background: -webkit-linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   background: -moz-linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   background: -ms-linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   background: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));


   border: .02cm solid white;
   border-radius: 1.3cm;
   
   -moz-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
   -webkit-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
   box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
}

#iMac {
   position: absolute;
   z-index: 1000;
   left: 1.5cm;
   top: -.25cm;
   width: 6cm;
   height: 3cm;
   opacity: .15;
   
   background-image: url('../images/imac_logo.png');
   background-size: 80%;
   background-repeat: no-repeat;
   background-position: center;
}

#shadow {
   width: 100%;
   height: 20px;
   opacity: .5;
   background-image: url('../images/shadow.png');
   background-size: 95% 100%;
   background-repeat: no-repeat;
   background-position: center;
   
   /* fix faint box-shadow in firefox */
   -moz-box-shadow: 0 0 0 #fff;
-webkit-box-shadow: 0 0 0 #fff;
box-shadow: 0 0 0 #fff;
}



/* == ruler =================================== */

#ruler_container {
   display: none;
}



/* == timeline indicator =================================== */

#indicator_container {
   display: block;
   top: .5cm; /* the vertical position of the entire indicator */
   height: 9cm; /* used to anchor #indicator_text to the bottom, allowing the text to grow upward */
   z-index: 10;
}

#indicator_graphic {
   display: block;
   width: 0;
   height: 100%;
   
   border-left-style: dashed;
   border-left-color: rgba(0, 0, 0, .1);
   border-left-width: .06cm;
}

#indicator_text { /* the properties of the entire indicator text */
   display: block;
   top: .5cm;
   font-size: .5cm;
   font-weight: bold;
   color: rgba(0, 0, 0, .15);
   background: rgba(245, 245, 245, 1);
   padding: 0 .3cm;
   border-radius: .5cm;
}

#relative_to_present { /* the text between parentheses after actual dates. e.g. (10 years ago) */
   display: none;
}

#relative_to_big_bang { /* the distance of the current date from the the Big Bang */
   display: none;
}

#relative_to_cosmic_calendar { /* the current date relative to the Cosmic Calendar */
   display: none;
}

#astronomical_numbering { /* the text that appears after 0 CE */
   display: none;
}



/* == timeline bar =================================== */

#bar_container {
   display: block;
   top: 8cm; /* the vertical position of the entire bar */
   height: .1cm; /* the height of the entire bar */
   z-index: 13;
}

#bar_past {
   visibility: visible;
   height: 100%; /* the same height as #bar_container */
   background: rgba(0, 0, 0, .9);
         
   -moz-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .2);
   -webkit-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .2);
   box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .2);
}

#bar_future {
   visibility: visible;
   height: 100%; /* the same height as #bar_container */
   background-image: url('../images/timeline_bar.png');
   background-size: auto 100%;
   background-repeat: repeat-x;
   opacity: .75;
   
   -moz-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .2);
   -webkit-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .2);
   box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .2);
}

#bar_cap_left {
   visibility: visible;
   width: 1cm;
   top: -.1cm;
   height: .3cm;
   background: rgba(0, 0, 0, 1);
   border-top-left-radius: .15cm;
   border-bottom-left-radius: .15cm;
   
   -moz-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .25);
   box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .25);
}

#bar_cap_right {
   visibility: visible;
   width: 1cm;
   top: -.1cm;
   height: .3cm;
   background: rgba(0, 0, 0, 1);
   border-top-right-radius: .15cm;
   border-bottom-right-radius: .15cm;
   
   -moz-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .25);
   box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .25);
}

#bar_present {
   visibility: hidden;
}



/* == connectors =================================== */

#connectors_container {
   display: none; /* show or hide all connectors */
}



/* == date events =================================== */

#date_events_container {
   visibility: visible;
   top: 8cm; /* used by setting's date_fill_direction and date's fill_direction */
   height: .1cm; /* used by setting's date_fill_direction and date's fill_direction */
   z-index: 15;
}

.event_background {
   display: block;
   /* left: specified programmatically */
   /* top: specified programmatically */
   width: 5cm; /* the maximum width of date events */
   height: 10cm; /* set height to enable event clicking */
   background: rgba(255, 0, 0, 0);
}

.event_title {
   display: block;
   position: absolute;
   left: 2.3cm;
   top: 4.8cm;
   width: .4cm;
   height: .4cm;
   border-radius: .25cm;
   color: rgba(0, 0, 0, 0);
   background: rgba(0, 0, 0, 1);
   font-size: 0;
   text-align: center;   
   font-weight: bold;
   line-height: .5cm;
   
   -webkit-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -kthtml-transition: all .1s ease-out;
   transition: all .1s ease-out;
}


.event_title:hover {
   left: 1cm;
   top: 4.75cm;
   width: 3cm;
   height: .5cm;
   border-radius: .25cm;
   color: rgba(255, 255, 255, 1);
   background: rgba(0, 0, 0, 1);
   
   font-size: .25cm;
      
   -moz-box-shadow: 0 0 .5cm .2cm rgba(0, 200, 200, .2);
   -webkit-box-shadow: 0 0 .5cm .2cm rgba(0, 200, 200, .2);
   box-shadow: 0 0 .5cm .2cm rgba(0, 200, 200, .2);
   
   -webkit-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -kthtml-transition: all .1s ease-out;
   transition: all .1s ease-out;
}


.event_date {
   display: none;
}

.event_notes {
   display: none;
}

.event_image {
   position: absolute;
   display: block;
   bottom: 5.5cm;
   opacity: 0;
}



/* == period events =================================== */

#period_events_container {
   display: none;
}



/* == user interface buttons =================================== */

#button_prev {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   width: 2cm;
   height: 100%;
   opacity: 0;

   background-image: url('../images/button_prev_2.png');
   background-size: 80%;
   background-repeat: no-repeat;
   background-position: 0 50%;
   
   -webkit-transition: all .5s ease-out;
   -o-transition: all .5s ease-out;
   -moz-transition: all .5s ease-out;
   -ms-transition: all .5s ease-out;
   -kthtml-transition: all .5s ease-out;
   transition: all .5s ease-out;
}

#button_next {
   display: block;
   position: absolute;
   right: 0;
   top: 0;
   width: 2cm;
   height: 100%;
   opacity: 0;

   background-image: url('../images/button_next_2.png');
   background-size: 80%;
   background-repeat: no-repeat;
   background-position: 100% 50%;
   
   -webkit-transition: all .5s ease-out;
   -o-transition: all .5s ease-out;
   -moz-transition: all .5s ease-out;
   -ms-transition: all .5s ease-out;
   -kthtml-transition: all .5s ease-out;
   transition: all .5s ease-out;
}

#button_zoom_out {
   display: none;
}

#button_zoom_in {
   display: none;
}

#button_goto_year {
   display: none;
}



.button {
   cursor: pointer;
   z-index: 100;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   outline: 0;
}

#button_prev:hover, #button_next:hover {
   opacity: .1;

   -webkit-transition: all .5s ease-out;
   -o-transition: all .5s ease-out;
   -moz-transition: all .5s ease-out;
   -ms-transition: all .5s ease-out;
   -kthtml-transition: all .5s ease-out;
   transition: all .5s ease-out;
}

#button_prev:active, #button_next:active {
   opacity: .2;

   -webkit-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -kthtml-transition: all .1s ease-out;
   transition: all .1s ease-out;
}



/* == startup screen =================================== */

#startup_screen {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, 1);
   border-radius: 1.3cm;
}



/* == year screen =================================== */

#goto_year_background {
   display: none;
}



/* == lightbox screen =================================== */

#lightbox_background {
   position: absolute;
   height: 100%;
   width: 100%;
   
   background: rgba(255, 255, 255, 1);
   background: -webkit-linear-gradient(to top left, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   background: -moz-linear-gradient(to top left, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   background: -ms-linear-gradient(to top left, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   background: -o-linear-gradient(to top left, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   background: linear-gradient(to top left, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1));
   
   z-index: 1000;
}

#lightbox_title {
   position: absolute;
   left: 0;
   top: 10cm;
   width: 10cm;
   font-size: 1cm;
   text-align: center;
   color: rgba(0, 0, 0, .2);
   margin: 0;
   padding: 0;
   
   -ms-transform: rotate(-90deg);
   -ms-transform-origin: 0% 0%;
   -webkit-transform: rotate(-90deg);
   -webkit-transform-origin: 0% 0%;
   transform: rotate(-90deg);
   transform-origin: 0% 0%;
}

#lightbox_image {
   position: absolute;
   left: 10%;
   top: 10%;
   height: 80%;
   width: 80%;
   
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

#lightbox_video {
   display: none;
}

#lightbox_credit {
   display: none;
}

#lightbox_exit {
   display: none;
}



/* ===================================== */

 

 

 

CSS



<timeline>
   
   <date title="iMac G3" javascript_on_center="toggle_image('iMac G3', true)" javascript_on_decenter="toggle_image('iMac G3', false)" image="images/iMacG3.png" preload_delay="3" year="1998" />
   
   <date title="iMac G4" javascript_on_center="toggle_image('iMac G4', true)" javascript_on_decenter="toggle_image('iMac G4', false)" image="images/iMacG4.png" preload_delay="0" year="2002" />
   
   <date title="iMac G5" javascript_on_center="toggle_image('iMac G5', true)" javascript_on_decenter="toggle_image('iMac G5', false)" image="images/iMacG5.png" preload_delay="0" year="2004" />
   
   <date title="iMac Aluminium" javascript_on_center="toggle_image('iMac Aluminium', true)" javascript_on_decenter="toggle_image('iMac Aluminium', false)" image="images/iMacAluminium2007.png" preload_delay="0" year="2007" />
   
   <date title="iMac Unibody" javascript_on_center="toggle_image('iMac Unibody', true)" javascript_on_decenter="toggle_image('iMac Unibody', false)" image="images/iMacUnibody2009.png" preload_delay="0" year="2009" />
   
   <date title="iMac Retina" javascript_on_center="toggle_image('iMac Retina', true)" javascript_on_decenter="toggle_image('iMac Retina', false)" image="images/iMacRetina.png" preload_delay="0" year="2015" />



   <settings scale_effect="false" event_bounds="true" start_year="1997" end_year="2016" interactive_bar="false" interactive_background="false" vertical_scroll="false" launch_event="iMac G3" date_fill_direction="none" />

</timeline>

 

 

 

XML