htmlとjavascripctかjqueryでこういうことでしょうか？
1．
ｶｰｿﾙが画像の上に来るとA->Bへ変更
ｶｰｿﾙが画像の上から外れるとB->Aへ変更
ｶｰｿﾙが画像の上にある状態でｸﾘｯｸすると､B->Cへ変更
Cが表示された状態では､ｶｰｿﾙをどこへ移動させても画像は変わらない｡
Cが表示された状態で画像をｸﾘｯｸすると､C->Aへ変更｡この状態で画像内を動く文にはAのままだが､一度画像から離れて､再度､画像の上に来るとA->Bへ変更
<script language="JavaScript">
<!--
var isHold = false;
function mouseIn(img)
{
if (!isHold) {
img.src = "./B.jpg";
}
}
function mouseOut(img)
{
if (!isHold) {
img.src = "./A.jpg";
}
}
function holdImage(img)
{
if (isHold) {
img.src = './A.jpg';
} else {
img.src = './C.jpg';
}
isHold = !isHold;
}
-->
</script>
<input type="image" src="./A.jpg" align="top" alt="ｶｺﾞに入れる"
onMouseOver="mouseIn(this);"
onMouseOut="mouseOut(this);"
onClick="holdImage(this); return false;" />
2．
画像の上にﾏｳｽが来ると半押し画像に変更 A->B
画像の上からﾏｳｽが出ると通常画像に変更 B->A
画像の上でﾎﾞﾀﾝを押し下げると､押下げ画像に変更 B->C
画像の上でﾎﾞﾀﾝを話すと､半押し画像に変更 C->B
ﾎﾞﾀﾝを押しながら画像から離れたときとか､細かいことは指定がないので省略してます｡
<input type="image" src="./A.jpg" align="top" alt="ｶｺﾞに入れる" onMouseOver="this.src='./B.jpg';" onMouseDown="this.src='./C.jpg';" onMouseUp="this.src='./B.jpg';" onMOuseOut="this.src='./A.jpg';" onClick="return false;" />
回答ありがとうございます｡
1．はﾎｰﾑﾍﾟｰｼﾞで使うﾒﾆｭｰﾊﾞｰでの話のことです｡おっしゃっているとおりですね｡Cになった状態で他のﾒﾆｭｰに触ると､今までのｸﾘｯｸされてたのはC→Aに戻り､違うﾒﾆｭｰがCの状態になるっていうのをやりたいと思っています｡
2．は
そのまま使えます｡
ありがとうございます｡
1のﾒﾆｭｰというのはこういうこと？
<script language="JavaScript">
<!--
var numberOfMenus = 3;
var selectedIndex = -1;
function mouseIn(index)
{
if (index == selectedIndex) {
return;
}
var menu = document.getElementById('menu' + index);
menu.src = 'B' + index + '.jpg';
}
function mouseOut(index)
{
if (index == selectedIndex) {
return;
}
var menu = document.getElementById('menu' + index);
menu.src = 'A' + index + '.jpg';
}
function changeMenu(index)
{
selectedIndex = index;
for (i = 1; i <= numberOfMenus; ++i) {
var menu = document.getElementById('menu' + i);
if (i == selectedIndex) {
menu.src = 'C' + i + '.jpg';
} else {
menu.src = 'A' + i + '.jpg';
}
}
}
-->
</script>
<input type="image" src="./A1.jpg" align="top" alt="ｶｺﾞに入れる" id="menu1"
onMouseOver="mouseIn(1);" onMouseOut="mouseOut(1);"
onClick="changeMenu(1); return false;" />
<input type="image" src="./A2.jpg" align="top" alt="ｶｺﾞに入れる" id="menu2"
onMouseOver="mouseIn(2);" onMouseOut="mouseOut(2);"
onClick="changeMenu(2); return false;" />
<input type="image" src="./A3.jpg" align="top" alt="ｶｺﾞに入れる" id="menu3"
onMouseOver="mouseIn(3);" onMouseOut="mouseOut(3);"
onClick="changeMenu(3); return false;" />
追記：
JavaScriptの方のnumberOfMenusを5にすれば5個のﾒﾆｭｰでも対応できます｡
inputﾀｸﾞも5個にしてくださいね｡
あとは､便宜上画像のﾌｧｲﾙ名がA1.jpg､B1.jpg､C1.jpg､A2.jpg､･･･としてありますが､この部分を変更したいのであれば､2次元配列にでもﾌｧｲﾙ名を入れておけばよいかなと思います｡
追記(6個のﾒﾆｭｰで動作するもの)：
<htm>
<head>
<script language="JavaScript">
<!--
var selectedIndex = -1;
var numberOfMenus = 6;
var imageList =[
["A1.jpg", "B1.jpg", "C1.jpg", "D1.jpg", "E1.jpg", "F1.jpg"],
["A2.jpg", "B2.jpg", "C2.jpg", "D2.jpg", "E2.jpg", "F2.jpg"],
["A3.jpg", "B3.jpg", "C3.jpg", "D3.jpg", "E3.jpg", "F3.jpg"],
];
function mouseIn(index)
{
if (index == selectedIndex) {
return;
}
var menu = document.getElementById('menu' + index);
menu.src = imageList[1][index];
}
function mouseOut(index)
{
if (index == selectedIndex) {
return;
}
var menu = document.getElementById('menu' + index);
menu.src = imageList[0][index];
}
function changeMenu(index)
{
selectedIndex = index;
for (i = 0; i < numberOfMenus; ++i) {
var menu = document.getElementById('menu' + i);
if (i == selectedIndex) {
menu.src = imageList[2][i];
} else {
menu.src = imageList[0][i];
}
}
}
-->
</script>
</head>
<body>
<form onSubmit="return false;">
<input type="image" src="A1.jpg" align="top" alt="TOP" id="menu0"
onMouseOver="mouseIn(0);" onMouseOut="mouseOut(0);"
onClick="changeMenu(0); return false;" />
<input type="image" src="B1.jpg" align="top" alt="質問2" id="menu1"
onMouseOver="mouseIn(1);" onMouseOut="mouseOut(1);"
onClick="changeMenu(1); return false;" />
<input type="image" src="C1.jpg" align="top" alt="質問3" id="menu2"
onMouseOver="mouseIn(2);" onMouseOut="mouseOut(2);"
onClick="changeMenu(2); return false;" />
<input type="image" src="D1.jpg" align="top" alt="質問4" id="menu3"
onMouseOver="mouseIn(3);" onMouseOut="mouseOut(3);"
onClick="changeMenu(3); return false;" />
<input type="image" src="E1.jpg" align="top" alt="質問4" id="menu4"
onMouseOver="mouseIn(4);" onMouseOut="mouseOut(4);"
onClick="changeMenu(4); return false;" />
<input type="image" src="F1.jpg" align="top" alt="質問5" id="menu5"
onMouseOver="mouseIn(5);" onMouseOut="mouseOut(5);"
onClick="changeMenu(5); return false;" />
</form>
</body>
</html>
追記：
失礼｡[i]で正しいです｡
回答ありがとうございます｡
ｸﾘｯｸした際に､ｸﾘｯｸした画像のほかも同じｸﾘｯｸした1番 画像になってしまうのですが､それぞれ元の最初のﾒﾆｭｰに戻すにはどうすればいいでしょうか？
menu.src = imageList[0][index];
[index] を[i]にしたら希望通り行きました｡
すでに回答は出ていますので､ちょっとお遊びの回答をさせて下さい｡
JavaScriptは使用していません｡CSSです｡
IEでは対応していないので､現実的にはJavaScriptを使用しないといけないのですけれどね｡
