HTML通过单击图像的一部分跳转到另一个页面的某个部分[关闭]答案

【问题标题】：HTML Jump to certain part of another page by clicking on a part of an image [closed]HTML通过单击图像的一部分跳转到另一个页面的某个部分[关闭]
【发布时间】：2015-12-18 06:59:03
【问题描述】：

好的，所以我刚开始为学校做 HTML/CSS/PHP。我通过添加一张图片（在 Photoshop 中制作）并将其放入图像地图中制作了一个网页。我有 2 个按钮，它们都是可点击的，需要重定向到另一个页面。我所有的网页都只包含一张图片。现在我的问题是，当单击其中一个按钮时，如何跳转到另一个页面并到达该图像的底部（页面底部）？（如果我点击其中一个按钮，它会自动在顶部加载下一页）

希望你们中的一个可以在这里帮助我！

编辑：

添加来自 cmets 的图像，因为它们包含代码：

和

【问题讨论】：

我们需要查看您的代码！
我赞同克里斯所说的。
这是我的第一页 HTML 代码：prntscr.com/9ffwiq 这是第二页（需要链接的那个）：prntscr.com/9ffx6w 所有的 img 名称和 cmets 等都是荷兰语，所以如果你想知道某件事是什么意思，就问我。
我会说...不要制作这样的网页。您应该使用 HTML 和 CSS（必要时使用 JavaScript），而不是完全依赖图像映射。

标签： html image href

【解决方案1】：

您必须在该图像下方添加一个带有 id 的元素，然后将该 id 添加到链接中。

这是链接：

<a href="otherpage.html#bottom">Link to image</a>

这是另一页：

<img src="img/yourimage.png" /><div id="bottom"></div>

【讨论】：

哦，好的，谢谢！我要试试。我会告诉你它是否有效。
请注意，这仅在您的内容大于浏览器窗口时才有效，否则显然没有什么可以滚动的。如果是这种情况，您将不得不添加更多空间 - 尽管我会尽量避免这种情况，因为您希望您的网站尽可能动态。
我需要在 CSS 中将该 div 定位到我其他页面的底部吗？
想通了！刚刚做了边界 0 左 0 并将其定位到相对位置。谢谢！让我摆脱了一些压力

【解决方案2】：

在您的图片下，只需添加一个具有 id 属性的元素并在按钮 url 中添加一个锚点。

Page1.php：

<a href="page2.php#image-bottom">Go to bottom</a>

Page2.php：

<img src="image.png" alt="image">
<span id="image-bottom"></span>

【讨论】：

【解决方案3】：

如果我对您的理解正确，您希望您的链接转到特定的向下滚动目标页面。因此，不要加载 target.html 并位于页面顶部您希望位于页面下方的某个位置。或有一些较低的含量加载时位于屏幕顶部。

在starting_page.html中，您的链接目前看起来像这样

 <a href='target_page.html'>click here</a>

改成

 <a href='target_page.html#Position_1_on_page'>click here</a>

然后编辑你的 target_page.html 并放入

 <div id='Position_1_on_page'></div>

现在当有人点击该链接时，它将加载 target_page.html 并滚动将其向下，以便名为 Position_1_on_page 的 div 将成为最顶部的元素加载后在页面上显示

【讨论】：