如何使用Dreamweaver制作鼠标经过时的图片放大效果

在一些商品展示页面中，常常需要实现当鼠标放到图片上时，图片会放大，当鼠标离开图片时，图片恢复到原来大小的效果。下面将介绍具体的方法：

步骤1：修改页面属性

首先打开Dreamweaver，并修改页面属性，将页面背景色修改为灰色，以适应图片展示。

步骤2：添加容器

通过打开布局属性，添加一个apdiv容器，用来装载图片。设置该容器的宽度为800px，高度为299px，并将溢出设置为hidden，以保持整体布局的稳定。

步骤3：插入图片展示栏

接着，在容器内部插入一个1行5列的表格，表格宽度设置为100%，然后插入五张图片，形成一个基本的图片展示栏。

步骤4：添加放大效果

选择其中一张图片，在属性栏中给其添加一个id，比如im1。然后为图片添加行为，点击添加按钮，选择【改变属性】。

步骤5：调整图片大小

打开改变属性对话框，选择元素类型为img，ID为之前设置的im1，属性选择【输入】，填写width，将新的值设置为300。这样，当鼠标放到图片上时，图片的宽度会改变为300px。

步骤6：设置鼠标经过效果

接着再添加一个行为，目的是让鼠标放在图片上时，图片的高度改变为150px。同样地，添加两个行为，分别用于让图片在鼠标离开时恢复到原来的大小。

步骤7：应用到所有图片

给所有的图片添加以上四个行为，这样当鼠标放到图片上时，就能看到放大后的效果，当鼠标离开时，图片恢复到原来的大小。

通过以上步骤，您可以轻松地在Dreamweaver中实现鼠标经过时图片放大的效果，为商品展示页面增添更多视觉吸引力。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。