onmouseout не работает

У меня небольшая проблема. Я вызываю функцию для события onmouseout события, она работает нормально, но не меняет innerHTML. Ниже моя функция:

function rvrtImg(id) {
  alert(id);
  if(id=="img1") {
    alert(id)
    document.getElementById(id).innerHTML = "<img src='<?php echo     
        get_bloginfo('template_directory')?>/img/paging/1.png' />"; 
  }
}

Вот, я звоню

<a href="#"  id="img1" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello</a>

Работает только предупреждение, но оно не меняет внутренний HTML


javascript html onmouseout
person Baig    schedule 30.01.2013    source источник
comment
Можете ли вы воспроизвести это на JS Fiddle? А почему бы не передать в функцию сам узел, а не id и потом искать элемент с getElementById(id)?   -  person David says reinstate Monica    schedule 30.01.2013
comment
Что выводит браузер БЕЗ вашего PHP-кода?   -  person Diodeus - James MacFarlane    schedule 30.01.2013
comment
@DavidThomas [ссылка]jsfiddle.net/Z9jgv — мой код   -  person Baig    schedule 30.01.2013
comment
@Baig, можете ли вы сказать нам, какое оповещение работает? Только первый или оба?   -  person thaJeztah    schedule 30.01.2013
comment
@Diodeus хорошо без PHP-кода, как видите, моя другая функция repImg() работает   -  person Baig    schedule 30.01.2013
comment
@thaJeztah оба работают   -  person Baig    schedule 30.01.2013
comment
Но это работает (несмотря на Uncaught ReferenceError: repImg is not defined).   -  person David says reinstate Monica    schedule 30.01.2013
comment
@Baig, вы пытались предупредить результат кода PHP, например: alert(‹?php echo get_bloginfo('template_directory')?›);   -  person thaJeztah    schedule 30.01.2013
comment
Насколько нам известно, значение ‹?php echo get_bloginfo('template_directory')?› может повредить вашу функцию, но мы даже не можем сказать об этом.   -  person Diodeus - James MacFarlane    schedule 30.01.2013
comment
прежде всего, вставьте эту функцию php в тег html, чтобы увидеть результат, если все в порядке, попробуйте объединить template_directory внутри файла php.   -  person Toping    schedule 30.01.2013
comment
ну теперь onmouseout не работает   -  person Baig    schedule 30.01.2013
comment
ну теперь onmouseout не работает   -  person Baig    schedule 30.01.2013

Ответы (2)


arrow_upward
0
arrow_downward

Вордпресс?

<a href="#" id="img1" class="paging image1">hello</a>

Вы можете использовать jQuery для обработки наведения/выхода мыши:

<script type="text/javascript">

jQuery( document ).ready( function( $ ) {

    $( 'a.paging.image1' ).hover(
        function() { $( this ).html( '<img src="hoverimage1.png" alt="" />' ); },
        function() { $( this ).html( '<img src="normalimage1.png" alt="" />' ); }
     );

} );

</script>
person rlatief    schedule 30.01.2013

arrow_upward
0
arrow_downward

Это потому, что изображение больше, чем текущий размер привязки. Это предотвратит правильное срабатывание мыши.

Вот рабочий пример: (Примечание к CSS) http://jsfiddle.net/QQSLC/16/

<a href="#" id="img1" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello with lower size than image</a>
<a href="#" id="img2" onmouseover="repImg(this.id)" onmouseout="rvrtImg(this.id)">hello with higher size than image</a>

a {
    background: green;
}
#img2{
    background: red;
    width: 300px;
    height: 120px;
    display: block;
}

Просто для дополнительной информации:

Когда у вас есть якорь с автоматическим размером, он использует высоту шрифта для высоты и автоматический размер для ширины. Предположим, что в этом случае размер нашего якоря составляет около 100 пикселей X 23 пикселя. Теперь вы хотите загрузить изображение при наведении мыши. Это изменит высоту привязки с высотой изображения внутри нее, поэтому якорь станет 600px X 300px. Когда это происходит, мышь все еще находится в этой области (потому что она была за пределами 23 пикселей. Но теперь она составляет 300 пикселей. Таким образом, мышь все еще там), поэтому браузер снова запускает наведение мыши. В то же время мышь над кодом изменила высоту привязки на 23 пикселя, поэтому мышь снова отсутствует, и этот цикл продолжается вечно. Чтобы предотвратить такого рода парадоксы, браузеры решили игнорировать отключение мыши на элементах с меньшим размером, чем размер мыши над размером. (Пока вы не сделаете CSS или не измените размер вручную, а не автоматически)

Обратите внимание, что мышь не работает, если вы перемещаете мышь сверху или слева от элемента, потому что любое изменение размера привязки не влияет на эти два направления.

person Soroush Falahati    schedule 30.01.2013