11

I'm trying to simulate the effect where I hover on an image an overlayed semi-transparent image will fade in from the direction where your mouse came from. Vice versa when your mouse leaves the image (fadeout + moves away)

I've prepared a test page for this. Go ahead and check it out, it will clarify what the desired effect is.

I have defined a HTML structure for this:

    <div class="overlayLink">
        <img src="assets/work/thumbnails/kreatude.jpg" alt="Kreatude" />
        <div class="overlayLink_overlay_bg">&nbsp;</div>
        <div class="overlayLink_overlay_fg">
            <span class="overlayLink_overlay_link"><a href="#">View Case Study</a></span>
            <div class="top">&nbsp;</div>
            <div class="left">&nbsp;</div>
            <div class="right">&nbsp;</div>
            <div class="bottom">&nbsp;</div>
        </div>
     </div>

and the following JS (I'm using jQuery):

jQuery(document).ready(function () {
    ourWork();
});

function ourWork(){
    var inHandler = function(){
        var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');
        var divClass = inClass;

        blue_bg.stop(true,true).fadeIn();
        var ml,mt;
        if(divClass == 'left'){
            ml = -260;
            mt = 0;
        }
        else if(divClass == 'right'){
            ml = 260;
            mt = 0;
        }
        else if(divClass == 'top'){
            ml = 0;
            mt = -140;
        }
        else if(divClass == 'bottom'){
            ml = 0;
            mt = 140;
        }       

        //positioning
        jQuery(this).find('a').css({
            'marginLeft': ml + 'px',
            'marginTop' : mt + 'px'
        });


        //animation
        jQuery(this).find('a').stop(true,true).animate({
            "marginLeft": "0px",
            "marginTop": "0px"
        }, "slow");
    }
    var outHandler = function(){
        var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');
        var divClass = outClass;

        blue_bg.stop(true,true).fadeOut();
        var ml,mt;
        if(divClass == 'left'){
            ml = -260;
            mt = 0;
        }
        else if(divClass == 'right'){
            ml = 260;
            mt = 0;
        }
        else if(divClass == 'top'){
            ml = 0;
            mt = -140;
        }
        else if(divClass == 'bottom'){
            ml = 0;
            mt = 140;
        }        

        //animation
        jQuery(this).find('a').stop(true,true).animate({
            "marginLeft": ml + "px",
            "marginTop": mt + "px"
        }, "slow");

    }

    var inClass, outClass;
    jQuery('.overlayLink_overlay_fg div').hover(function(){        
        inClass = jQuery(this).attr('class');
    },function(){       
        outClass = jQuery(this).attr('class');
    });

    jQuery('.overlayLink').mouseenter(inHandler).mouseleave(outHandler);
}

explanation:

Basically I have four absolute positioned divs on top of the image to know the direction (left,top,bottom,right) when I hover on one of those 4 div's (.overlayLink_overlay_fg div) I put the class name of the hovered div in a variable (var inClass and var outclass)

Once I hover over the div who covers the area of the image (.overlayLink) I request the direction from the inClass or outClass variable and perform the animation (inHandler,outHandler)

however this all seems to work, it's a little glitchy when you move your mouse really fast, now I'm asking what the problem is (that's causing the glitches) and how it could be fixed with my current code.

Thanks in advance

3
  • Theres lots of glitches in the page you linked to above - this is yours right? If I go down from the top it works. Then out to the left it works. Then if I go down from the top again it works but going out to the left again makes the overlay go up. Then if I go in from the left after that the overlay comes from the top. Doesn't matter how fast I do it. Sep 2, 2010 at 12:32
  • you're right, didn't realise it was so glitchy. And yes this is my page. However there must be some logical reason why this happens. If I review my code I can't see the logical error in it, which bothers me quite a bit lol.
    – user191766
    Sep 2, 2010 at 12:35
  • Just don't. It's not fair for touch users. Dec 22, 2017 at 18:53

7 Answers 7

49
+100

Perhaps you shoud consider not to use the divs as "hotspots" but use some Math and Javascript to find the point where the mouse enters and leaves a div. This avoids overlapping/gaps problems. The code below basicaly divides a div in 4 triangled zones. Each zone returns a number when the mouse moves over it. The code needs some finetuning, and you have to decide for yourself where to bind and unbind the events. But I think it takes away most of your flickering problems.

$(".overlayLink").bind("mouseenter mouseleave",function(e){

/** the width and height of the current div **/
var w = $(this).width();
var h = $(this).height();

/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
var x = (e.pageX - this.offset().left - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offset().top  - (h/2)) * ( h > w ? (w/h) : 1 );

/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
/** first calculate the angle of the point, 
 add 180 deg to get rid of the negative values
 divide by 90 to get the quadrant
 add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;


/** do your animations here **/ 
switch(direction) {
 case 0:
  /** animations from the TOP **/
 break;
 case 1:
  /** animations from the RIGHT **/
 break;
 case 2:
  /** animations from the BOTTOM **/
 break;
 case 3:
  /** animations from the LEFT **/
 break;
}});

of course the short notation to get the direction should be:

var direction =  Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4

where 1.57... is Math.PI / 2 This is much more efiicient bit harder for me to explain since it skips the degrees conversion.

3
  • also, if the native javascript this.offsetTop isn't reporting correctly, using $(this).offset().top worked. I'm moving the body on a translateY axis, which messes with the correct offset readings. Just an fyi.
    – Abbey
    Jul 22, 2014 at 23:08
  • 1
    Hi Caspar, I can understand the concept of calculate the x and y to get an angle to the center of the div, but I don't know why need to ( w > h ? (h/w) : 1 )? can you please help to understand that? I thought to normalize it (e.pageX - this.offsetLeft - (w/2)) this is enough
    – Sean
    Jul 26, 2014 at 14:39
  • @Sean, it is a correction on the orientation of the DIV; landscape or portrait oriented. Aug 8, 2014 at 9:04
1

Fundamentally, mouse movement events happen as a sequence of dots not as a curved line as we perceive the movement on the screen. The faster you move the mouse the wider the spacing between the dots and the larger the objects the mouse can move over without touching. So ideally you need to know the direction of the last mouse position prior to landing on your object and from that calculate the direction from which it approached. i.e. You need to constantly track the mouse position on the whole page to be certain of getting your effect to work correctly every time.

0

Rather than surrounding the image with absolutely positioned divs, you might try doing this with an image map, attaching handlers to the defined areas. Just define the border areas to be thick enough that the mouse movement will be detected even if it's being moved rather quickly.

3
  • is this just a thought or is this considered being a good practice?
    – user191766
    Sep 2, 2010 at 15:50
  • Note sure what you mean by "just a thought". Surrounding your images with absolutely positioned divs is a clever hack. Whereas image map and image are integral to one another and offer a cleaner design with better encapsulation and a less complicated page layout.
    – Tim
    Sep 2, 2010 at 23:49
  • Also, with an image map you can more easily adjust the thickness of the invisible "hot" border areas, the better to detect mouse-over, without affecting the layout.
    – Tim
    Sep 3, 2010 at 12:42
0

If you swipe your mouse rapidly from left to right so that it crosses 3 rectangles

     [ 1 ] [ 2 ] [ 3 ] 

the mouse will be entering rectangle #3 via its left border div immediately after it has exited rectangle #2 via its right border div. However, the assignment inClass="left" outClass="left" when rectangle #3 is entered via its left border div occurs BEFORE the outHandler for rectangle #2 has fired.

0

If I were going to implement this functionality, here's how I'd approach it:

  1. Create image map areas defining the top, bottom, left, and right borders for the image.
  2. For each image where you want this intelligence (i.e. what side was it entered on, what side was it departed from): a) track the sideEntered -- this value is assigned once and only once; whenever an image-map border area is entered its mouseover handler will consult sideEntered and assign it only if it has not yet been assigned; b) track the lastSideTouched -- whenever an image map area is entered its mouseoverhandler reassigns this variable c) when the mouse leaves the rectangle, the leave handler consults lastSideTouched and resets sideEntered to null

