为网页添加鼠标经过图片的步骤

发布时间：2023-12-30 16:47:25 所属栏目：教程来源：DaWei

导读： 网页的世界中，总少不了形形色色的图片。甚至大部分你看起来不像是的图片的东西，比如有特效，有动画的“好似”视频的网页元素，其实都用了某种格式的图片。

而在现代网页中一

网页的世界中，总少不了形形色色的图片。甚至大部分你看起来不像是的图片的东西，比如有特效，有动画的“好似”视频的网页元素，其实都用了某种格式的图片。

而在现代网页中一种非常常见的网页图片元素就是鼠标经过图像，可能从代码角度并没有这个专有名词，而在 Dreamweaver CC 2018 中就是有这么一种设置，可以轻松的帮助我们设置鼠标经过图像。那么这个到底是一个什么样的图像效果呢？

简单来说，就是在一张原有的网页中的图片的基础上，当鼠标移动到这张原有的图片的时候，原有的图片的位置就显示第二个图片了。而当鼠标一旦离开第二个图片，又会显示原有的第一张的图片，这种看似动态的效果，其实在网页中非常常见，Dreamweaver CC 2018 的操作原理是为我们封装，打包了一个 function 函数。没错，就是使用了 Javascript 。

第一步：先打开桌面上的 Dreamweaver CC 2018 。对，没错，双击 DW！！！

第二步：老生常谈的话题，新建一个空白的 HTML 文档。

第三步：这一步就是我们最关键的一步，也是大家要重点记忆和跟着操作的一步。首先我们点击菜单栏中的插入，在插入菜单弹出的下拉菜单栏中，选择 HTML 。从下面的图片中可以看到，选择 HTML 中，弹出的下一级菜单列表中有一个设置鼠标经过图像选项！！！这里就是我们要点击的，发现这个选项之后，单击它。

第四步：点开鼠标经过图像后的弹出界面如下图所示，我们发现在这个设置界面中，有一个原始图像选项，有一个鼠标经过图像选项。分别为这两个图片选择本地的两张不同的图片后，就可以完成我们鼠标经过图像的设置了。

也许你在较大体积的图片中不常见，但是比如一些小的按钮，鼠标一划过，就由方的变成圆的，或由三角的变成圆形。这种小地方特别容易使用到我们今天讲的鼠标经过图像的控制。

（编辑：源码门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!