Question

正如标题所示，我的HTML图像地图坐标出现问题。我是新手，我正在为我注册的大学课程建立一个网页。这是非常重要的我想出来的原因是因为我不想继续因为互联网上甚至没有被广泛使用的东西而被淘汰出局

我在我的大学项目网页上创建了五个与npr.org新闻文章相关的新闻链接。我使用他们页面中的图像作为我页面上的图像映射链接。我的每个标题都与npr.org文章相关联。

我的图片地图无法围绕我页面上的新闻文章图片。但是，我不知道如何正确定位网页上的坐标。如下所示，我只包含两个图像的坐标，但是当您点击第二个图像时，它会将您带到链接到第一个图像的文章。

我的老师告诉我，我可以使用Gimp查找每个图像的坐标但是如何使用Gimp找到网页本身的坐标。我使用在线图像映射生成器找到的每个图像的坐标根本不起作用。 AHHHHH！这对我来说没有意义，我真的很沮丧，我想开始拔头发了！

请有人帮助我！

- 图片地图HTML代码

    <div class="left">
        <section class="left">

            <h2 id="header_2">News</h2>
            <hr />
            <article class="news">
                <h3><a href="http://www.npr.org/sections/therecord/2015/08/19/432774407/a-rational-conversation-does-anybody-even-have-time-for-an-80-minute-album">A Rational Conversation: Does Anybody Even Have Time for an 80 minute Album?</a></h3>
                    <img src="http://media.npr.org/assets/img/2015/08/19/gettyimages-478840556-63f8a45a4271d0d9e6728e6689adab1fe218a2ee-s800-c85.jpg" style= "width: 45%" usemap="#newsmap" />
                <h3><a href="http://www.npr.org/sections/microphonecheck/2015/07/29/424717271/large-professor-part-1-were-living-in-the-world-of-hip-hop">Large Professor, Part 1: 'Were Living in the World of Hip-Hop'</a></h3>
                    <img src="http://media.npr.org/assets/img/2015/07/23/gettyimages-167826838_wide-46b6a9a598bfc3376df9c71f9a3cd281362c8319-s800-c85.jpg" style= "width: 45%" usemap="#newsmap" />
                <h3><a href="http://www.npr.org/2015/08/11/426758835/music-journalist-chronicles-the-wild-obsessive-hunt-for-rare-78-rpm-records">Music Journalist Chronicles The 'Wild Obessive Hunt for Rare 78 RPM Records'</a></h3>
                    <img src="http://media.npr.org/assets/img/2015/08/11/amanda-petrusich-author-photo-credit-to-bret-stetka-_wide-3c9fe52c75a15196fa3ed0781c6674d5813552b2-s400-c85.jpg" style="width: 45%" usemap="#newsmap" />
                <h3><a href="http://www.npr.org/sections/therecord/2015/06/03/411665500/12-essential-archives-for-internet-era-music-historians">12 Essential Archives for Internet-Era Music Historians</a></h3>
                    <img src="http://media.npr.org/assets/img/2015/06/03/2000_brick-c008578a10c9f60512fa3bf1c0a73ec3f33d4d3f-s800-c85.jpg" style="width: 45%" usemap="#newsmap" />
                <h3><a href="http://www.npr.org/2015/06/29/417426717/npr-musics-25-favorite-albums-of-2015-so-far">NPR Music's 25 Favorite Albums of 2015 (So Far)</a></h3>
                    <img src="http://media.npr.org/assets/img/2015/06/28/albumart_wide-30e77b7db33df7b858c8b3c50508bc60dca0e25c-s400-c85.jpg" style="width: 45%" usemap="#newsmap" />
            </article>

            <!-- Image map for news pictures.

            I had trouble finding the coordinates for each picture on my web page so I included the image maps to show that I new how to code them in. I left the coordinates in for the first two image maps, connected to the first two news pictures, to show that when you click on the second photo, it still sends you to the page from the first article. -->

            <map name="newsmap">
                <area shape="rect" coords="1, 0, 215, 159" style="outline: none" href="http://www.npr.org/sections/therecord/2015/08/19/432774407/a-rational-conversation-does-anybody-even-have-time-for-an-80-minute-album" />
                <area shape="circle" coords="109, 62, 10" style="outline: none" href="http://www.npr.org/sections/microphonecheck/2015/07/29/424717271/large-professor-part-1-were-living-in-the-world-of-hip-hop" />
                <area shape="rect" coords="" style="outline: none" href="http://www.npr.org/2015/08/11/426758835/music-journalist-chronicles-the-wild-obsessive-hunt-for-rare-78-rpm-records" />
                <area shape="circle" coords="" style="outline: none" href="http://www.npr.org/sections/therecord/2015/06/03/411665500/12-essential-archives-for-internet-era-music-historians" />
                <area shape="rect" coords="" style="outline: none" href="http://www.npr.org/2015/06/29/417426717/npr-musics-25-favorite-albums-of-2015-so-far" />
            </map>

        </section>
    </div>

