Change Multiple Inline Styles using Javascripts OnMouse Over, OnMouse Out, Enter Key Change_问答_开发者

Change Multiple Inline Styles using Javascripts OnMouse Over, OnMouse Out, Enter Key Change

开发者 https://www.devze.com 2023-03-30 20:54 出处：网络

Can someone help point me in the direction of changing multiple inline sty开发者_StackOverflowles using javascript suchas: OnMouseOver, OnMouseOut, and then a enter key change?

I have 2 onclick mouse over / out things that need to happen and then an after Enter key pushed state that needs to change the graphic out to a loading graphic?

Before Mouse Over State:

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

Mouse Over State - Change right to left:

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

Once clicked to begin search - change the image to this and remove [style details]:

src="images/loading2.gif"

Here is what I tried so far for just the OnMouseOver/Out part.

<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" />

You can use jQuery. Here's a detailed list of events you can use: http://api.jquery.com/category/events/

The idea would be:

<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>

On the other hand, I wouldn't use javascript to do this, I'd do it from css like so:

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

and change that piece of jQuery to just catch the click, do the search AJAX call, and then

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

and probably

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

when the search is done

Change Multiple Inline Styles using Javascripts OnMouse Over, OnMouse Out, Enter Key Change

精彩评论

关注公众号

热门标签

图文推荐

Change Multiple Inline Styles using Javascripts OnMouse Over, OnMouse Out, Enter Key Change

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：