CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
The Puma
The Puma

Reputation: 1390

How can I make a div appear over specific area tags on an image on mouseover?

I have some javascript that moves an image continuously left. When you mouseover the image, I want the scrolling to stop, and I want a slightly transparent div with some custom text to appear over whatever area tag your mouse is over.

Here is the JS I'm using, and I commented out where things should happen. How would I do this?

$(document).ready(function() {
                var date = new Date();
                var style = "day"
                if (date.getHours() >= 17 && date.getHours() <=5) {
                    style="night";
                }
                setInterval(wells_fancy_slider, 50);
                $('area').hover(function() {
                                    // here is where the code should go
                    paused = true;
                }, function() {
                                    // here is where you hide the div
                    paused = false;
                })
            })

            function wells_fancy_slider() {
                if (!paused) {
                    if (parseInt($('#pic1').css('left')) < -2770) {
                        $('#pic1').css('left', '5586');
                    }
                    if (parseInt($('#pic2').css('left')) < -2770) {
                        $('#pic2').css('left', '5586');
                    }
                    if (parseInt($('#pic3').css('left')) < -2770) {
                        $('#pic3').css('left', '5586');
                    }
                    $('#pic1, #pic2, #pic3').css('left', '-=5');
                }
            }

Upvotes: 0

Views: 374

Answers (2)

user1326628
user1326628

Reputation:

Try this one..

t = setInterval(wells_fancy_slider, 50);

$('#area').hover(function(e) {
    clearInterval(t);
    var parentOffset = $(this).offset(); // or $(this).parent().offset();
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    paused = true;
}, function() {
    clearInterval(t);
    t = setInterval(wells_fancy_slider, 50);
    paused = false;
});

Upvotes: 3

A. Wolff
A. Wolff

Reputation: 74410

Not sure it will fit your needs:

CSS:

#mydiv{position:absolute;display:none}

    $('area').hover(function() {                

   $('mydiv').offset({ top: $(this).offset().top, left: $(this).offset().left}).fadeIn();
                paused = true;
            }, function() {
                   $('#mydiv').hide();
                paused = false;
            })

Upvotes: 3

Related Questions