Question

这就是我得到的...出于某种原因，当我点击图片地图链接时，他们打开了iframe外面的页面（就像它打开了它自己的页面一样）

我搞砸了几个小时，经历了大约20页，但没有一个专门处理图像地图链接，也没有人帮助过。

实时链接在这里，我正在使用firefox。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Penumbra Productions</title>
    <script src="Scripts/jquery-1.10.2.js" type="text/javascript">
    </script>

    <script type="text/javascript">

        $(document).ready(function () {
            $("#dropshadow").hide();

            setTimeout(function () {
                $("#dropshadow").fadeIn(1000)
            }, 1500);
        });
    </script>

    <link href="CSS/Penprocss.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        body {
            background-color: #CCC;
        }
    </style>
</head>

<body>
<div id="dropshadow">
    <div id="wrapper">
        <div id="header">
            <a href="Index.html">
                <img src="Images/PenproFull.jpg"
                     width="309" height="199"
                     alt="Penumbra Productions"
                     longdesc="http://penumbra-productions.com/Index.html"/>
            </a>
            <br/>
        </div>
        <div id="navigation">
            <img src="Images/Navigation.jpg" width="1200" height="50" border="0" usemap="#Map"/>
            <map name="Map" id="Map">
                <area shape="photography" coords="29,5,252,43" href="photo.html" target="content"/>
                <area shape="videography" coords="319,6,516,43" href="video.html" target="content"/>
                <area shape="portfolio" coords="572,9,761,44" href="port.html" target="content"/>
                <area shape="contact" coords="801,9,981,42" href="contact.html" target="content"/>
                <area shape="about" coords="1020,9,1185,43" href="about.html" target="content"/>
            </map>
        </div>

        <iframe id="content" src="main.html" width="1200" height="620" frameborder="0"></iframe>

        <div id="footer"></div>
    </div>
</div>
</body>
</html>

Answer 1

好的......所有需要发生的事情就是将name =“content”属性添加到iframe中，以便图像映射链接可以定位它

Answer 2

尝试使用onclick处理程序，而不是使用区域标记的target属性。

...
<area shape="contact" coords="801,9,981,42" href="#" onclick="loadNow('contact.html')" />
<area shape="about" coords="1020,9,1185,43"  href="#" onclick="loadNow('about.html')  />
...
function loadNow(url) { document.getElementById('content').src=url; }

在图像地图锚点打开自己的页面中定位iframe

2 个答案: