Onmouseover function pass

[Sam12345]

Hi
I’m trying to work with javascript to make images disappear onmouseover
Can i utilize onmouseover in a function?
Or can I declare it into a variable?
I’m asking because I want to make an if statement
And have it work with mouseout?
So if the mouse pointer is over a I’m going it disappears
Then when mouse is off Image it reappears one at a time
I want to be able to count each mouse over so I can display some text after it points over image x number of times
So that’s why I’m wondering if I can actually call the onmouseover event attribute as part of the programming in javascript?

[Paul_Wilkins]

@Sam12345

So that’s why I’m wondering if I can actually call the onmouseover event attribute as part of the programming in javascript?

You can keep track of things when the mouse causes an element to trigger the onmouseover event.
One way to do this is to use the onmouseover event to increase a counter property on the image. When that counter reaches a certain number, you can then show the text.

I recommend that you use HTML to show both the image and the text, then use scripting to hide the text.
That way the script can easily reveal the hidden text later on.

As an example, we’ll use images of Mickey and Goofy.

<div class="images">
    <div>
        <img height="200" src="https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png">
        <p>Why don't you choose Goofy?</p>
    </div>
    <div>
        <img height="200" src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a6/Goofy.svg/120px-Goofy.svg.png">
        <p>Could you choose Mickey?</p>
    </div>
</div>

We will use CSS to line up the images side by side with each other:

.images div {
    float: left;
}

We will also initially hide the text, using the following CSS declaration. In deciding between using display, visibility, or opacity, I’ve chosen to go with opacity because display affects the layout, and visibility gives trouble with the over/out events.

.hide {
    opacity: 0;
}

It’s normally good practice to use scripting to hide things, so that the text is still there if something goes wrong with the scripting.

document.querySelectorAll(".images p").forEach(function (p) {
    p.classList.add("hide");
});

We can now assign the onmouseover and onmouseout events to the images:

document.querySelectorAll(".images img").forEach(function (img) {
    img.onmouseover = mouseoverHandler;
    img.onmouseout = mouseoutHandler;
});

The mouseoverHandler function does three main things. It hides the div containing both the image and the text, it increases a counter of the number of times the image has been hovered over, and it shows the text if you hover over the image more than a couple of times.

function mouseoverHandler(evt) {
    var img = evt.target;
    img.parentNode.classList.add("hide");

    increaseCounter(img);
    if (shouldShowText(img)) {
        img.nextElementSibling.classList.remove("hide");
    }
}

The increaseCounter and shouldShowText functions are kept in separate functions to help make the code easier to understand. The image won’t have a moCounter property the first time that increaseCounter is called, which is why img.moCounter || 0 is used, so that either the current value or a default of 0, are used.

function increaseCounter(img) {
    img.moCounter = img.moCounter || 0;
    img.moCounter += 1;
}
function shouldShowText(img) {
    return img.moCounter >= 2;
}

The mouseoutHandler function just removes the hide class on the div that contains the image and the text. The text will continue to remain hidden.though until the image has been hovered over enough times.

function mouseoutHandler(evt) {
    var img = evt.target;
    img.parentNode.classList.remove("hide");
}

You can see a working example of this over at https://jsfiddle.net/pmw57/w25wb0rs/1/

[Sam12345]

Object wow thank you so much this is great !