教程写作缘由:
过年期间往往是聚会的好时机。不管是什么类型的聚会,都会拍集体照留念或拿往时的集体照来回忆。集体照上的名字如果是印在背后,查看不是很方便,如果能让鼠标移过集体照里的人头就能显示人名及相关文字辅助说明会很不错的。想到有这个需求的可能,细想一下用FLASH和DW都可以实现,用FLASH的话如果直接输出为单一的SWF文件就不能加入个性化的备注了,普适性不强,如果加入TXT为外部文件,会比较麻烦。用DW的话会相对很方便,最后可以做成一个文件进行分发,接收的人另存后可以自行再改,很有普遍适用性。
正文开始:
一、打开DW,新建一个html文件。
二、插入集体照,并点击插入图像热点
三、因为是示例,我这里只插入了五个热点。插入完所有热点后,点击“代码”。
四、进入代码编辑模式后会看到对应热点的代码,去掉红线部分,这样在最后成品网页点击热点时就不会出现热点区域的形状。
五、把上面划红线的部分代码改一下,加入人名。
六、保存后按F12可以浏览到效果。
温馨提示:
1、加入人名的地方,是可以加入除人名外的别的内容的,文字可多可少,最终成品网页中也会出现的。如可以加入的文字为:李老师(班主任、英语老师)或李三(体育委员,校运会200米冠军)。
2、每一张集体照只需要第一次设置的时候用到DW来设置热点,一旦制作好浏览成功后,可以用浏览器软件(360浏览器的话要用兼容模式)另存为mht文件(单一个文件)再分发给成员,每个成员得到后用浏览器打开后再另存为html网页,用记事本软件打开就可以自己修改里面的文字了的。
本文为原创文章,您的阅读、收藏、转发、赞赏是我持续创作的动力!分享共创价值!
作者:头条号 / Lian悟
作者头条号链接: