show/hide jQuery dialog box on mouseover

Question

I'm trying to make a mouseover map area on an image that must display a dialog box when the mouse is over. The dialog box content is different, depending on which area it is.

My script actually always show all the dialog boxes.

Here is the jsFiddle I created : http://jsfiddle.net/U6JGn/4/

and the javascript :

$(function() {
$('#box').dialog( { modal:true, resizable:false } ).parent().find('.ui-dialog-titlebar-close').hide();

for (var i = 0; i < 2; i++) {
    $( "#elem"+i ).mouseover(function() {
        $( ".box"+i ).dialog( "open" );
    });

    $( "#elem"+i ).mouseout(function() {
        $( ".box"+i ).dialog( "close" );
    });
}
});

What am I doing wrong ?

Solution 1

Assign the box dialog to a variable and then don't queue more jquery events with it because it will break your code.

Since Ids need always to be unique we need to do some changes in your html and css

ids: #box0, #box1

class: .box

$(function() {
         $('.box').each(function(k,v){ // Go through all Divs with .box class 
               var box = $(this).dialog({ modal:true, resizable:false,autoOpen: false });
                    $(this).parent().find('.ui-dialog-titlebar-close').hide();

                 $( "#elem"+k ).mouseover(function() { // k = key from the each loop
                    box.dialog( "open" );
                    }).mouseout(function() {
                    box.dialog( "close" );
                });
          });
    });

working example: jsfiddle

Solution 2

Try this:

for (var i = 0; i < 2; i++) {
    (function(i) {
        $( "#elem"+i ).mouseover(function() {
            $( ".box"+i ).dialog( "open" );
        });

        $( "#elem"+i ).mouseout(function() {
            $( ".box"+i ).dialog( "close" );
        });
    })(i);
}

UPDATE:

Take a look at the demo

Solution 3

http://jsfiddle.net/U6JGn/129/

Modified JQuery code....

$(document).ready(function() {



for (var i = 0; i<= 1; i++) {    

        $( "#elem"+i ).on('mouseenter',function() {
            var st = $(this).attr('Id').replace('elem','');
            $( ".box" + st).css('display','');
        });
        $( "#elem"+i ).on('mouseout',function() {
            var st = $(this).attr('Id').replace('elem','');
            $( ".box"+st ).hide();
        });

    }


    });