User:Felice/keyboard template
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{'gettingstartedt14'}</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{'keyboardh1'}</h3><p>$gettext{'keyboardp1'}</p>"
break;
case "d2":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh2'}</h3><p>$gettext{'keyboardp2'}</p>"
break;
case "d3":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh3'}</h3><p>$gettext{'keyboardp3'}</p>"
break;
case "d4":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh4'}</h3><p>$gettext{'keyboardp4'}</p>"
break;
case "d5":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh5'}</h3><p>$gettext{'keyboardp5'}</p>"
break;
case "d6":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh6'}</h3><p>$gettext{'keyboardp6'}</p>"
break;
case "d7":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh7'}</h3><p>$gettext{'keyboardp7'}</p>"
break;
case "d8":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh8'}</h3><p>$gettext{'keyboardp8'}</p>"
break;
case "d9":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh9'}</h3><p>$gettext{'keyboardp9'}</p>"
break;
case "d10":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh10'}</h3><p>$gettext{'keyboardp10'}</p>"
break;
case "d11":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh11'}</h3><p>$gettext{'keyboardp11'}</p>"
break;
case "d12":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh12'}</h3><p>$gettext{'keyboardp12'}</p>"
break;
case "d13":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh13'}</h3><p>$gettext{'keyboardp13'}</p>"
break;
case "d14":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh14'}</h3><p>$gettext{'keyboardp14'}</p>"
break;
case "d15":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh15'}</h3><p>$gettext{'keyboardp15'}</p>"
break;
case "d16":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh16'}</h3><p>$gettext{'keyboardp16'}</p>"
break;
case "d17":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh17'}</h3><p>$gettext{'keyboardp17'}</p>"
break;
case "d18":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh18'}</h3><p>$gettext{'keyboardp18'}</p>"
break;
case "d19":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh19'}</h3><p>$gettext{'keyboardp19'}</p>"
break;
case "d20":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh20'}</h3><p>$gettext{'keyboardp20'}</p>"
break;
case "d21":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh21'}</h3><p>$gettext{'keyboardp21'}</p>"
break;
case "d22":
document.getElementById("desc_view").innerHTML = "<h3>$gettext{'keyboardh22'}</h3><p>$gettext{'keyboardp22'}</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 class="selected"><a href="keyboard.shtml">$gettext{'gettingstartedt14'}</a></li>
<li><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/keyboard1.jpg" usemap="#xo_map" border="0" /><br/>
<map id="xo_map" name="xo_map">
<area shape="rect" id="d1" coords="1,42,16,66" alt="esc" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d2" coords="1,86,16,100" alt="tab" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d3" coords="1,107,16,120" alt="ctrl" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d4" coords="1,128,16,142" alt="shift" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d5" coords="1,148,16,162" alt="fn" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d6" coords="69,303,83,317" alt="lgrab" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d7" coords="96,303,110,317" alt="alt" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d8" coords="148,303,162,317" alt="space" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d9" coords="280,303,294,317" alt="altgr" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d6" coords="305,303,319,317" alt="rgrab" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d10" coords="352,303,366,317" alt="arrow" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d11" coords="419,126,433,139" alt="language" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d12" coords="419,94,433,107" alt="enter" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d13" coords="419,61,433,75" alt="erase" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d14" coords="419,41,433,55" alt="frame" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d15" coords="349,1,363,15," alt="bboard" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d16" coords="316,1,330,15," alt="volume" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d17" coords="272,1,286,15," alt="brightness" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d18" coords="211,1,225,15," alt="slider" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d19" coords="125,1,139,15," alt="views" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d20" coords="72,1,86,15," alt="search" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d21" coords="212,303,226,317," alt="touchpad buttons" onmouseover="DisplayDesc('xo_map',this)" />
<area shape="rect" id="d22" coords="241,303,255,317," alt="touchpad" onmouseover="DisplayDesc('xo_map',this)" />
</map>
</div> <!-- media -->
<div id="desc_view" class="description">
<h3>$gettext{'keyboardh23'}</h3>
<p>$gettext{'keyboardp23'}</p>
</div> <!-- description -->
</div> <!-- content -->
<div id="sub-content">
</div> <!-- sub-content -->
</div> <!-- main-content -->
<!--#include virtual="../../includes/footer.html" -->
</div> <!-- main-body -->
</body>
</html>
