onMouseOver, гиперссылка и рел ... помогите мне :(

Question

В настоящее время у меня есть карусель на javascript, которая работает, когда мы нажимаем на гиперссылку, например:

<div id="direction1">
  <p>
    <a href="javascript:" class="carousel-control" rel="next"><img class="fleche_suiv" src="/project/images/next.png" alt="Suivant" title="Suivant" />
    </a>
  </p>
</div>

Я бы тоже хотел провести этот вечер с onMouseOver. Вот я и пытаюсь, но это не работает:

<div id="direction1">
  <p onMouseOver="this.getElementsByTagName('a').click()">
    <a href="javascript:" class="carousel-control" rel="next"><img class="fleche_suiv" src="/project/images/next.png" alt="Suivant" title="Suivant" />
    </a>
  </p>
</div>

Как это исправить ???

PS:

Это код JS, о котором идет речь:

next: function () {
        if (this.current) {
            var currentIndex = this.current._index;
            var nextIndex = (this.slides.length - 1 == currentIndex) ? (this.options.circular ? 0 : currentIndex) : currentIndex + 1;
        } else {
            var nextIndex = 1;
        }

        if (nextIndex == 0 && this.options.circular && this.options.effect != 'fade') {
            this.scroller.scrollLeft = 0;
            this.scroller.scrollTop  = 0;
            nextIndex = 1;
        }

        if (nextIndex > this.slides.length - (this.options.visibleSlides + 1)) {
            nextIndex = this.slides.length - this.options.visibleSlides;
        }       

        this.moveTo(this.slides[nextIndex]);
    }

Answer 1

Где в вашем коде событие click назначено для элемента привязки? Кроме того, почему вы используете отдельный элемент исключительно для назначения события mouseover?

Вы можете лучше использовать

<div id="direction1">
  <a href="http://linktothepicture" onmouseover="yourObject.next()" class="carousel-control" rel="next"><img class="fleche_suiv" src="/project/images/next.png" alt="Suivant" title="Suivant" /></a>
</div>

или даже лучше назначить JavaScript в отдельном файле:

window.onload = function () {
  var nextButton = document.getElementById("idOfNextButton");
  nextButton.onmouseover = yourObject.next;
};

Таким образом, когда у пользователя не включен JavaScript и / или не нажата средняя кнопка «Далее», ваш сайт будет работать.

Answer 2

Здесь есть две проблемы.

Как сказал Джеффри, getElementsByTagNames возвращает массив, поэтому ваш код может выглядеть так же.

<p onMouseOver="this.getElementsByTagName('a')[0].click()">

Но это не сработает, так как нет удобного способа программно сгенерировать клик в ванильном javascript. См. В JavaScript можно ли программно вызвать событие "click" для элемента ввода файла? . Это по-прежнему возможно по крайней мере с jQuery: http://api.jquery.com/click/,, но включение такой зависимости для этого кажется излишним.

Лучшее решение, которое я вижу в вашей ситуации, это просто вызвать метод a [href] непосредственно в p [onmouseover].

<p onMouseOver="yourObjectInWichNextIsdefined.next()">

Answer 3

<div id="direction1">
    <p onMouseOver="document.getElementById('myLink').click()">
        <a id="myLink" href="javascript:" class="carousel-control" rel="next"><img class="fleche_suiv" src="/project/images/next.png" alt="Suivant" title="Suivant" />
        </a>
    </p>
</div>

getElementsByTagName возвращает массив.