比如用 ChartFX 生成的png饼图,要求点击饼图不同区块的时候弹出不同的窗口或触发不同的事件。
Chart chart1 = new ChartServer(getServlet().getServletContext(), request, response);
...
chart1.getPoint(0,0).getLink().setUrl("popup.do?id=123");
chart1.getPoint(0,1).getLink().setUrl("popup.do?id=456");
chart1.getPoint(0,2).getLink().setUrl("popup.do?id=789");
...
String htmlImgTag = chart1.getHtmlTag("395","275");
将生成的htmlImgTag在jsp中打出来就可以了。一般内容类似下面
<IMG SRC=".....03332812B14.png" WIDTH="395" HEIGHT="275" usemap="#Chart1">
可以看到这里使用了 usemap="#Chart1" 这个map是在哪里输出的?
查看输出的html,确实有个 <map name="Chart1">
这个自动打印出来的map,可能是因为使用new ChartServer(servletContext, request, response);创建的Chart对象,由这个Chart对象自动输出到response里的。
http://softwarefx.com/SFXJavaProducts/CFXforJava/
分享到:
相关推荐
通过使用`<img>`、`<map>`和`<area>`标签,可以轻松地为图像添加热点区域,从而实现更加丰富的交互式设计。这种方法不仅增强了用户体验,还为开发者提供了更多的创意空间。掌握这些标签的基本用法和注意事项,可以...
这张图片最好是专门为添加热点而设计的,以便于清晰地划分出各个热点区域。 #### 二、插入图片 打开Dreamweaver,创建一个新的HTML文档。在文档中插入你准备好的图片。这可以通过“插入”菜单中的“图像”选项来...
JavaScript(简称JS)是一种广泛用于Web开发的轻量级脚本语言,它可以在客户端运行,为网页添加交互性。在本场景中,我们讨论的是如何使用JavaScript动态地在图片上生成矩形热区,并在热区上添加蒙版效果。热区...
`usemap`属性允许我们将图像与一个图像映射关联起来,这个映射定义了图像上哪些区域可以被点击并触发不同的链接或动作。`usemap`的值通常是一个#符号后跟映射的名称,比如`#imageMap`。 接下来,我们来看`<map>`...
在网页设计中,热区(Hotspots)是一种特殊的技术,允许我们为图片的不同区域赋予交互性,使得用户点击这些特定区域时可以触发某些预设的行为,例如执行JavaScript方法。这通常用于实现图像映射,即在一张大图上定义...
在网页设计中,"为图片根据坐标自动创建热区并点击变颜色" 是一种交互式功能,它允许用户通过点击图像上的特定位置来定义热区,并可以改变这些区域的颜色或透明度。这种技术通常用于创建图像映射,即在一张图片上...
在网页设计中,热点功能是一种常见且实用的技术,它允许用户与图片的特定区域互动,例如点击或悬停时触发某种行为。在这个“JS实现图片上的热点功能.rar”压缩包中,包含的代码示例正是关于如何使用JavaScript来实现...
img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...
这个案例中,我们使用了六个 `<area>` 标签来定义六个热点区域,每个热点区域都有一个精确定位的坐标。 热点区域的应用 热点区域广泛应用于各种网站和应用程序中,例如: * 图像地图:热点区域可以用于创建交互式...
使用 `<img>` 标签,添加 `src` 属性指定图片路径,并使用 `usemap` 属性定义关联的热点地图。`usemap` 的值应该以 `#` 开头,后跟热点地图的名称,例如 `#pic`。 ```html 图片地址" usemap="#pic"> ``` 2. 接下来...
在这篇文章中,作者徐肇忠以茶叶种植适应性分布图为例,介绍了如何使用基于栅格数据结构的USEMAP软件包来制作多因素叠加专题图。文章中提到的关键知识点包括以下几点: 1. 多因素叠加专题图的定义与重要性 专题图是...
在探讨“图片添加热点”这一主题时,我们深入解析了如何在网页中利用HTML的映射(map)和区域(area)标签为图片添加交互性的热点。这一技术不仅提升了用户体验,还增强了网页的信息传递能力。 ### 图片热点的定义...
1. **事件监听:** 使用jQuery的`hover()`方法,我们可以为每个热点区域添加鼠标进入和离开的事件监听器。 2. **高亮效果:** 当鼠标进入热点区域时,可以通过改变CSS样式(如增加边框、改变背景色)来实现高亮效果...
首先,`<map>`元素定义了一个图像映射,它不直接显示在页面上,但与`<img>`标签配合使用,为图像提供可交互的区域。例如: ```html <img src="image.jpg" usemap="#myMap" alt="Image with clickable areas"> <!-...
接下来,我们引入CSS和JavaScript来增强图像热点的功能,如添加点击提示。CSS可以用来美化提示框,例如设置其颜色、大小、位置等。例如: ```css .hotspot-tooltip { position: absolute; background-color: #333...
4. **事件处理**: ImageMaps插件提供了丰富的事件接口,如`onMouseOver`、`onMouseOut`、`onClick`等,可以方便地为地图上的各个区域添加交互逻辑。 ### 四、自定义样式与响应式设计 ImageMaps插件允许开发者通过...
而图片热点区域(Image Maps)则是HTML中一个特殊的应用,它允许我们在图片上定义可点击的区域,这些区域可以链接到不同的URL,为用户提供交互式的体验。 在HTML中,图像热点区域通常通过`<map>`和`<area>`标签来...
这段代码定义了一个名为“planetmap”的图像映射,并为图像中的不同行星定义了可点击区域。每个`<area>`标签定义了一个热点区域,包括形状、坐标以及点击后跳转的目标链接。 #### 3. `<area>`标签详解 `<area>`...
在电子商务网站中,经常会在商品展示图上使用`<map>`标签来定义不同商品的热点区域,当用户点击这些区域时,可以直接跳转到相应的商品详情页。 ##### 4.3 交互式图表 对于数据可视化或统计图表,通过使用`<map>`...
配合`<map>`标签使用,可以实现图像映射的功能,即在图像上定义可点击的区域,这对于创建交互式的图像或者图像地图非常有用。这种技术允许用户通过点击图像的不同部分触发不同的事件或导航到不同的页面。 首先,...