I have an html page below with a section called #fullInfo. What i’m trying to do is have it so that when a user clicks a area of an image map, it will pull in some data into the #fullInfo div.
I was trying to follow this tutorial http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/.
The problem that i’m having though is that when you click an area of the image map, it just takes you directly to the url rather than loading it in the #fullInfo div.
Any ideas what i’m doing wrong?
Here’s my html page:
<!DOCTYPE HTML>
<html>
<head>
<style>
#content {
width: 960px;
margin: 0 auto;
background: #c7c7c7;
border: solid 1px #dcdcdc;
overflow: hidden;
}
#main {
width: 484px;
float: left;
}
#sidebar {
width: 400px;
float: left;
background: #e7e7e7;
overflow: hidden;
}
#sidebar img {
width: 200px;
height: 200px;
}
#info {
}
#load {
display: none;
position: absolute;
rightright: 10px;
top: 10px;
background-color: red;
width: 43px;
height: 11px;
text-indent: -9999em;
}
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script type="text/javascript">
$(document).ready(function() {
$('area').click(function() {
var toLoad = $(this).attr('href');
console.log('toLoad = '+toLoad);
$('#fullInfo').hide('fast', loadContent);
$('#load').remove();
$('#main').append('<span id="load">Loading...</span>');
$('#load').fadeIn('normal');
function loadContent() {
$('#fullInfo').load(toLoad, '', showNewContent());
}
function showNewContent() {
$('#fullInfo').show('normal', hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false; // used so the link does take you to a new page
});
});
</script>
</head>
<body>
<div id="content">
<div id="main">
<!-- <img src=floorPlan.jpg /> -->
<div style="text-align:center; width:484px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_4201110211433362" src="http://www.image-maps.com/uploaded_files/4201110211433362_floorPlan.jpg" usemap="#Image-Maps_4201110211433362" border="0" width="484" height="480" alt="" />
<map id="_Image-Maps_4201110211433362" name="Image-Maps_4201110211433362">
<area shape="rect" id="1" coords="68,35,139,85" href="http://www.google.com/logos/2011/mary_blair-2011-hp.jpg" alt="Meeting Room 200" title="Meeting Room 200" />
</map>
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:484px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/" title="Meeting Room 200">Meeting Room 200</a>
|
</div>
<!-- Image map text links - End - -->
</div>
</div>
<div id="sidebar">
<div id="fullInfo">
<img src="floorPlan.jpg" />
<div id="info">
<h3>Some text here</h3>
<p>This is a paragraph about something or other here</p>
<p><a href="http://google.com title=Google">This here our link text</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
change to