掲示板/総合質問板/過去ログ/一覧/ onMouseOverで背景画像を変える際のposition

0 名前：いも： 2007/04/10（火） 16:15 ID:fn.2cJst sub-.G

初めまして。
私は質問スレ初心者につき、至らないところがあるかもしれません。どうぞご容赦下さいませ。

本題ですが、onMouseOverでテーブルの背景画像を変える際、背景画像のpositionやrepeatの指定をどうしたら良いのか分かりません。

<TABLE valign="top" height="200" width="100%" border=0 cellspacing="0" cellpadding="0" id="menu" bgcolor="#000000">
<TD valign="top">

<a href="./a.htm" onFocus="this.blur( )"
 onMouseOver="document.all['menu'].style.backgroundImage='url(img/01.gif)'"
 onMouseOut="document.all['menu'].style.backgroundImage=''">
<img src="./button1.gif" width="30" height="30" border="0"></a>

<a href="./b.htm" onFocus="this.blur( )"
 onMouseOver="document.all['menu'].style.backgroundImage='url(img/02.gif)'"
 onMouseOut="document.all['menu'].style.backgroundImage=''">
<img src="./button2.gif" width="30" height="30" border="0"></a>

</TD></TR>
</TABLE>

このようなことをやりたいのですが、以上のタグに、

 onMouseOver="document.all['menu'].style.backgroundImage='url(img/01.gif) no-repeat top right'"

このような改変を行ってみたところ、画像の表示さえできなくなります。
positionはtop right、repeatはno-repeatにしたいと思っております。
方法はjsでもDHTMLでも構いません。
また、NNのことを考えていないのですが、恥ずかしながらNNでどうすれば可能になるのかも分かりません。NNでは不可能でも良しとしております。
何卒ご助力の程、よろしくお願い致します。

1 名前： カヅサツ ◆ThCi95HEzw ： 2007/04/10（火） 16:15 ［URL］ ID:O5hEMlpW sub-r2

一応、NN 7 でも動くことを確認しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
#menu{
	color: #FFFFFF;
	background-color: #000000;
	height: 200px;
	background-repeat: no-repeat;
	background-position: top right;
}
#menu ul{
	margin: 0px;
	padding: 0px;
}
#menu li{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display: inline;
}
a:link img,
a:visited img{
	border-width: 0px;
}
</style>
<script type="text/javascript">
function ChangeMenuBack(uri){
	if(document.compatMode=="CSS1Compat"){
		var menu = document.getElementById('menu');
		if(uri){
			menu.style.backgroundImage = 'url("' + uri + '")';
		}
		else{
			menu.style.backgroundImage = 'none';
		}
	}
}
</script>
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="./a.htm"
			onMouseOver="ChangeMenuBack('http://www.tagindex.com/javascript/link/image/newyork.jpg');"
			onMouseOut="ChangeMenuBack('');"><img
			src="./button1.gif" width="30" height="30" alt=""></a></li>
		<li><a href="./b.htm"
			onMouseOver="ChangeMenuBack('http://www.tagindex.com/javascript/link/image/london.jpg');"
			onMouseOut="ChangeMenuBack('');"><img
			src="./button2.gif" width="30" height="30" alt=""></a></li>
	</ul>
</div>
</body>
</html>

2 名前：いも： 2007/04/10（火） 16:15 ID:fn.2cJst sub-.G

ありがとうございます。
試してみましたところ、IEでの確認は取れました。
しかしOperaとFireFoxとNN7で確認してみたところ、FireFoxとNN7では私の環境では動かないようです…
特にNN7で動かない事が不思議ですが…（こちらに問題があるということかしら？）
確認の際、jsを外部にしてみましたが、やはり変わりはありませんでした。
なお、OperaではIEと同じように動作致しました。
念のため申し上げますが、METAタグは

<meta http-equiv="Content-type" CONTENT="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

を入れてあります。
もう少し調べてみたいと思います。
1日の間にまとまった時間が取れないため、申し訳ないことに遅レスになってしまうのですが、
もし何かご意見など頂けましたら、引き続き宜しくお願い致します。

3 名前：いも： 2007/04/10（火） 16:15 ID:fn.2cJst sub-.G: 失礼しました。
FireFoxはMozilla5です。

4 名前： カヅサツ ◆ThCi95HEzw ： 2007/04/10（火） 16:15 ［URL］ ID:O5hEMlpW sub-r2

私は windows の Intenet Explorer 7.0, Firefox 2.0, Netscape 7.1, Opera 9.0 で確認しています。
以下を一字一句改変せずに確認してみてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-type" CONTENT="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
#menu{
	color: #FFFFFF;
	background-color: #000000;
	height: 200px;
	background-repeat: no-repeat;
	background-position: top right;
}
#menu ul{
	margin: 0px;
	padding: 0px;
}
#menu li{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display: inline;
}
a:link img,
a:visited img{
	border-width: 0px;
}
</style>
<script type="text/javascript">
function ChangeMenuBack(uri){
	if(document.compatMode=="CSS1Compat"){
		var menu = document.getElementById('menu');
		if(uri){
			menu.style.backgroundImage = 'url("' + uri + '")';
		}
		else{
			menu.style.backgroundImage = 'none';
		}
	}
}
</script>
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="./a.htm"
			onMouseOver="ChangeMenuBack('http://www.tagindex.com/javascript/link/image/newyork.jpg');"
			onMouseOut="ChangeMenuBack('');"><img
			src="http://www.tagindex.com/javascript/link/image/newyork.jpg"
			width="30" height="30" alt="aaa"></a></li>
		<li><a href="./b.htm"
			onMouseOver="ChangeMenuBack('http://www.tagindex.com/javascript/link/image/london.jpg');"
			onMouseOut="ChangeMenuBack('');"><img
			src="http://www.tagindex.com/javascript/link/image/london.jpg"
			width="30" height="30" alt="bbb"></a></li>
	</ul>
</div>
</body>
</html>

5 名前：いも： 2007/04/10（火） 16:15 ID:fn.2cJst sub-.G: できました！
私の持つすべてのブラウザで確認できました。
前回は私が何かしてしまったのでしょうか…申し訳ありませんでした。
ご協力ありがとうございました。とても助かりました。