How to create an image hover mouseover using Fireworks如何建立图片悬停鼠标悬停使用Fireworks

Posted on July 5, 2009 at 5:35 am张贴于2009年7月5日在上午05点35分

To create web pages with dynamic HTML capabilities from scratch, we would traditionally need to master DHTML and that includes HTML techniques like image hotspots and JavaScript. In this tutorial I will show you how to automatically create DHTML pages with a swap image behavior using Adobe Fireworks.建立网页的动态HTML功能，从零开始，我们将传统需要掌握的DHTML和技术，其中包括像图像的HTML和JavaScript的热点。在此教程中，我将告诉您如何自动创建的DHTML网页，交换图像行为使用Adobe烟花。

The final output is a complete DHTML project complete with HTML, image files and JavaScript code – and those are done without any coding by hand.最后的输出是一个完整的DHTML专案完整的HTML ，图像文件和JavaScript代码-和这些都是在没有任何编码的手。

1.) Create an image using the shape tool under the vector section (by default, the shape is set to rectangle). 1 。）建立图片使用形状工具的载体节（默认情况下，形状设置为长方形）。 To view more images simply click on the small arrow beside the rectangular image, or simply press “U” to toggle the most commonly used shapes.要查看更多的图片，只要按一下旁边的小箭头的矩形图像，或只是新闻界的“ U ”切换最常用的形状。 Below is a screenshot of expanded shape tool.以下是截图扩大形状的工具。

2.) The shape we are going to create will act as a trigger for our swap image behavior later on. 2 。）的形状我们要创建将作为一个触发我们交换图像行为以后。 For now we will use a circle but you can use any shape or object as you prefer.现在我们将使用一个圆圈，但您可以使用任何形状或对象为您喜欢。

3.) After creating a shape on your canvas import a picture to be used for image swapping. 3 。）在建立一个形状对您的油画导入图片，用于图像交换。 Click on file then import, or press ctrl + r on your keyboard then browse for the desired picture.点击文件然后导入，或者按Ctrl + R在您的键盘然后浏览所需的图片。

4.) Your canvas should have a trigger button and image as discussed earlier. 4 。）您的油画应该有一个快门释放按钮和图像如上所述。 Next we create a new frame used for another image.下一步，我们创建一个新的框架用于其他图像。 Click New/Duplicate frame under the Frames and History panel.单击新建/复制帧的帧和历史小组。

5.) Select newly created frame and import another image. 5 。）选择新建立的框架和进口另一个形象。 It is best that image on frame 1 and frame 2 has exactly the same absolute positioning on your canvas.这是最好的图像帧1和帧2完全相同的绝对定位的油画。

6.) Going back to frame 1. 6 。）回到第1帧。 While the circle shape is selected, right click on it and insert a polygonal slice in it.虽然圆形状被选中，右击它，并插入多边形切片中。

7.) Next create a rectangular slice for image 1 and image 2 7 。）下创建一个矩形切片图像1和图2

Frame 1: Should look like image below第1帧：看起来应该如以下图片

Frame 2:框2 ：

8.) Select the circle image on frame 1 then right click on it and click Add swap image behavior: 8 。）选择的圆圈，在第1帧图像然后右键单击它并单击添加交换图像行为：

9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9 。）经点击添加交换图像行为另一个窗口会出现，点击矩形切片我们先前创建。

10.) Press F12 on your keyboard to preview it on your browser. See the difference between the two screenshots below before and after hovering the mouse pointer on the circle. 10 。）按下F12键盘上的预览您的浏览器。见两者之间的差额截图以下徘徊之前和之后的鼠标指针的循环。

Before hover:前徘徊：

During hover:在徘徊：

Adobe Fireworks is available from this URL: Adobe公司烟花可从以下网址： http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/

Ben Carigtan shows you how it's done.本Carigtan告诉您如何做。

Enjoyed this post?享有这个职位？ Subscribe to Online Tech Tips via订阅在线科技提示通过 RSS Feed RSS馈送 or via或通过 Email电邮 and receive free daily productivity tips.并获得免费的每日生产力提示。

» Filed Under »文章属于 Web Site Tips网站提示