制作地图 - WEB三国 - 设计与修改 - 轩辕春秋文化论坛 20周年


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#1

发表于 2006-1-8 19:43 资料文集短消息只看该作者

从曹操传战斗界面抓一张屏幕图。使用 ps 将其镂空。

图片附件: bg.gif (2006-1-8 19:43, 33.63 K)

[广告] 真诚支持说岳，携手共创辉煌


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#2

发表于 2006-1-8 19:44 资料文集短消息只看该作者

利用 van 兄弟制作的资源观察工具。提取战场。

图片附件: a.gif (2006-1-8 19:44, 351.5 K)

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#3

发表于 2006-1-8 19:51 资料文集短消息只看该作者

将上面两张图片保存到电脑，开始下一步制作。

按上次所说的使用 vs.net 2003 新建一个网页。

将网页的模式改为 GridLayout。

插入图像为刚才的战场。

图片附件: gridlayout.png (2006-1-8 19:51, 4.03 K)

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#4

发表于 2006-1-8 19:59 资料文集短消息只看该作者

再插入地图。

此时，由于地图放入在后，会将镂空战场遮住。这是层的叠放次序的问题。

默认情况下，在 html 源文件中，按出现次序安排层的叠放。所以我们可以
1) 在源文件中,更换两段 IMG 的先后次序.

或

2) 人工指定镂空战场的次序小于地图.

我们使用第二种方法.叠放次序的属性为样式的 z-Index.
z-Index 越大越靠前.

更换二者的顺序.

图片附件: zIndex.png (2006-1-8 19:59, 11.47 K)

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#5

发表于 2006-1-8 20:01 资料文集短消息只看该作者

在设计器中将两张图片的顶角对齐,这时的效果为.

图片附件: look1.png (2006-1-8 20:01, 257.25 K)

[广告] 真诚支持说岳，携手共创辉煌


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#6

发表于 2006-1-8 20:09 资料文集短消息只看该作者

下面控制只显示镂空区域的内容.在原设计的 640 * 480 的分辨率下,曹操传的战场为 13 * 7 个格子,每个格子为 48 * 48, 亦即 624 * 336 的区域.

从属性窗口找到 style 对话盒.

设置 clip 区域.

图片附件: clip.png (2006-1-8 20:09, 14.64 K)

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#7

发表于 2006-1-8 20:18 资料文集短消息只看该作者

至此,界面效果与真正的曹操传差别已经不大了.

下面设置鼠标能力.

鼠标在贴边的 48 像素以内,都会导致移动.这个通过一段 js 代码实现.

贴边事件并不存在,适合我们的事件为鼠标移动事件.亦即 onmousemove.

编写 onmousemove 处理代码. 为地图 img 增加 id="imgMap" 和onmousemove="handleMouseMove()" 说明.

编写 script 块.
<script>
   function handleMouseMove()
   {
         ... (怎么写)
   }
</script>

我们需要做两步,
第一,判断归边.
第二.移动 clip 的左上角.

[广告] 真诚支持说岳，携手共创辉煌


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#8

发表于 2006-1-8 20:33 资料文集短消息只看该作者

居然没捕获到移动?

不要担心,一定可以找到办法的.原因就是我们的镂空图片,虽然镂空了,但是捕获鼠标移动的依然是这张图片而不是地图.

第一个办法是改变叠放次序.现在我们发现,地图因为有剪辑,所以不会有那么大.

第二个办法是把鼠标移动处理函数挂在镂空战场上.

这里采用第一个办法.

好了,现在可以提示左边了.

图片附件: left_catch.png (2006-1-8 20:33, 44.64 K)

[广告] 真诚支持说岳，携手共创辉煌


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#9

发表于 2006-1-8 21:08 资料文集短消息只看该作者

用到的基本算法已经说完.不再多写了.内容有错漏的地方,已做修复.

下面给出的是完整的 html 文件.

附件: HTMLPage1.htm (2006-1-8 21:08, 1.75 K)
该附件被下载次数 181

[广告] 《精忠报国岳飞传完整版》火热发布


	南极 (也人方生)

组别	校尉
级别	左将军
功绩	13
帖子	1326
编号	1838
注册	2003-11-6

#10

发表于 2006-1-9 03:09 资料主页文集短消息只看该作者

浮生兄开始做技术准备拉，偶也要去弄个vs.net玩下。

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	金圭子


	白衣伯爵中大夫 ★

组别	白衣卿相
级别	征西将军
好贴	4
功绩	265
帖子	4926
编号	27961
注册	2004-12-16

#11

发表于 2006-1-10 01:26 资料文集短消息只看该作者

全部能看懂，技术难度不高，都是html和js的基础（不过自己没做过，如果自己做的话可能还是要调试好久的吧）
不过那个设计器是？？？我一直拿ue写网页的，哎呀呀…………

[广告] 安装Alexa工具条，提高轩辕排名，支持轩辕发展！


	浮生宛若寄


	忠信伯宁武军节度使

组别	节度使
级别	破贼校尉
功绩	61
帖子	74
编号	55707
注册	2005-12-21

#12

发表于 2006-1-10 20:02 资料文集短消息只看该作者

vs.net

兄弟很有天赋哈，一定要来帮忙~~

[广告] 《精忠报国岳飞传完整版》火热发布