Each rectangle should have its own handlers so the two important values, sideEntered and lastSideTouched, are encapsulated within the scope of its handler.

1
  • See my explanation below of why rapid movement is causing your glitches.
    – Tim
    Sep 5, 2010 at 15:24
0
  • What the problem is (that's causing the glitches)

This code (and the use of inClass & outClass) are problematic. You are changing the state of global variables that are used in the event handlers.

var inClass, outClass; 
jQuery('.overlayLink_overlay_fg div').hover(function(){         
    inClass = jQuery(this).attr('class'); 
},function(){        
    outClass = jQuery(this).attr('class'); 
}); 

This code assumes that outClass was set by the 'local' div, but coulsd have been set by a neighboring top div

    var outHandler = function(){        
    var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');        
    var divClass = outClass;   
  • how [could] it could be fixed with my current code?

Do not manage this as a single, global variable, try managing it with Isolated mannor.

Here is one apprach: I have not tested this code

    jQuery('.overlayLink_overlay_fg div').hover(function() {
        jQuery(this).parents('.overlayLink').attr('mouseEnterClass', jQuery(this).attr('class'));
    }, function() {
        jQuery(this).parents('.overlayLink').attr('mouseLeaveClass', jQuery(this).attr('class'));
    });

In your handlers, refrence this new data.

    var outHandler = function() {
        var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');
        var divClass = jQuery(this).attr('mouseLeaveClass');
        ....
      }

this woulod address the global variable issue. I am not sure what will happen if the 'hover' event occurs before the animation completes.

EDIT: Fixed issues with code.

0

This is a simple solution, but the edges need improvements in mouseenter event.

In mouse enter event I gave it 5% differ in (0% & 0%) (100% & 100%) just for catching the cursor if it moves fast and this is the bug that needs a fix.

enter image description here

const div = document.querySelector('div');

const mouseLeave = (e) => {
    e.preventDefault();
    e = e || window.event;

    // get box properties
    let a = e.target.getBoundingClientRect();
    let w = a.width;
    let h = a.height;

    // get x,y
    const x = e.pageX - a.left;
    const y = e.pageY - a.top;

    //* detect mouse out
    if (x >= w) console.log('out-right');
    if (x <= 0) console.log('out-left');
    if (y >= h) console.log('out-bottom');
    if (y <= 0) console.log('out-top');
}

const mouseEnter = (e) => {
    e.preventDefault();
    e = e || window.event;

    // get box properties
    let a = e.target.getBoundingClientRect();
    let w = a.width;
    let h = a.height;

    // get x,y
    const x = e.pageX - a.left;
    const y = e.pageY - a.top;

    // get positions by percentage
    const X = (x / w) * 100;
    const Y = (y / h) * 100;

    //* detect mouse in
    if ((X >= 0 && X <= 100) && (Y >= 0 && Y <= 5)) console.log('in-top');
    if ((X >= 0 && X <= 100) && (Y >= 95 && Y <= 100)) console.log('in-bottom');
    if ((Y >= 0 && Y <= 100) && (X >= 95 && X <= 100)) console.log('in-right');
    if ((Y >= 0 && Y <= 100) && (X >= 0 && X <= 5)) console.log('in-left');
}

div.addEventListener('mouseleave', mouseLeave, true);
div.addEventListener('mouseenter', mouseEnter, true);
div {
    width: 300px;
    height: 300px;
    outline: 1px solid blue;
    margin: 50px auto;
}
<div></div>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.