CODEWITHSUNDEEP
javascripthtml
Cassandra
Cassandra

Reputation: 53

JavaScript Image flickering upon onmouseover and onmouseout

I am trying to do a mouseover to popup a larger image of the default image. However, whenever I hover over the smaller image, it does popup but when I hover over the popup image, it keeps on flickering.

Below is my code:

HTML:

<div class="thumbnail" id="thumbnail1">
    <img src="image1.jpg" onmouseover="enlarge1()" onmouseout="minimize1()"/>            
</div>

JS:

function enlarge1() {
    var parent = document.getElementById("thumbnail1");
    var child = document.createElement("IMG");
    child.setAttribute("src", "image-large1.jpg");
    child.setAttribute("width", "350%");
    child.setAttribute("alt", "Related Large 1");
    child.style.position="absolute";
    child.style.zIndex="1";
    child.style.bottom="15%";
    child.style.left="30%";

    parent.appendChild(child);

}

function minimize1() {
    var parent = document.getElementById("thumbnail1");
    var child = parent.lastElementChild;
    parent.removeChild(child);
}

Upvotes: 2

Views: 4426

Answers (3)

Bill
Bill

Reputation: 11

Since writing this I have found it was only part successful.

As suggested, I used mouseenter and exit on the figure instead of the image. On mouseenter I increase the dimensions of the figure for emphasis. Putting the mouse pointer exactly between figures gave constant flickering so I tried increasing the margin on the figures and it stopped the flicker. Trial and error gave me a working fix without excessive gaps between figures. Looks like mouseenter may not fire until you reach one of the elements inside the figure Perhaps something using focus would give a more elegant solution. Hope this helps someone

Upvotes: 0

SamVK
SamVK

Reputation: 3395

You need to...

  1. Move the mouse events onto the wrapping div

  2. change them to onmouseenter and onmouseleave

<div class="thumbnail" id="thumbnail1" onmouseenter="enlarge1()" onmouseleave="minimize1()">
    <img src="image1.jpg" alt=''>
</div>

That way, when you are hovering over either image, it's still in "hover" mode — and, unlike onmouseover, onmousenter only triggers once (when you enter the div) so it won't retrigger when you switch from hovering over the small to the large image.

Upvotes: 8

JiangangXiong
JiangangXiong

Reputation: 2426

You can use mouseenter and mouseleave， not mouseover and mouseout.

Because the mouseover event will be invoked once you move mouse over the DOM or it's child DOM. So it may be invoked many times when you move mouse over the larger image.

But, for mouseenter, only when you enter the DOM, it will be invoked, not for it's child. It will not be invoked when you move mouse over the larger image.

var x = 0;
var z = 0;
function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x+=1;
}
function myMoveFunction() {
    document.getElementById("demo").innerHTML = z+=1;
}
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
}
<div onmouseenter="myEnterFunction()">
<img style="width: 100px;height: 100px;background-color:red;" src="" title="move mouse enter here"  />
<p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>
<div onmousemove="myMoveFunction()">
  <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

Upvotes: 0

Related Questions