掲示板/HTML質問板/過去ログ/一覧/ x.y線をマウスポインタに引く

0 名前： s-a-g-e ： 2006/09/03（日） 04:36 ID:dsi0lTtI: マウスポインタは╋にして、十字にマウスポインタを中心に線を引きたいのですが、
どのようにすればよいのでしょう?

余談
普通のページに使うとうざったく思われるのでメニューだけです。

1 名前： Z ◆XTzyosZXcL ： 2006/09/03（日） 04:36 ID:O1F9KAP/: 　とりあえず、「HTMLでは」出来ないと思います。CSS（カスケーティングスタイルシート）及びJavaScriptなどのクライアント側スクリプト、またはPHPなどのサーバ側スクリプトの出番だと思います（ただしカーソル変更関係のCSSプロパティはインターネットエクスプローラ独自規格だった記憶がありますが）。

スタイルシート質問板：
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi

JavaScript質問板：
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi

総合質問板：
http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi

参考・HTMLの基本）
http://members.jcom.home.ne.jp/jintrick/Personal/markup.html

2 名前： sevi- ： 2006/09/03（日） 04:36 ID:9J5RKOHs

こうか.

<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
<!--
#menu
{
	border:dotted 5px white;
	width:14em;
	color:white;
	cursor:crosshair;
}

table.cross
{
	position:absolute;
	padding:0px;
	margin:0px;
	background-color:black;
	table-layout:fixed;
	overflow:hidden;
	border:none;
	border-color:white;
	border-collapse:collapse;
}

table.cross td
{
	padding:0px;
	margin:0px;
}
-->
</style>
	<script type="text/javascript">
<!--

function setCross(node)
{
	if(node.style.position != "absolute")
		node.style.position = "relative";

	var tbl = document.createElement("table");
	tbl.className = "cross";
	tbl.style.left = node.offsetLeft + "px";
	tbl.style.top = node.offsetTop + "px";
	tbl.style.borderStyle = "none";
	var tr;
	for(var i=0; i<2; i++)
	{
		tr = tbl.insertRow(i);
		for(var j=0; j<2; j++)
			tr.appendChild(document.createElement("td")).className = "cell"+i+"_"+j;
	}
	var td = tbl.rows[0].cells[0];
	node.parentNode.insertBefore(tbl, node);

	var fn_onmousemove = document.documentElement.onmousemove;
	document.documentElement.onmousemove = function(event)
	{
		tbl.style.width = node.offsetWidth + "px";
		tbl.style.height = node.offsetHeight + "px";
		if(fn_onmousemove != null)
			fn_onmousemove.apply(this, arguments);
		if(event == null) event = window.event;
		var target = (event.target != null)?event.target:event.srcElement;
		tbl.border = "0";
		while(target != null)
		{
			if(target == node)
			{
				tbl.border = "1";
				break;
			}
			target = target.parentNode;
		}
		if(target == null)
			return;
		var iwidth_td = event.clientX;
		var iheight_td = event.clientY;
		while(target != document.body)
		{
			iwidth_td -= target.offsetLeft;
			iheight_td -= target.offsetTop;
			target = target.parentNode;
			if(target != document.body)
			{
				iwidth_td -= Math.floor((target.offsetWidth - target.clientWidth)/2);
				iheight_td -= Math.floor((target.offsetHeight - target.clientHeight)/2);
			}				
		}
		if(iwidth_td <=0 || iwidth_td >= node.offsetWidth ||
			iheight_td <=0 || iheight_td >= node.offsetHeight)
			return;
		td.style.width = iwidth_td + "px";
		td.style.height = iheight_td + "px";
	};

}
function initialize()
{
	setCross(document.getElementById("menu"));
}
//-->
</script>
</head>
<body onload="initialize();">
	<div id="menu">
	<ol>
		<li>壁紙
			<ol>
				<li>四季の風景
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
				<li>深海
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
				<li>空と鳥
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
			</ol>
		</li>
		<li>背景サンプル
			<ol>
				<li>学校
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
				<li>教室
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
				<li>亜空間
					<ol>
						<li><a href="#">640X480</a></li>
						<li><a href="#">1024X768</a></li>
						<li><a href="#">1600X1200</a></li>
					</ol>
				</li>
			</ol>
		</li>
	</ol>
	</div>
</body>
</html>

むう.やはし,うざったいぞこの動きは.