Figura 17.391. Exemple del filtre «Divideix»
Imatge original amb guies
Aplicació del filtre «Divideix»
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.
Aquest filtre és molt fàcil d'utilitzar. El codi HTML que crea no és molt diferent del següent:
Exemple 17.1. Exemple senzill del filtre «Divideix»
<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>
Producte HTML; l'atribut «style» s'ha omès.
Si no hi ha guies sobre la imatge, el filtre no farà res. Però si estan amagades, el filtre actuarà.
![]() |
Suggeriment |
---|---|
El filtre Mapa d'imatge és una eina molt més potent i sofisticada per crear imatges sensibles (però també és molt més complex) |
La majoria de les opcions són auto explicatives. No obstant això:
On es grava l'arxiu HTML i les imatges. Per defecte, s'estarà al directori actual. En fer clic al botó dret, s'obre un menú desplegable on es pot triar una altra ubicació.
El nom del fitxer HTML. El quadre de text permet canviar el nom.
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.)
Aquesta opció és especialment útil si voleu crear Javascript per «onmouseover» i «clicked» i necessiteu diferents lots d'imatges.
You can choose to create image files in the GIF, JPG, or PNG file format.
Quan se selecciona la Carpeta d’imatges separades, es crea una carpeta on s’hi ubicaran les imatges. Per defecte, el nom d’aquesta carpeta és images
, però es pot canviar al quadre de text Carpeta per l’exportació d’imatges.
Aquest valor (0-15) es traspassarà a l'atribut «cellspacing» de la taula HTML. Les guies seran reemplaçades amb tires d'amplada específica:
Recordeu que la imatge no s'ampliarà a causa de la mida d'aquestes tires. El resultat serà com si haguéssiu dibuixat les tires amb l'eina Goma d'esborrar.
Si aquesta opció està marcada, el filtre afegirà codi JavaScript. Igual que el codi HTML, el codi no funciona tal qual, però és un bon punt de partida per afegir alguna funcionalitat dinàmica. El codi JavaScript proporciona una funció per manejar alguns esdeveniments com «onmouseover» (reacció a mouseover):
Exemple 17.4. Fragment de codi 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.
Exemple 17.5. Saltar l'animació dels caps de taula (codi HTML simplificat)
<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>
Només les cel·les interiors tenen enllaços (buits).