Web ページ上にラジオボタンを自由に配置したいことがある． 私のばあいは，被験者に立体音をきいてもらってその音源方向や距離をあててもらうときに，結果を Web ページ上にならべた，つぎのようなラジオボタンのうちのひとつをクリックして，こたえてもらった． この方法をつかうとボタンを円形にかぎらず自由に配置できるかわりに，おなじページの他のコンテンツとかさならないように，配置を慎重にきめる必要がある． したがって，他の方法たとえば表などをつかって容易に配置できる形状のときはつかわないほうがよいとかんがえられる．
このページのソースをみてみればわかるが，基本的にはつぎのような HTML タグによってひとつのラジオボタンが表現される．
<div style="position:absolute; left:x座標px; top:y座標px;">ボタン</div>
座標はピクセル単位で指定するため，フォントサイズなどをかえても位置はかわらず，他のコンテンツとかさなる危険がある． このページのばあい，余白を余計にとることによって，できるだけかさならないようにしているが，条件によってはやはりかさなる．
以下，このようなラジオボタンをふくむページを生成する Perl CGI プログラムの例をしめす． 実験につかうためにはもうすこし，くふうが必要だったが，ここではプログラムをなるべくかんたんにしている．
#!/usr/bin/perl -- # -*-Perl-*-
############################################################################
#
# Print radio button circle
#
############################################################################
use strict;
### print_button_circle($tableName, $y0, $value)
# print a radio button array
#
sub print_button_circle($$$) {
my ($tableName, $y0, $value) = @_;
my $factor = 40;
my $roomSize = $factor * 5;
my $Pi = 3.1416;
# Display center of the circle
my $x = $factor * 2.25 + 13;
my $y = $factor * 2.25 + $y0 - 3;
print "<div style=\"position:absolute; left:${x}px; top:${y}px;\">";
print "+</div>\n";
# Display radio buttons
my $distance = 1;
for (my $angle = 1; $angle <= 12; $angle++) {
my $r = $factor * $distance;
my $displacement = $factor * (2.25 - $distance);
my $x = int($r * (1 + cos($Pi*($angle-1)/6))) + $displacement + 8;
my $y = int($r * (1 + sin($Pi*($angle-1)/6))) + $displacement + $y0;
my $checked = $value eq $angle ? 'checked="checked" ' : "";
print "<div style=\"position:absolute; left:${x}px; top:${y}px;\">";
print "<input type=\"radio\" name=\"${tableName}\" ";
print "value=\"${angle}\" ${checked}/></div>\n";
};
}
#===========================================================================
# Main program
#===========================================================================
print<<END;
Content-type: text/html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PULIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="ja" lang="ja">
<head>
<title>Title</title>
<meta HTTP-EQUIV=CONTENT-TYPE CONTENT="text/html; charset=UTF-8" />
</head>
<body>
<h1>Header</h1>
<form id="form" action="" method="get">
END
print_button_circle("A", 220, 1);
print<<END;
</form>
</body>
</html>
END
1;
Keywords:
