okay firstly, a thank you is very much in order :D :WAVE:
now I have a new problem. Ajax iswiping out my HTML in the body element of my page aaargh. below is my code which I made before my knowledge of the CDATA thing :p
<html>
<head>
<title>Ajax Example Page 2a</title>
<script type="text/javascript">
var url = 'beacon.xml';
var imgurl = '846.jpg'; // url to the image
var maximgw = 2453; // native width of the image
var maximgh = 1451; // native height of the image
var smlimgw = screen.width - 224;
var scaleratio = maximgw / smlimgw;
var smlimgh = maximgh / scaleratio; // needed to find common ration between numbers so resize in browser is possible
var xmlhttp
xmlhttp=null
// code for Mozilla, etc.
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest()
}
// code for IE
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
if (xmlhttp!=null){
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
}
else{
alert("Your browser does not support XMLHTTP.")
}
function tooltip(i){
document.getElementById('tool_'+i).style.visibility = 'visible';
}
function tooltip_hide(i){
document.getElementById('tool_'+i).style.visibility = 'hidden';
}
function checkReadyState(obj){
if(obj.readyState == 4){
if(obj.status == 200){
return true;
}
else{
alert("Problem retrieving XML data");
}
}
}
function onResponse(){
if(checkReadyState(xmlhttp)){
var response = xmlhttp.responseXML.documentElement;
var txt = "\n";
x=response.getElementsByTagName("hotspot")
for (i=0;i<x.length;i++){
var imz = 500+i;
var ttz = 5000+i
var topoff = parseInt(x[i].getAttribute("y"), 10) / scaleratio;
var leftoff = parseInt(x[i].getAttribute("x"), 10) / scaleratio;
txt=txt + '<img onmouseover="javascript:tooltip('+i+');" src="./images/dot.gif" width="5" height="5" style="z-index: '+imz+'; '+
'position: absolute; top: '+topoff+'; left: '+leftoff+';">\n';
txt=txt + '<div id="tool_'+i+'" style="z-index: '+ttz+'; position: absolute; top: '+topoff+'; left: '+leftoff+'; visibility: hidden;">';
txt=txt + x[i].getAttribute("price") + "<br />\n"
txt=txt + x[i].getAttribute("url") + "<br />\n"
var para1data = "<" + x[i].firstChild.firstChild.tagName + " color='" + x[i].firstChild.firstChild.getAttribute("color") + "'>" + x[i].firstChild.firstChild.text + "<" + x[i].firstChild.firstChild.tagName + ">"
txt=txt + "<" + x[i].firstChild.tagName + ">" + para1data + "<" + x[i].firstChild.tagName + ">\n"
var para2tag = x[i].childNodes[1].firstChild.tagName
var para2tagdata = x[i].childNodes[1].text
// para2tagdata = string.replace("Max:", "", paratag2data)
var para2data = "<" + para2tag + ">" + x[i].childNodes[1].firstChild.text + "</" + para2tag + ">" + para2tagdata
txt=txt + "<" + x[i].firstChild.tagName + ">" + para2data + "<" + x[i].firstChild.tagName + ">\n"
var para3tag = x[i].childNodes[2].firstChild.tagName
var para3tagdata = x[i].childNodes[2].text
//.replace("Price:", "")
var para3data = "<" + para3tag + ">" + x[i].childNodes[2].firstChild.text + "</" + para3tag + ">" + para3tagdata
txt=txt + "<" + x[i].firstChild.tagName + ">" + para3data + "<" + x[i].firstChild.tagName + ">\n"
txt=txt + '<a href="javascript:tooltip_hide('+i+');">Hide</a>\n';
txt=txt + "</div>\n"
}
txt=txt + ' <img src="./images/846.jpg" width="'+smlimgw+'" height="'+smlimgh+'" style="visibility: visible;" />\n';
document.getElementById('dynamicwrite').innerHTML = txt;
}
}
</script>
</head>
<body>
<center>
<div id="dynamicwrite">
</div>
</center>
</body>
</html>
This will easily be good enough for my teacher as he is one of those people in life that settle for second best however I would like to be better than that so, if anybody has the time, will or kindness to point out what i'm doing wrong i'll be ur best buddy forever