How to create an image hover mouseover using Fireworks花火を使ってどのようにマウスオーバーで画像ホバーを作成する

Posted on July 5, 2009 at 5:35 am 2009年7月5日の午前5: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の機能を持つWebページを作成するには、我々は伝統的にDHTMLをマスターする必要があることと、そのイメージのホットスポットとJavaScriptのようなHTMLの技術が含まれています。このチュートリアルではどのように自動的にスワップイメージの動作はAdobe花火を使ってダイナミックHTMLページを作成する場合に表示されます。

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.長方形の小さな矢印をイメージ、または、単にキーを押します" ūの横にあるをクリックして画像を表示するには"最もよく使われている図形を切り替えます。 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キーを押してお使いのブラウザでプレビュー。以下の2つのスクリーンショットとの違いを見る前と後輪の上でマウスポインタをホバリング。

Before hover:ホバー前：

During hover:ホバリング中：

Adobe Fireworks is available from this URL: Adobeの花火、このURLから入手可能です： 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 Eメール and receive free daily productivity tips.日々の生産性のヒントと受信無料。

» Filed Under »ファイルの下で Web Site Tips Webサイトのヒント

Save this page このページを保存	Stir it up on Mixx Mixxのそれをかき混ぜるに
Add to Reddit しかしに追加	Stumble this page このページつまずく