I'm trying to return text from a .txt file using ajax
- by saad
I'm trying to get my first ajax script to work. The five images are all side by side. Whenever the user hovers the mouse over any of them, it sends a request to a .txt file on the server and the caption is displayed in the div#image_caption.
The problem is, even when I mouse over the image, the caption does not display. I'm not quite sure what could be causing this.
Here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#images{overflow: auto;}
img{float: left;
width: 200px;
height: 200px;
margin-right: 15px;}
div#image_caption {width: 1040px;
height: 300px;
margin-top: 30px;
border: 2px black solid;}
</style>
<script type="text/javascript" src ="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function show_caption(url) { //shows the caption once the mouse hovers over the image
var asyncreq;
if(window.XMLHttpRequest) { //IE 7+ and other browsers
asyncreq = new XMLHttpRequest(); //define the request
} else { //for IE 7-
asyncreq = new ActiveXObject("Microsoft.XMLHTTP");
}
asyncreq.open("GET", url, true); //give it properties
asyncreq.send(); //send the request to the server
asyncreq.onreadystatechange = function() {
if(asyncreq.readyState == 4 && asyncreq.status == 200) {
$("div#image_caption").html(asyncreq.responseText); //add the caption (response text from the file) to the box
}
}
} //end of show_caption(url)
function hide_caption() { //hides the caption once the mouse is gone
$("div#image_caption").html("");
}
});
</script>
</head>
<body>
<h1>Hover over an image for more information.</h1>
<div id = "images">
<img src="images/backg.jpg" mouseover = 'show_caption("backg_caption.txt");' mouseout = 'hide_caption();'/>
<img src="images/Desert.jpg"mouseover = 'show_caption("Desert_caption.txt");' mouseout = 'hide_caption();'/>
<img src="images/Penguins.jpg" mouseover = 'show_caption("Penguins_caption.txt");' mouseout = 'hide_caption();'/>
<img src="images/Tulips.jpg" mouseover = 'show_caption("Tulips_caption.txt");' mouseout = 'hide_caption();'/>
<img src="images/odji1.jpg" mouseover = 'show_caption("Desert_caption.txt");' mouseout = 'hide_caption();'/>
</div>
<div id = "image_caption">
</div>
</body>
</html>
