0

Can someone help point me in the direction of changing multiple inline styles 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" />

1 Answer 1

0

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

1
  • Thanks. I appreciate the answer. I've contemplated jQuery. I'm not the most fluent in the area of javascript or the derivative jQuery. I've used it and implemented but never wrote from scratch my own functions. Just manipulated. So I'm not even too sure on where to go from here. I hit that familiar brick wall. ;) Aug 26, 2011 at 18:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.