0

OnMouseOver、OnMouseOut、Enter キーの変更など、javascript を使用して複数のインライン スタイルを変更する方向を教えてもらえますか?

2 つの onclick マウス オーバー/アウトが発生する必要があり、Enter キーを押した後、グラフィックをローディング グラフィックに変更する必要がありますか?

マウスオーバー状態の前:

src="images/transparent_100x100.png" style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent"

マウスオーバー状態 - 右から左に変更:

src="images/transparent_100x100.png" style="background:url(/images/image_giblets_20x.png) no-repeat scroll left -414px transparent"

クリックして検索を開始したら、画像を次のように変更し、[スタイルの詳細] を削除します。

src="images/loading2.gif"

これは、OnMouseOver/Out 部分だけでこれまでに試したことです。

<img id="nb_search_magglass" alt="Search" border="0"
onmouseover="document.getElementById('nb_search_magglass').style.background: url(/images/image_giblets_20x.png) no-repeat scroll left -414px transparent;"

onmouseout="document.getElementById('nb_search_magglass').style=.background: url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent;"

style="background:url(/images/image_giblets_20x.png) no-repeat scroll right -414px transparent" src="images/transparent_100x100.png" width="23px" height="23px" />
4

1 に答える 1

-1

jQueryを使用できます。使用できるイベントの詳細なリストは次のとおりです: http://api.jquery.com/category/events/

アイデアは次のようになります。

<html>
<head>
  <script>
  jQuery(document).ready(function() {
      $("img.wanna-change").mouseover(function() {
         // this this here is the <img> object. Here I make it into a
         //   jQuery object but you can put any javascript code here
         $(this).attr("style", "background:url() no-repeat scroll; width: 20px;")
      });
  </script>
</head>
<body>
  <img class="wanna-change" src="something" />
  <img class="wanna-change" src="something-else" />
</body>
</html>

一方、これを行うためにjavascriptを使用するのではなく、cssから次のように行います。

img {
    your-normal-style;
}
img:hover {
    your-hover-style;
}
img.searching {
    your-searching-style;
}

そのjQueryの一部を変更してクリックをキャッチし、検索AJAX呼び出しを実行してから、

$(this).addClass("searching");

そしておそらく

$(this).removeClass("searching");

検索が完了すると

于 2011-08-26T17:14:10.493 に答える