onmouseover  image is jittery or flickers

Posted on 2005-04-26
Last Modified: 2012-05-05
Hi everyone.

I am using the standard onmouseover / onmouseout  to show and display a <DIV>
that contains an image.

Problem is when the mouse is over the 'hotspot' the new image flickers on and off like crazy.

Here's more info.

This is two layers.

1) The bottom layer one is a large background image with 'hot spots'

2) upon hovering on of the image hot spots, as hidden <DIV> should appear
   (The <DIV> division contains the image)

Ever had this problem before?  - thanks

Question by:paygo
    LVL 1

    Expert Comment

    i would like to ask u is that..hmm,.is ur image animation or flash stuff or others blinking,... flickering image, because that will affect ur onmouseover, onmouseout,....


    Author Comment

    nope - just a simple image - no effects used

    LVL 30

    Accepted Solution

    That happens when the onmouseover has the side effect of calling the onmouseout and vice versa.  It's quite common with popups.

    When you mouseover the hot spot, a popup div is shown under the mouse.
    Since the mouse is not considered to be over the hotspot anymore, the onmouseout is triggered.
    The mouseout hides the div.
    Now your mouse is considered to be over the hot spot again and the popup div is shown again.
    And this keeps repeating.

    The easiest solution is to pop your div in a location that does not overlap the hotspot.
    The other solution is to pop your div under the mouse and use the onmouseout on the poped div instead of using it on the hotspot.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now