mostrar / ocultar a caixa de diálogo jQuery ao passar o mouse
Estou tentando criar uma área de mapa do mouse em uma imagem que deve exibir uma caixa de diálogo quando o mouse terminar. O conteúdo da caixa de diálogo é diferente, dependendo da área em que está.
Meu script, na verdade, sempre mostra todas as caixas de diálogo.
Aqui está o jsFiddle que eu criei:http://jsfiddle.net/U6JGn/4/
e o 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" );
});
}
});
O que estou fazendo errado ?