htmlとjavascripctかjqueryで

1.画像を触ったら、画像が変わって、クリックしたらそこがクリックされたままの画像にして、クリックされたら
元の最初の画像に戻すのはどうやればいいでしょうか?
2.検索ボタン作って、クリックしたら画像が凹む様子を表現したいのですがどうすればいいでしょうか?
画像は三枚ずつ用意してあって、やろうと思っています。
以下のタグで間違いがあったら指摘お願いします
1.の場合のhtml
<input type="image" src="/img/kensaku18.jpg" align="top" OnMouseOver="this.src='./img/kensaku_C.jpg'" onclick="/img/kensaku_B.jpg" OnMouseOut="this.src='/img/kensaku.jpg' alt="カゴに入れる"">
2.の場合のhtml
<input type="hidden" name="submit" value="検索">
<input type="image" src="/img/kensaku18.jpg" align="top" OnMouseOver="this.src='./img/kensaku_C.jpg'" onclick="/img/kensaku_B.jpg" OnMouseOut="this.src='/img/kensaku.jpg' alt="カゴに入れる"">

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/12 20:17:09
  • 終了:2011/10/19 20:20:03

回答(3件)

id:tdoi No.1

tdoi回答回数174ベストアンサー獲得回数752011/10/12 20:57:17

こういうことでしょうか?

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;" />
id:koonii26

回答ありがとうございます。

1.はホームページで使うメニューバーでの話のことです。おっしゃっているとおりですね。Cになった状態で他のメニューに触ると、今までのクリックされてたのはC→Aに戻り、違うメニューがCの状態になるっていうのをやりたいと思っています。

2.は

そのまま使えます。

ありがとうございます。

2011/10/13 11:13:07
id:tdoi No.2

tdoi回答回数174ベストアンサー獲得回数752011/10/13 12:55:10

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]で正しいです。

id:koonii26

回答ありがとうございます。

クリックした際に、クリックした画像のほかも同じクリックした1番 画像になってしまうのですが、それぞれ元の最初のメニューに戻すにはどうすればいいでしょうか?

menu.src = imageList[0][index];

[index] を[i]にしたら希望通り行きました。

2011/10/18 18:53:08
id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/10/13 15:40:29

すでに回答は出ていますので、ちょっとお遊びの回答をさせて下さい。

http://jsfiddle.net/sWPtF/

JavaScriptは使用していません。CSSです。

IEでは対応していないので、現実的にはJavaScriptを使用しないといけないのですけれどね。

  • id:tdoi
    どこまでを使ってくれてるのか分かりませんが、返信にもらったコードだといくつか問題があります。

    1つは、indexを0から使うか、1から使うかが混同してあることです。
    僕の提示したものでは、基本的にはすべて1から使うことを想定してあります。

    もう1つが致命的だったのですが、menuという変数で画像のファイルのリストを定義してましたが、関数内でもmenuを定義しているため、問題が起こっています。

    また、もとのinputのsrcを見ると、imgディレクトリ内に画像ファイルを配置しているようです。もし、そうなら、配列に格納するデータ自体を、img/top2_1.jpgとしておくか、あるいは、JavaScriptの関数内で更新する際に、"./img/" + 画像ファイル名のように加工してあげる必要があります。


    6個のメニューで動くようにしたものを、回答に追加しておくので、参考にしてください。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません