WebDesigning 10月号掲載のサンプルです。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>スライダーを利用したアンケート</title>
<style type="text/css"><!--
#slideBG1 {
background:transparent url(track1.gif) no-repeat 0px 0px scroll;
width:300px;
height:24px;
}
#ptr1 {
background:transparent url(slider1.gif) no-repeat 0px 0px scroll;
width:7px;
height:24px;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
new Control.Slider("ptr1", "slideBG1",
{ onChange:function(slideValue) {
$("result").innerHTML = slideValue;
}
});
}
// --></script>
</head>
<body>
<h1>WDアンケート</h1>
<form>
Q１：内容について<br>
<div id="slideBG1">
<div id="ptr1"></div>
</div>
</form>
<div id="result"></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>スライダーを利用したアンケート(CGIテスト用)</title>
<style type="text/css"><!--
#slideBG1,#slideBG2,#slideBG3 {
width:300px;
height:24px;
}
#slideBG1 {
background:transparent url(track1.gif) no-repeat 0px 0px scroll;
}
#slideBG2 {
background:transparent url(track2.gif) no-repeat 0px 0px scroll;
}
#slideBG3 {
background:transparent url(track3.gif) no-repeat 0px 0px scroll;
}
#ptr1,#ptr2,#ptr3 {
background:transparent url(slider.gif) no-repeat 0px 0px scroll;
width:7px;
height:24px;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
new Control.Slider("ptr1", "slideBG1",
{ onChange:function(slideValue) { $("Q1").value = slideValue; } });
new Control.Slider("ptr2", "slideBG2",
{ onChange:function(slideValue) { $("Q2").value = slideValue; } });
new Control.Slider("ptr3", "slideBG3",
{ onChange:function(slideValue) { $("Q3").value = slideValue; } });
}
// --></script>
</head>
<body>
<h1>WDアンケート</h1>
<form method="get" action="./check.rb">
Q１：内容について<input type="hidden" name="Q1" id="Q1" value="0">
<div id="slideBG1">
<div id="ptr1"></div>
</div>
<br>
Q２：わかりやすさ<input type="hidden" name="Q2" id="Q2" value="0">
<div id="slideBG2">
<div id="ptr2"></div>
</div>
<br>
Q３：実用度<input type="hidden" name="Q3" id="Q3" value="0">
<div id="slideBG3">
<div id="ptr3"></div>
</div>
<br>
<input type="submit" value="送信する">
</form>
</body>
</html>