onMouseOver, hyperlink and rel...help me :(

Question

Currently, I have a carousel on JavaScript which works when we click on hyperlink, like this:

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

I would like execute this event with a onMouseOver too. So I try this, but it doesn't work:

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

How to fix it?

PS:

This is the JS code in question:

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]);
    }

You could show us some of your JS code too. – Ondrej Slinták May 31 '10 at 08:41 — Ondrej Slinták, May 31 '10 at 08:41

Marcel Korpel · Answer 1 · 2010-05-31T22:21:35.663

Where in your code is the click event assigned to the anchor element? Moreover, why do you use a separate element solely to assign a mouseover event?

You can better use

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

or even better assign the JavaScript in a seperate file:

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

This way, when a user doesn't have JavaScript enabled and/or middle-clicks on the next-button, your site will still function.

score 0 · Answer 2 · answered May 31 '10 at 08:41

0

<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' returns an array.

answered May 31 '10 at 08:41

Jeaf Gilbert

11,495
19
78
105

What for `javascript:` is? It's better to use just `#`, isn't it? – abatishchev May 31 '10 at 08:48
@bahamut100: `javascript:` is very out-of-date. It's for IE4 and Netscape4, etc – abatishchev May 31 '10 at 09:40
@abatishchev: Neither, see http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0 – Marcel Korpel May 31 '10 at 13:17

score 0 · Answer 3 · edited May 23 '17 at 11:48

There is two problems here.

As Jeaffrey said getElementsByTagNames returns an array so your code may look like this too.

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

But this won't work neither as there is no convenient way to generate a click programatically in vanilla javascript. See In JavaScript can I make a "click" event fire programmatically for a file input element?. It's still possible with at least jQuery : http://api.jquery.com/click/, but including such a dependency for this seems overkill.

The best solution I see in your situation would be to just call the a[href] method directly in the p[onmouseover].

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

onMouseOver, hyperlink and rel...help me :(

3 Answers3