Изменить несколько встроенных стилей с помощью Javascripts OnMouse Over, OnMouse Out, Enter Key Change - PullRequest
Новая
       8

Изменить несколько встроенных стилей с помощью Javascripts OnMouse Over, OnMouse Out, Enter Key Change

0 голосов
/ 26 августа 2011

Может кто-нибудь помочь указать мне направление изменения нескольких встроенных стилей с помощью javascript, например: OnMouseOver, OnMouseOut, а затем изменение клавиши ввода?

У меня есть 2 нажатия / выключения мыши при нажатии на кнопку, которые должны произойти, а затем состояние после нажатия клавиши Enter, которое должно изменить графическое изображение на загружаемый рисунок?

Перед мышью над состоянием: 

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

Mouse Over State - смена справа налево: 

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

1 Ответ

0 голосов
/ 26 августа 2011

Вы можете использовать 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");

когда поиск будет завершен

...