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>
