FSS FSS - 4 months ago 14
HTML Question

html div overlay for a beginner

For each line of text I read in, I would like to make something like this:

<div style id="overlayr3"> some-name </div>


so that my example works like this one (http://jsfiddle.net/jsnga/) where the overlay is associated to the id number.

Here is the relevant bit of what I have so far: any help is much appreciated!

var xhr = new XMLHttpRequest();
xhr.open("GET", "coords1.txt", true);
xhr.onload = function(e) {
if(this.status == 200) {
// get text contents

var coords = xhr.responseText.split("\n");
coords = coords.filter(Boolean) //prevents extra rect with 0 coords
coords.forEach(function(coord) {
// create new area element
var area = document.createElement("area");
area.id = "r3";

//create overlay with first term in string
var div = document.createElement("div");
div.id ="overlayr3";

// get map element
document.getElementById("demo").appendChild(area);
document.getElementById("demo").appendChild(div);
});
}
};


From here, I do:

if($('#demo')) {
$('#demo area').each(function() {
var id = $(this).attr('id');
$(this).mouseenter(function() {
$('#overlay'+id).show();
});

$(this).mouseout(function() {
var id = $(this).attr('id');
$('#overlay'+id).hide();
});

});
}


xhr.send();

});


I add here a manual example that works (without reading in from a text file):

<map name="demo" id="demo">
<area shape="rect" coords="794,359,905,318" href="#" id="r1" alt="r1">

</map>

<div style id="overlayr1"> cscCSL1A15 </div>


<script type="text/javascript">
$(document).ready(function(){


if($('#demo')) {
$('#demo area').each(function() {
var id = $(this).attr('id');
$(this).mouseenter(function() {
$('#overlay'+id).show();
});

$(this).mouseout(function() {
var id = $(this).attr('id');
$('#overlay'+id).hide();
});

});
}
$('#overlayr1').hide();
});

</script>

Answer
i=0;
coords.forEach(function(coord) { 
 // create new area element
 var area =     document.createElement("area");
 area.id = "r"+i; 
 area.innerHtml=content;
 //increase i
 i++;

//create overlay with first term in string
 var div = document.createElement("div");
 div.id ="overlayr"+i; 
// get map element.    document.getElementById("demo").appendChild(area);     document.getElementById("demo").appendChild(div); });