尝试通过 .load 加载图像时出现问题
我下面有一个 html 页面，其中有一个名为 #fullInfo 的部分。我想做的是拥有它，以便当用户单击图像映射的区域时，它会将一些数据拉入#fullInfo div。
我试图按照本教程http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/。
我遇到的问题是，当您单击图像映射的某个区域时，它只会将您直接带到 url，而不是将其加载到 #fullInfo div 中。
有什么想法我做错了吗？
这是我的 html 页面：
<!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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
更改为
change to