Answer 1

查看您的代码，出现的问题是，您似乎有单独的图像文件，它们都引用相同的图像映射newsmap，但这不是图像映射的使用方式。

如果您已经拥有了您想要单独拍摄的单个图像，并且每个图像都适合该单个图像，那么您也可以将img的每次使用都包含在超链接中{{ 1}}在此模式中：a，下一个图像可能是<a href="http://link1"><img src="image1.jpg" /></a>等，没有理由在单独的单独图像文件上使用HTML图像映射功能。

图像映射是您希望拥有单个图像文件的场景，而不是上面必须使用单独的图像文件，您只想拍摄单个图像文件，并定义可点击区域，以便用户可以单击某个区域并转到为该区域定义的URL。

首先，虽然我可以回答您关于如何执行任何操作的技术问题，但如果您执行了错误的解决方案，您仍然可能无法完成任务。你的老师实际要求的是什么？例如：

学生要创建一个网页并演示他们可以使用多个图像将图像链接到不同的页面

或

学生将创建一个网页，并证明他们知道如何通过图像地图功能拍摄单个图像并定义可点击区域

你必须确定你的任务实际上是什么。

如果作业是图像地图，那么它是有道理的：

我的老师告诉我，我可以使用Gimp查找每个图像的坐标，但是如何使用Gimp找到网页本身的坐标。

不，图像地图不是关于使用网页本身的坐标，而是图像本身的坐标，因此您将使用GIMP。

虽然您的文档没有指定文档类型，但浏览器可能会将您的页面解释为pre-html5，但无论是html4还是html5，图像地图坐标永远不会是整个网页，而是相对于顶层留下您的实际图像。

html4规范：

http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1

坐标相对于对象的左上角。所有值都是长度。所有值都以逗号分隔。

html5规范：

http://www.w3.org/TR/html5/embedded-content-0.html#the-area-element

在矩形状态中，区域元素必须具有恰好四个整数的coords属性，第一个必须小于第三个，第二个必须小于第四个。这四个点必须分别表示从图像左边缘到矩形左边的距离，从顶边到顶边的距离，从左边到右边的距离，以及从顶边到底边的距离，都是CSS像素。

虽然我使用旧版本的GIMP，从2013年开始的2.8.2，它应该仍然是相同的，无论光标在哪里，屏幕的左下角状态栏都表示图像坐标，它始终是正如您需要的那样，在左上方<a href="http://link2"><img src="image2.jpg" /></a>，获取用于html图像映射代码的坐标。

但是当您点击第二张图片时，它会转到链接到第一张图片的文章。

由于：

您有第一张图片说＆＃34;我的图片地图由0,0＆＃34;定义。
然后第二张图片也说了我，＆＃34;我的图片地图由newsmap＆＃34;定义。
但图像地图功能从未意味着多个图像共享相同的图像映射定义
因此图像地图newsmap定义了几个区域。左上角区域转到newsmap页。
所以当点击第一张图片的左上角时，它会引用80-minute-album并识别哦，点击此处就意味着转到newsmap页面
但是点击了第二张图片的左上角，因为它也引用了80-minute-album，它只是认为哦，左上角意味着转到newsmap页面。
这样，为什么第一张和第二张图片会出现在同一页面上

要重新解决此问题，您必须仔细检查教师的说明。

如果老师真的只想要使用多个单独图像进行最合理的导航，我建议按照前面的建议将各个图像包装在自己的链接中。

但是，如果您确定要制作图像地图，那么您需要首先找出要使用的大单图像，然后定义图像地图及其可点击区域。

HTML图像地图坐标问题

1 个答案: