0

これが私が得たものです...何らかの理由で、イメージマップのリンクをクリックすると、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>
4

2 に答える 2

2

わかりました...あとは、name="content" 属性を iframe に追加して、イメージ マップ リンクがそれをターゲットにできるようにするだけでした。

于 2013-07-22T05:58:17.847 に答える
0

area タグの target 属性を使用する代わりに、onclick ハンドラーを使用してみてください。

...
<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; }
于 2013-07-21T02:22:22.683 に答える