imagemap 相关问题

图像映射是与特定图像相关的坐标列表,其被创建以便将图像的区域超链接到各个目的地。图像映射的目的是提供一种链接图像的各个部分的简单方法,而无需将图像分成单独的图像文件。

动态调整图像映射和图像的大小

我目前正在尝试在我的网站上制作一个图像地图,它将根据窗口的大小调整大小...我想知道是否有办法用 HTML 来做到这一点,或者我必须用

回答 13 投票 0

响应式图像地图插件不起作用

我在使用 Matt Stows jQuery 插件创建响应式图像地图时遇到一些问题。我遵循了所有建议,但图像映射仍然没有响应。我希望你能帮忙。这些是

回答 3 投票 0

使用html图像映射播放音频而无需进入新网页

我正在制作一个图像地图,该图像地图上的每个按钮都使用游戏音效 。然而,每次我按下图像地图位置来播放声音效果时,总是会导致我去

回答 1 投票 0

有理由使用图像映射而不是<svg>吗? [已关闭]

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 体验。 希望这个答案对你有帮助:)

回答 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 体验。 希望这个答案对你有帮助:)

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 3 投票 0

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

我使用 gimp 生成了这个图像映射,当我将代码添加到我的网站时,它就像根本没有链接一样。这可能发生的任何原因。 我使用 gimp 生成了这个图像映射,当我将代码添加到我的网站时,它就像根本没有链接一样。这可能发生的任何原因。 <img src="images/footerlinks.jpg" width="175" height="66" border="0" usemap="#map"/> <map name="map"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:David --> <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 为映射图像创建的代码不起作用。

回答 2 投票 0

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

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

回答 0 投票 0

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

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

回答 1 投票 0

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

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

回答 0 投票 0

无法在Java Swing中映射图像

我有一个名为ImageMapDemo7的类 我想用这个程序来映射一个图像 但我得到一个错误的信息。我有所有的包。JFreeChart中到底有没有SampleXYDataset2类?...

回答 1 投票 1

Image Map在Firefox中不起作用!在Chrome + Safari中可以正常工作

我制作了一个图像地图,它在Firefox中不起作用。在Chrome和Safari中都可以正常运行。这是网站bryanedwardcollins.com,请帮助! [

回答 2 投票 14

是否可以编辑现有的元素?

必须有一种方法来编辑html文件中的现有。有关创建新地图的很多内容。但是如何编辑html文件中的现有地图呢?有没有...

回答 1 投票 0

我需要在图像映射选定区域上添加文本,

我已经通过https://www.image-map.net/创建了图像映射代码。但是我想将座位号显示为所选座席上的文本,以便用户可以理解并单击给定的...

回答 1 投票 0

为什么一个jsfiddle有效,而另一个jsfiddle却具有完全相同的代码?

我正在尝试创建一个地图,其每个小节都在悬停时突出显示。研究后告诉我的最好方法是使用显然起作用的imagemapster,因此第一个...

回答 1 投票 0

如何使用jQuery UI获取可拖动和可调整大小的元素的坐标

我想为响应图像映射生成多个坐标(左,上,宽,高)。在管理界面中,可以在图像上创建,移动和调整大小的矩形。我可以多个...

回答 1 投票 0

在窗口调整大小时调整图像映射的大小

我正在尝试在窗口调整大小事件中调整图像映射的大小。我得到的最接近的是使用mouseclick事件,但是它需要根据我的工作调整窗口大小。我正在使用Firefox 3.5.5,正在使用...

回答 7 投票 6

放大地图图像,并突出显示部分

我必须为要创建的网站的图片做四件事。您应该能够放大和缩小图像。将鼠标悬停在图像的特定部分时,应突出显示该部分。当...

回答 2 投票 2

在javascript(jQuery)中单击图像地图区域时删除关联的图像

我创建了一个简单的“打地鼠”游戏,其中同一图像在游戏空间中随机且随机地出现在游戏空间中,如果您单击该图像,该图像就会消失,这没有问题。为了使游戏更加...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.