<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
function getPageData()
{
$("result").innerHTML = "読み込み中...";
$("sendBtn").disabled = true;
url = "curl.rb?sURL="+encodeURI($("sURL").value)+"&cache="+(new Date()).getTime();
new Ajax.Request(url, { method: 'get', onComplete: displayData });
new Rico.Effect.FadeTo("result", 0.2 ,100, 2);
new Rico.Effect.Size("result", null,480,100,10);
}
function displayData(httpObj)
{
var LF = String.fromCharCode(10);
$("sendBtn").disabled = false;
var htmlData = httpObj.responseText;
var txt = htmlData.stripScripts().stripTags();
var br = new RegExp(LF+"+","g");
txt = txt.replace(br,"<br>");
$("result").innerHTML = txt;
new Rico.Effect.FadeTo("result", 1.0 ,100, 10);
}
function setFontSize(n)
{
$("result").style.fontSize = n;
}
function setLineHight(n)
{
$("result").style.lineHeight = n;
}
// --></script>
</head>
<body>
<img src="title.jpg">
<form method="get" onsubmit="getPageData();return false;">
URL : <input type="text" value="http://www.yahoo.co.jp/" id="sURL" size="80"><br>
<input type="button" id="sendBtn" value="読み込み" onClick="getPageData()">
<select id="fsize" onChange="setFontSize(this.value)">
<option value="8pt">8pt</option>
<option value="9pt">9pt</option>
<option value="10pt">10pt</option>
<option value="11pt" selected>11pt</option>
<option value="12pt">12pt</option>
<option value="14pt">14pt</option>
<option value="18pt">18pt</option>
<option value="24pt">24pt</option>
</select>
<select id="Lheight" onChange="setLineHight(this.value)">
<option value="100%">100%</option>
<option value="120%">120%</option>
<option value="150%" selected>150%</option>
<option value="180%">180%</option>
<option value="200%">200%</option>
</select>
</form>
<div id="result"></div>
</body>
</html>
説明などは本書を参考にしてください。