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

【问题标题】：Targeting iframe in image map anchor opening own page在打开自己的页面的图像地图锚点中定位 iframe
【发布时间】：2013-07-20 22:02:48
【问题描述】：

这就是我得到的...由于某种原因，当我单击图像地图链接时，它们会在 iframe 之外打开页面（因为它会作为自己的页面打开）

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

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

http://www.penumbra-productions.com

<!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>

【问题讨论】：

标签： firefox iframe target imagemap

【解决方案1】：

好的...所需要做的就是将 name="content" 属性添加到 iframe，以便图像映射链接可以定位它

【讨论】：

【解决方案2】：

尝试使用 onclick 处理程序，而不是使用 area 标记的 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; }

【讨论】：

我明白其中的逻辑......但是为什么它不能像从 o.O 开始的那样工作？
好的...所要做的就是将 name="content" 属性添加到 iframe，以便图像地图链接可以定位它