This filter is a simple and easy to use helper for creating sensitive images to be used in HTML files. The filter slices up the source image (like the Slice Using Guides command does) along its horizontal and vertical guides, and produces a set of sub-images. At the same time it creates a piece of HTML code for a table saved in a text file. Every table cell contains one part of the image. The text file should then be embedded in an HTML document.
Σημειώστε ότι αυτό το φίλτρο είναι πραγματικά ένας πολύ απλός βοηθός. Ένας τυπικός κώδικας HTML που παράχθηκε από αυτό το φίλτρο ίσως να μην είναι τίποτα παραπάνω από αυτό:
Παράδειγμα 17.1. Απλή έξοδος παραδείγματος φίλτρου «Τεμαχισμός»
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt="" src="slice_0_0.png"/></td> <td><img alt="" src="slice_0_1.png"/></td> </tr> <tr> <td><img alt="" src="slice_1_0.png"/></td> <td><img alt="" src="slice_1_1.png"/></td> </tr> </table>
Κώδικας HTML που παράχθηκε· το γνώρισμα «τεχνοτροπία» παραλείφθηκε.
Όταν δεν υπάρχουν οδηγοί στην εικόνα, το φίλτρο δεν θα κάνει τίποτα. Εάν, όμως, οι οδηγοί είναι απλά κρυμμένοι, το φίλτρο θα δουλέψει.
![]() |
Υπόδειξη |
---|---|
Το φίλτρο χάρτης εικόνας είναι ένα πολύ πιο ισχυρό και εξελιγμένο εργαλείο για δημιουργία καλαίσθητων εικόνων. (Αλλά είναι επίσης πολύ πιο περίπλοκο...) |
Αυτό το φίλτρο βρίσκεται στο μενού παραθύρου εικόνας κάτω από
→ → .Οι περισσότερες επιλογές είναι αυτονόητες, αλλά παρόλα αυτά:
Όπου το αρχείο HTML και τα αρχεία εικόνας θα αποθηκευτούν. Από προεπιλογή αυτά τα αρχεία θα αποθηκευτούν στον τρέχοντα κατάλογο εργασίας. Με κλικ στο κουμπί στα δεξιά ανοίγει ένα αναδυόμενο μενού, όπου μπορείτε να διαλέξετε μια διαφορετική τοποθεσία.
Το όνομα του αρχείου HTML. Μπορείτε να αλλάξετε το όνομα αρχείου χρησιμοποιώντας το πλαίσιο κειμένου.
The name of an image file produced by this filter is
prefix_i_k.ext
, where
prefix
is that part of the filename which you
can freely select using the textbox to the right, by default:
slice
.
(i
and k
are the numbers
of the row and the column, each starting with 0;
.ext
is the filename
extension depending on the selected
Image format.)
Αυτή η επιλογή είναι ιδιαίτερα χρήσιμη όταν θέλετε να δημιουργήσετε Javascript για υπέρπτηση ποντικιού και πάτημα και χρειάζεστε διαφορετικά σύνολα εικόνων.
You can choose to create image files in the GIF, JPG, or PNG file format.
Όταν το ξεχωριστός φάκελος εικόνας ενεργοποιηθεί, ένας φάκελος θα δημιουργηθεί όπου τα αρχεία εικόνας μπορούν να τοποθετηθούν. Από προεπιλογή, το όνομα αυτού του φακέλου προορισμού είναι images
, αλλά μπορείτε να το αλλάξετε στο πλαίσιο κειμένου φάκελος για εξαγωγή εικόνας.
Παράδειγμα 17.2. Με ξεχωριστό φάκελο εικόνας
Αποτέλεσμα ενεργοποιημένου «ξεχωριστού φακέλου εικόνας»
Αυτή η τιμή (0-15) θα περαστεί ως γνώρισμα «διάκενου κελιού» στον πίνακα HTML. Το αποτέλεσμα είναι, ότι οριζόντιοι και κάθετοι οδηγοί θα αντικατασταθούν από ρίγες καθορισμένου πλάτους:
Σημειώστε ότι η εικόνα δεν θα μεγεθυνθεί κατά το μέγεθος αυτών των ριγών. Αντίθετα, η τελική εικόνα HTML θα φαίνεται όπως σχεδιάσατε τις ρίγες με το εργαλείο σβήστρας.
Όταν αυτή η επιλογή ενεργοποιηθεί, το φίλτρο θα προσθέσει επίσης μερικό κώδικα JavaScript. Όπως ο κώδικας HTML, αυτός ο κώδικας δεν δουλεύει όπως είναι, μάλλον είναι ένα καλό αρχικό σημείο για προσθήκη κάποιας δυναμικής λειτουργικότητας. Ο κώδικας JavaScript δίνει μια συνάρτηση για χειρισμό γεγονότων όπως «onmouseover»:
Παράδειγμα 17.4. Απόκομμα κώδικα JavaScript
function exchange (image, images_array_name, event) { name = image.name; images = eval (images_array_name); switch (event) { case 0: image.src = images[name + "_plain"].src; break; case 1: image.src = images[name + "_hover"].src; break; case 2: image.src = images[name + "_clicked"].src; break; case 3: image.src = images[name + "_hover"].src; break; } }
When disabled, the filter will add a
<a href="#"> ... </a>
hyperlink stub to every table cell. When enabled (this is the
default) and there are at least two horizontal or two vertical
guides, the filter will not add a hyperlink stub to the first and
last cell in a column or row. This may be useful when you have an
image with border and you don't want to make the border sensitive.
Παράδειγμα 17.5. Παράλειψη κίνησης για κεφαλαία πίνακα (απλοποιημένος κώδικας HTML)
<table cellpadding="0" border="0" cellspacing="0"> <tr> <td><img alt="" src="images/slice_0_0.png"/></td> <td><img alt="" src="images/slice_0_1.png"/></td> <td><img alt="" src="images/slice_0_2.png"/></td> <td><img alt="" src="images/slice_0_3.png"/></td> </tr> <tr> <td><img alt="" src="images/slice_1_0.png"/></td> <td><a href="#"><img alt="" src="images/slice_1_1.png"/></a></td> <td><a href="#"><img alt="" src="images/slice_1_2.png"/></a></td> <td><img alt="" src="images/slice_1_3.png"/></td> </tr> <tr> <td><img alt="" src="images/slice_2_0.png"/></td> <td><img alt="" src="images/slice_2_1.png"/></td> <td><img alt="" src="images/slice_2_2.png"/></td> <td><img alt="" src="images/slice_2_3.png"/></td> </tr> </table>
Μόνο εσωτερικά κελιά έχουν (κενούς) υπερσυνδέσμους.