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. Για τη δημιουργία ιστοσελίδων με δυνατότητες δυναμικής HTML από το μηδέν, θα πρέπει να έχει τον έλεγχο παραδοσιακά DHTML και που περιλαμβάνει τεχνικές όπως HTML εικόνα hotspots και JavaScript. Σε αυτό το tutorial θα σας δείξει πώς να δημιουργήσει αυτόματα DHTML σελίδες με swap εικόνα συμπεριφορά χρησιμοποιώντας 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.) Το σχήμα που θα δημιουργηθεί θα ενεργήσει ως έναυσμα για τη συμπεριφορά μας swap εικόνας αργότερα. 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, έπειτα κάντε δεξί κλικ πάνω του και κάντε κλικ στο κουμπί Προσθήκη swap εικόνας συμπεριφορά:

9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9.) Μόλις κάνετε κλικ σε swap προσθήκη εικόνας συμπεριφορά άλλο παράθυρο θα εμφανιστεί, κάντε κλικ στο ορθογώνιο κομμάτι που δημιουργήσατε νωρίτερα.

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 του πληκτρολογίου για να προεπισκόπηση αυτή στον browser σας. Δείτε τη διαφορά μεταξύ των δύο παρακάτω εικόνες του πριν και μετά το δείκτη του ποντικιού πλανάται σχετικά με τον κύκλο.

Before hover: Πριν φτερουγίζω:

During hover: Κατά τη διάρκεια φτερουγίζω:

Adobe Fireworks is available from this URL: Adobe Fireworks είναι διαθέσιμη από αυτό το URL: http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/

Ben Carigtan shows you how it's done. Ben Carigtan σας δείχνει τον τρόπο με τον οποίο το κάνει.

Enjoyed this post? Απολαμβάνουν αυτή τη θέση; Subscribe to Online Tech Tips via Subscribe to Online Tech Tips μέσω RSS Feed RSS Feed or via ή μέσω Email Email and receive free daily productivity tips. και να λάβετε δωρεάν ημερήσιες συμβουλές παραγωγικότητας.

» Filed Under »Filed under Web Site Tips Web Site Tips

Save this page Αποθηκεύστε αυτή τη σελίδα	Stir it up on Mixx Ανακατέψτε μέχρι στις Mixx
Add to Reddit Προσθήκη στο reddit	Stumble this page Παραπάτημα αυτή τη σελίδα