Question

我在下面有一个名为#fullInfo的html页面。我正在尝试做的是，当用户点击图像地图的某个区域时，它会将一些数据输入#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>

Answer 1

<script type="text/javascrtip">
$('area').click(function() {

更改为

<script type="text/javascript">
$('area').click(function(e) {
    e.preventDefault();

尝试通过.load加载图像时出现问题

1 个答案: