imagemap 相关问题

Image-map.net 用于生成如下代码： Image-map.net 用于生成如下代码： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2250 1650"> <image id="park" width="2250" height="1650" xlink:href="/assets/images/park.png"></image> <a xlink:href="tree.com"> <rect x="902" y="478" fill="#fff" opacity="0" width="564" height="336"></rect> </a> 但现在我明白了： <img src="/assets/images/park.png" usemap="#image-map"> <map name="image-map"> <area target="" alt="Dogwood tree" title="Tree" href="tree.com" coords="308,1723,121" shape="circle"> <map>和<area>比<svg>有好处吗？据我所知，这是降级。图像地图的使用对于某些网站来说传统上是有效的，特别是那些涉及地理元素或强烈视觉导航主题的网站。但是，使用图像地图也有缺点：创建和修改的复杂性：在图像地图上绘制热点的过程可能非常耗时，而且一旦创建，修改可能具有挑战性。缺乏响应能力：传统的图像地图无法响应响应。重新缩放图像不会调整图像贴图坐标，导致调整大小时热点与图像之间未对齐。另一方面，使用 SVG 具有以下几个优点：可扩展性：SVG 由定义形状、直线和曲线的数学方程组成，可以缩放到任何尺寸而不损失质量，这使其成为响应式设计和高分辨率显示的理想选择。可编辑性：SVG 文件是 XML 文档，因此可以使用任何文本编辑器轻松编辑，从而简化设计过程。支持交互性和动画：SVG 可以集成 JavaScript 和 CSS，从而能够创建复杂的动画和交互元素。可访问性和 SEO 优化：SVG 基于文本，很容易被搜索引擎索引并可由屏幕阅读器读取，从而增强了内容的可访问性和可搜索性。提高 Web 性能：将 SVG 直接嵌入到 HTML 文档中可以减少 HTTP 请求，从而缩短页面加载时间。此外，可以压缩 SVG 以优化 Web 性能。可定制性：SVG 通过 JavaScript 和 CSS 提供广泛的定制选项，促进动态和交互式 Web 体验。希望这个答案对你有帮助:)

html svg github-pages imagemap xlink

回答 1 投票 0

使用 <map><area> 与 <svg><a xlink:> 相比，图像地图有什么好处？

Image-map.net 用于生成如下代码： Image-map.net 用于生成如下代码： <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2250 1650"> <image id="park" width="2250" height="1650" xlink:href="/assets/images/park.png"></image> <a xlink:href="tree.com"> <rect x="902" y="478" fill="#fff" opacity="0" width="564" height="336"></rect> </a> 但现在我明白了： <img src="/assets/images/park.png" usemap="#image-map"> <map name="image-map"> <area target="" alt="Dogwood tree" title="Tree" href="tree.com" coords="308,1723,121" shape="circle"> 据我所知，使用 <map> 和 <area> 方法，图像映射不可可缩放，但似乎可以使用 svg 和 <a xlink:> 方法进行缩放。使用 <area> 的 title 属性会在悬停时产生弹出文本，这似乎不适用于 <a xlink:>。似乎没有用于 <svg> 和 <a xlink:> 方法的在线生成器。这些假设是否正确，或者它们以不同的方式共享所有相同的好处？图像地图的使用对于某些网站来说传统上是有效的，特别是那些涉及地理元素或强烈视觉导航主题的网站。但是，使用图像地图也有缺点：创建和修改的复杂性：在图像地图上绘制热点的过程可能非常耗时，而且一旦创建，修改可能具有挑战性。缺乏响应能力：传统的图像地图无法响应响应。重新缩放图像不会调整图像贴图坐标，导致调整大小时热点与图像之间未对齐。另一方面，使用 SVG 具有以下几个优点：可扩展性：SVG 由定义形状、直线和曲线的数学方程组成，可以缩放到任何尺寸而不损失质量，这使其成为响应式设计和高分辨率显示的理想选择。可编辑性：SVG 文件是 XML 文档，因此可以使用任何文本编辑器轻松编辑，从而简化设计过程。支持交互性和动画：SVG 可以集成 JavaScript 和 CSS，从而能够创建复杂的动画和交互元素。可访问性和 SEO 优化：SVG 基于文本，很容易被搜索引擎索引并可由屏幕阅读器读取，从而增强了内容的可访问性和可搜索性。提高 Web 性能：将 SVG 直接嵌入到 HTML 文档中可以减少 HTTP 请求，从而缩短页面加载时间。此外，可以压缩 SVG 以优化 Web 性能。可定制性：SVG 通过 JavaScript 和 CSS 提供广泛的定制选项，促进动态和交互式 Web 体验。希望这个答案对你有帮助:)

html svg github-pages imagemap xlink

回答 1 投票 0

如何在ImageView上定义一些可点击的区域（如HTML图像地图）

假设我有一个显示学校地图的 ImageView：我想在图像上定义一些可点击区域（例如 HTML 图像映射），如下所示：点 musicRoom = new Point(30,70); 点

android imageview imagemap

回答 1 投票 0

使用图片热点可以吗？这是当今世界最好的方法吗？

我有一张图片需要分成4份，每个部分必须有一个链接。人们还在使用图像热点吗？

html css imagemap

回答 3 投票 0

从 gimp 生成的图像映射不起作用

我使用 gimp 生成了这个图像映射，当我将代码添加到我的网站时，它就像根本没有链接一样。这可能发生的任何原因。我使用 gimp 生成了这个图像映射，当我将代码添加到我的网站时，它就像根本没有链接一样。这可能发生的任何原因。 <img src="images/footerlinks.jpg" width="175" height="66" border="0" usemap="#map"/> <map name="map">      <area shape="rect" coords="32,72,239,415" nohref="nohref" /></area> <area shape="rect" coords="393,320,483,336" href="http://www.dance-mate.com/details.html" /></area> </map> 您定义的 areas 在图像边界之外（图像高 66 像素，第一个链接的顶部为 72 像素，第二个链接为 320 像素）。矩形中点的顺序是left, top, right, bottom）。您是否缩小了图像，或者 Gimp 是否真的在图像边界之外生成了这些区域？此外，area 是一个无效元素（自关闭），nohref 无效并确保将 alt 属性添加到链接和图像（图像在 HTML 中大小为 7x，以便您可以看到链接): <img src="images/footerlinks.jpg" width="1225" height="462" alt="foo" usemap="#map"/> <map name="map"> <area shape="rect" coords="32,72,239,415" href="#bar" alt="bar" /> <area shape="rect" coords="393,320,483,336" href="#baz" alt="baz" /> </map> 我在 gimp 上也有同样的经历，gimp 为映射图像创建的代码不起作用。

html image imagemap

回答 2 投票 0

图像作为链接图 - 悬停以显示文本（工具提示），单击以更改/更新 div 内容 - 完全迷失在这里

首先，我是 HTML / CSS 的初学者，但通常可以处理一些事情，但困难的部分是在涉及 JS 或 jQuery 时开始。我正在为我自己的网站做一些事情。这个想法很简单......

javascript html jquery tooltip imagemap

回答 0 投票 0

如何使用：将鼠标悬停在图像映射区域上以显示新图像？

我是 HTML 和 CSS 的新手，我正在尝试制作一个包含不同图像的图像地图，这些图像会在您将鼠标悬停在特定区域上时显示。我看过几个例子，但没有什么效果，

html jquery css imagemap

回答 1 投票 0

如何制作鼠标悬停时突出显示的响应式图像映射？

当鼠标悬停在图像的特定部分时，我需要制作带有突出显示的响应式图像映射。是否可以仅使用 JavaScript、html 和 CSS 来完成（以及如何）？我在这里找到了一些线索但是......