How to create an image hover mouseover using Fireworks كيفية خلق صورة تحوم mouseover استخدام الألعاب النارية

Posted on July 5, 2009 at 5:35 am موقع 5 يوليو 2009 في 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. لإنشاء صفحات ويب ديناميكية مع هتمل القدرات من الصفر ، فإننا عادة ما تحتاج إلى ربان DHTML هتمل وتشمل تقنيات مثل جافا سكريبت وصورة النقاط الساخنة ، وفي هذا البرنامج التعليمي سوف يعرض لك كيفية خلق DHTML الصفحات تلقائيا مع مبادلة صورة السلوك باستخدام أدوبي للالعاب النارية .

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 هتمل ، وملفات الصور وشفرة جافا سكريبت -- وتلك التي تتم دون أي ترميز يدويا.

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. ثم اضغط على ملف الاستيراد ، أو الصحافة السيطرة + ص) على لوحة المفاتيح ، ثم لتصفح الصورة المرجوة.

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: أدوبي للالعاب النارية يمكن الحصول عليه من هذا العنوان : 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 الموقع نصائح

Save this page احفظ هذه الصفحة	Stir it up on Mixx اثارة الامر على Mixx
Add to Reddit أضف الى Reddit	Stumble this page تتعثر هذه الصفحة