wj7019 发表于 2014-11-7 14:32:36

web-iou拓扑图热点编辑

本帖最后由 wj7019 于 2014-11-7 15:47 编辑

继上次的帖子”最新版web-iou 1.2.2.23汉化“之后，有人问拓扑图编辑的相关问题。现发专贴说明……
最新版web-iou 1.2.2.23汉化
http://bbs.hh010.com/thread-412503-1-1.html
(出处: 鸿鹄论坛)

       其实web-iou已经集成了拓扑图编辑功能，主要是通过代码<area shape="circle" coords="180,139,30" href="telnet://{{IP}}:2000"/>       这个熟悉html的一看就懂涉及到<area>标签，这里就不再解释了，主要说一下里面的几个关键数值。circle表示热点区域是圆形当然你也可以改为其他的如rectangle矩形等，coords="180,139,30"这里的180和139是你热点在图片里面的相对横纵坐标，30是热点圆形的半径。后边的2000是telnet的端口号需要按实际修改。
       我们在web-iou中上传自己的拓扑图后进入编辑拓扑图页面，在这里会看到map区域为空白。如果你能确定自己拓扑图里的设备相对图片坐标那你就可以直接修改上述代码后输入了。但是一般获取这个坐标不太容易。
       web-iou提供了方便的鼠标坐标捕捉功能，你只需要在自己的图片上点击相应设备，就会自动在map区域生成带有当前位置的代码，不过这里的端口号还是2000需要你自己修改为相应的设备端口号一般是从2001开始的。如下图操作
**** Hidden Message *****
保存后在相应的实验中选择拓扑，开启所有设备后在拓扑中移动鼠标到相应设备即可看到鼠标变成手形，单击即可连接。如图
**** Hidden Message *****

详细说明见本人博客：钧钧下午茶


ccd351639687 发表于 2014-11-8 00:05:42

太棒了，感谢楼主

Moose 发表于 2014-11-8 10:07:14

太棒了，感谢楼主

Moose 发表于 2014-11-8 10:07:50

太棒了，感谢楼主

Moose 发表于 2014-11-8 10:09:01

太棒了，感谢楼主

liujian_sky 发表于 2014-11-8 21:35:40

沙发~支持楼主

ayefc 发表于 2014-11-9 10:36:32

感谢楼主，正好要学习一下。

无往不利 发表于 2014-11-9 16:44:38

看一看..

唐城网 发表于 2014-11-9 17:00:12

沙发~支持楼主

大海er 发表于 2014-11-10 14:58:58

沙发~支持楼主太棒了，感谢楼主

an0202 发表于 2014-11-11 13:15:31

太棒了，感谢楼主

winson5783 发表于 2014-11-12 22:18:00

太棒了，感谢楼主

1927513865 发表于 2014-11-13 09:50:59

谢谢分享

内网IT 发表于 2014-11-13 15:20:53

沙发~支持楼主太棒了，感谢楼主哈哈!太好笑了.拿分走人呵呵，楼下继续！

maxiyang 发表于 2014-11-13 19:03:41

看看
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: web-iou拓扑图热点编辑