The goal is to load text from a file (located on the same server in the same folder) into a div on the web page, when clicked on a map area on an image. I have stripped it down to a minimum to rule out as much as possible. It works in Chrome, but unfortunately I need to support Internet Explorer 9 as well.
This is the "main page" with the div that is supposed to be loaded with text:
- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Whatever</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
- <script type="text/javascript">
$(document).ready(function(e) {
$(".alalal").click(function() {
$("#leftNav")
.load($(this).attr('id') + '.htm?' + new Date().getTime())
.show()
});
return false;
});
</script>
</head>
- <body>
<div id="container">
<div id="leftNav">Update this text when clicked on image area</div>
<div id="mainContent" class="calculated-width-main"><img src="1B6BA957-F936-4323-8BAE-F34573456D72.png" usemap="#diagram-map"/></div>
<map name="diagram-map">
<area class="alalal" title="Whatever" shape="rect" coords="76,350,362,452" id="text" />
</map>
</div>
</body>
</html>
This is the file with the text:
- <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Whatever title</title>
</head>
<body>
<div class="classInformation">
Text to be shown
</div>
</body>
</html>