<html>
<head>
<script language="javascript">
var images=new Array();
var urls=new Array();
var texts=new Array();
var index=0;
function sendHttpRequest(url,callbackFunc,respXml){
var xmlobj=null;
try{
xmlobj=new XMLHttpRequest();
}
catch(e){
try{
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert('AJAX is not supported by your browser!');
return false;
}
}
xmlobj.onreadystatechange=function(){
// if(xmlobj.readyState==4){
// if(xmlobj.status==200){alert(callbackFunc);
respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval(callbackFunc+'(xmlobj.responseText)');
// }
//}
}
xmlobj.open('GET',url,true);
xmlobj.setRequestHeader('Content-Type','text/xml; charset=UTF-8');
xmlobj.send(null);
}
function storedatas(datas){
var datas=datas.getElementsByTagName('data');
for(var i=0;i<datas.length;i++){
images[i]=datas[i].getElementsByTagName('image')[0].firstChild.nodeValue;
urls[i]=datas[i].getElementsByTagName('url')[0].firstChild.nodeValue;
texts[i]=datas[i].getElementsByTagName('text')[0].firstChild.nodeValue;
}
displaydata();
}
function displaydata(){
var headcont=document.getElementById('rkdatascontainer');
if(!headcont){return};
headcont.innerHTML='';
var img=document.createElement('img');
img.setAttribute('src',images[index]);img.setAttribute('width',"300");img.setAttribute('height',"300");
var a=document.createElement('a');
a.setAttribute('href',urls[index]);
a.setAttribute('title','Click here to read the full article');
p=document.createElement('p');
a.appendChild(p);
p.appendChild(document.createTextNode(texts[index]));
headcont.appendChild(a);
headcont.appendChild(img);
}
function initializeNavigationPanel(){
document.getElementsByTagName('img')[0].onclick=function(){
index--;
if(index<0){index=0};
displaydata();
}
document.getElementsByTagName('img')[1].onclick=function(){
index++;
if(index>urls.length-1){index=urls.length-1};
displaydata();
}
}
window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName || !document.createElement){return;}
if(!document.getElementById('rkdatascontainer')){return;}
if(!document.getElementsByTagName('img')){return;}
if(document.getElementById&&document.getElementsByTagName&&document.createElement){
initializeNavigationPanel();
sendHttpRequest('source.xml','storedatas',true);
}
}
</script>
<style type="text/css">
#rkdatascontainer{
text-align: center;
width: 500px;
height: 400px;
margin-left: auto;
margin-right: auto;
background: #eee url(bg1.jpg) top center repeat-x;
border: 1px solid #a1a2ad;
}
#rkdatascontainer img{
border: 1px solid #666;
}
#rkcontrolpanel{
text-align: center;
width: 400px;
height: 30px;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<H3>Flip book</H3>
<div id="rkdatascontainer"></div>
<div id="rkcontrolpanel">
<img src="img/previous.gif" width="35â³ height="42â³ />
<img src="img/next.gif" width="35â³ height="42â³ />
</div>
</body>
</html>