こういうことでしょうか?
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を使用しないといけないのですけれどね。