User:Felice/battery.html.template

From OLPC
< User:Felice
Revision as of 21:15, 27 December 2007 by Walter (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search
  This page is monitored by the OLPC team.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="$gettext{'lang'}" xml:lang="$gettext{'lang'}">

<head>
	<title>$gettext{'olpc'}, $gettext{'gettingstartedtitle'}: $gettext{'gettingstartedt15'}</title>
	<meta name="Description" content="$gettext{'gettingstarteddescription'}" />
	<meta name="keywords" content="$gettext{'gettingstartedkeywords'}" />
	<!--#include virtual="../../includes/meta.html" -->
	<!--#include virtual="../../includes/icon.html" -->
	<!--#include virtual="../../includes/css.html" -->
	<!--#include virtual="../../includes/javascript.html" -->

	<!-- JS -->
	<script	type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo/yahoo-min.js" ></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/dom/dom-min.js"></script>
	<script	type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/event/event-min.js" ></script>
	<script	type="text/javascript" src="../../JS/contentDisplay.js" ></script>
	<script	type="text/javascript" src="../../JS/swfObject.js" ></script>
	<!-- //JS -->

<script type="text/javascript">
function DisplayDesc(ImageName,e)
{
   var coords = e.coords;
   <!--Splitting the String to extract the left and top values-->
   var temp = new Array();
   temp = coords.split(',');
   var coordLeft = temp[0];
   var coordTop = temp[1];

   var ImageMedia = document.getElementById(ImageName);

   var xy = YAHOO.util.Dom.getXY(ImageMedia);

   var dot = document.getElementById("imgGreenDot");
   //dot.style.position = "relative";
   xy[0] += parseInt(coordLeft, 10);
   xy[1] += parseInt(coordTop, 10);

   //Display the Green Dot
   YAHOO.util.Dom.setXY(dot, xy);
   YAHOO.util.Dom.setStyle("imgGreenDot", 'cursor', 'pointer');

   switch(e.id)
   {
   case "d1":
   document.getElementById("desc_view").innerHTML = "<h3>$gettext{'batteryh1'}</h3><p>$gettext{'batteryp1'}</p>"
   break;

   case "d2":
   document.getElementById("desc_view").innerHTML = "<h3>$gettext{'batteryh2'}</h3><p>$gettext{'batteryp2'}</p>"
   break;

   case "d3":
   document.getElementById("desc_view").innerHTML = "<h3>$gettext{'batteryh3'}</h3><p>$gettext{'batteryp3'}</p>"
   break;

   case "d4":
   document.getElementById("desc_view").innerHTML = "<h3>$gettext{'batteryh4'}</h3><p>$gettext{'batteryp4'}</p>"
   break;
   }
}

function DisplayIntro()
{
   YAHOO.util.Dom.setStyle("imgGreenDot", 'position', 'static');
   YAHOO.util.Dom.setStyle("imgGreenDot", 'left', '-300px');
}
	
function DisplayRollOn()
{
   document.getElementById('rollOver').style.display = 'block'; 
   document.getElementById('clickOn').style.display = 'none';
}
	
function DisplayRollOff()
{
   document.getElementById('clickOn').style.display = 'block';
   document.getElementById('rollOver').style.display = 'none'; 
}
</script>
</head>

<body id="start" class="start" lang="$gettext{'lang'}">
	<!--#include virtual="../../includes/logo.html" -->
	<!--#include virtual="../../includes/header.html" -->

<div id="main-body" class="section clearfix">

   <div id="main-content" class="clearfix">
      <div id="tools">
			<h3>$gettext{'gettingstartedth1'}</h3>
				<ul>
				        <li><a href="index.shtml">$gettext{'gettingstartedt1'}</a></li>
					<li><a href="connecting.shtml">$gettext{'gettingstartedt2'}</a></li>
					<li><a href="activities.shtml">$gettext{'gettingstartedt3'}</a></li>
					<li><a href="invite.shtml">$gettext{'gettingstartedt4'}</a></li>
					<li><a href="sharing.shtml">$gettext{'gettingstartedt5'}</a></li>
					<li><a href="journal.shtml">$gettext{'gettingstartedt6'}</a></li>
				        <li><a href="ebook.shtml">$gettext{'gettingstartedt7'}</a></li>
					<li> </li>
					<li> </li>
				        <li><a href="homeview.shtml">$gettext{'gettingstartedt8'}</a></li>
				        <li><a href="friendsview.shtml">$gettext{'gettingstartedt9'}</a></li>
					<li><a href="neighborhoodview.shtml">$gettext{'gettingstartedt10'}</a></li>
					<li><a href="activityview.shtml">$gettext{'gettingstartedt11'}</a></li>
					<li><a href="features.shtml">$gettext{'gettingstartedt12'}</a></li>
					<li><a href="externalports.shtml">$gettext{'gettingstartedt13'}</a></li>
					<li><a href="keyboard.shtml">$gettext{'gettingstartedt14'}</a></li>
					<li class="selected"><a href="battery.shtml">$gettext{'gettingstartedt15'}</a></li>
					<li> </li>
					<li> </li>
					<li><a href="troubleshooting.shtml">$gettext{'gettingstartedt16'}</a></li>
				</ul>			
      </div>	<!-- /tools -->	

      <div id="content">
         <img id="imgGreenDot" alt="dot" src="../../img/GreenDot.gif" style="position:relative;left:-300px;" />
	 <div id="media_view" class="media">
         <img id="xo_map" alt="home view" src="../../img/OLPC_back_2.jpg" usemap="#xo_map" border="0" /><br/> 
	 <map id="xo_map" name="xo_map">
	    <area shape="rect" id="d1" coords="4,199,18,213" onmouseover="DisplayDesc('xo_map',this)" alt="$gettext{'batteryh1'}" />
	    <area shape="rect" id="d1" coords="382,199,396,213" onmouseover="DisplayDesc('xo_map',this)" alt="$gettext{'batteryh1'}" />
	    <area shape="rect"   id="d2" coords="4,229,18,243" onmouseover="DisplayDesc('xo_map',this)" alt="$gettext{'batteryh2'}" />
	    <area shape="rect"   id="d3" coords="382,249,396,263" onmouseover="DisplayDesc('xo_map',this)" alt="$gettext{'batteryh3'}" />
	    <area shape="rect"   id="d4" coords="382,133,396,147" onmouseover="DisplayDesc('xo_map',this)" alt="$gettext{'batteryh4'}" />
	 </map>
         </div> <!-- media -->
         <div id="desc_view" class="description">
	 <h3>$gettext{'batteryh5'}</h3>
         <p>$gettext{'batteryp5'}</p>
         </div> <!-- description -->
      </div> <!-- content -->

      <div id="sub-content">
      <h3> </h3>
      <p><img src="../../img/Battery-2.jpg" alt="$gettext{'batteryh3'}" border="0" /></p>
      </div> <!-- sub-content -->

   </div> <!-- main-content -->

   <!--#include virtual="../../includes/footer.html" -->

</div> <!-- main-body -->

</body>
</html>