CODEWITHSUNDEEP
javascriptjqueryhtmlcss
0x_Anakin
0x_Anakin

Reputation: 3269

Image flickering on mouseover and mouseout

Hello I have a menu that consists of div tags. The user selects an image for each menu item and one additional image to be applied when the mouse is over the menu (hover state).

The problem is that is on mouseenter and on mouseleave the image flickers and the user experience is not ideal.

Keep in mind that the user uploads photos for each menu item 1 for default and 1 for hover state.

How do i get rid of the flickering ?

Menu item html:

<div class="help-context-box" style="background: url(http://domain.com/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180) no-repeat left top;" onmouseover="this.style.background=' url(/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&amp;groupId=10180) no-repeat left top'" onmouseout="this.style.background=' url(/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180) no-repeat left top'"></div>

Upvotes: 0

Views: 2201

Answers (4)

Stephanieraymos
Stephanieraymos

Reputation: 314

Another solution if you have a wrapper element: If you place the onmouseover on the child element and the onmouseout on the parent element, the jittering should go away if the parent is block level.

Upvotes: 1

webdev-dan
webdev-dan

Reputation: 1359

You should display both at the same time - one over another. Hide the one which you want to display on hover, show it on mouse hovering, and hide it again when mouse leave.
below an example which should be working:

            <style>
            .help-context-box { position:relative; width:100px; height:100px; }
            .help-context-box img { position:absolute; top:0; left:0;  }
            .help-context-box img:last-child { display:none; }
            .help-context-box:hover img:last-child { display:inline-block; }
            </style>


            <div class="help-context-box">
                <img alt="" src="/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180">
                <img alt="" src="/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&amp;groupId=10180">
            </div>

Upvotes: 1

Gil
Gil

Reputation: 1804

If your div and images are the same size there is another option: create a new image containing both images, one over the other and do everything with CSS.

HTML:

<div class="help-context-box"></div>

CSS:

div.help-context-box {
    background: url(new_image_url) no-repeat left top;
}
div.help-context-box:hover {
    background-position: left bottom;
}

Upvotes: 0

Houdmont
Houdmont

Reputation: 1323

There are a few solutions I can think of:

  1. If you are able to produce a sprite of the two images, and simply change the background position on hover, that would remove the loading flicker.

  2. You could prefetch image resources and stick with your current solution.

  3. You could use two tags instead of background images and position them over each other, and simply hide the default (top) image when hovering over the menu item, revealing the already loaded hover image.

Upvotes: 0

Related Questions