Dear All,

Firstly many tks for allowing us to raise a ticket.

I'm blocked on the following issue and would highly appreciate any help from you

I'm working on an interactive world map. I've created the below functions which allow me to display a div (which contains some css like background-color and absolute positionning) with some text and links retrieved via AJAX from a XML file.

The issue I'm facing is that on mouseovering the mapped area on my image, the code rightly recongnizes the mapped zone of my image and displays my div with y xml info, however while mouseovering (or mouseenter) the div itself, it bugs and loops in between my display and remove div actions...

here's my code

pls let me know should you need more info

many many thanks in advance

Gaby

JavaScript Document

jQuery

$(document).ready(function(){

1 jQuery AJAX function

console.log()

function writeText(myId){

$.ajax({

url: "xml/map.xml",

success: function(xml){

$(xml).find('#'+myId).each(function(){

var $this = $(this),

id = $this.attr('id'),

text = $this.attr('text'),

url = $this.attr('url');

coords = {

x : $this.attr('x')+"px",

y : $this.attr('y')+"px"

};

$("#mapdet").css({"left":coords.x,"top":coords.y}).html('<a href="'+url+'" id="'+id+'_link">'+text+'</a>');

});

}

});

}

//2 Display info boxes on mouseOver

/* javascript old function

function createDiv(posL, posT, myIdp) {

create parent class

myId= myIdp;

var mapdet = document.createElement("div");

mapdet.setAttribute("id", myId);

mapdet.className="mapdet";

link parent to document html

document.body.appendChild(mapdet);

document.getElementById(myId).style.left = posL + "px";

document.getElementById(myId).style.top = posT + "px";

call AJAX function declared before - at this point "myId" will be already created - to call a function, simplely call it as follows :-)

writeText(myId);

stop function before "destroyDiv" runs

//return;

}

*/

function createDiv (myId) {

$("#container_map").append('<div id="mapdet" />');

writeText(myId);

}

BUG TO BE WORKED OUT! the system bugs while mouseovering le created div and

doesn't alow the user to click on the link

$("area").each(function(){

var $this = $(this);

$this.on({

"mouseenter": function(){

createDiv ($this.attr("id"));

},

"mouseleave": function(){

$("#mapdet").remove();

}

});

});

});