15.4. Divideix
| 15. Filtres Web |

### 15.4. Divideix

#### 15.4.1. Resum

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)

#### 15.4.2. Activació del filtre

El filtre es troba al menú Filtres → Web → Divideix….

#### 15.4.3. Opcions

Figura 17.392. Opcions «Divideix»

La majoria de les opcions són auto explicatives. No obstant això:

Camí de l'exportació HTML

  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ó.

Nom del fitxer que s'ha d'exportar

  El nom del fitxer HTML. El quadre de text permet canviar el nom.

Prefix dels noms de les imatges

  El nom de la imatge produïda per aquest filtre és `prefix_i_k.ext`, on el `prefix` és la part del nom de la imatge que es pot triar lliurement a través del quadre de text a la dreta, per defecte: `slice`. (`i` i `k` són els números de la fila i la columna, cadascun començant per 0; `.ext` és l’extensió del nom que depèn del Format de la imatge seleccionada.)

  Aquesta opció és especialment útil si voleu crear Javascript per «onmouseover» i «clicked» i necessiteu diferents lots d'imatges.

Format de les imatges

  Podeu triar entre els formats de fitxer GIF, JPG, o PNG.

Posa les imatges en una carpeta a part, Carpeta on s'exportaran les imatges

  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.

  Exemple 17.2. Amb una carpeta d'imatges separades

  Resultat de la «Carpeta d'imatges separades»

Separació entre els elements de la taula

  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:

  Exemple 17.3. Separació entre els elements de la taula

  Fragment de codi HTML corresponent

  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.

Javascript pel «onmouseover» i «clicked»

  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;
            }
        }

Saltar-se l'animació dels caps de taula

  Quan aquesta opció no està marcada, el filtre afegeix un enllaç `<a href="#"> ... </a>` a cada cel·la de la taula. Si està marcada (per defecte) hi ha almenys dues guies horitzontals o verticals, el filtre no afegirà cap enllaç a la primera i última cel·la de la fila o columna. És útil si teniu una imatge amb vora i no es vol fer una vora sensible.

  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).

15.3. Semi-aplanar |  | 16. Filtres Animació

Report an error in the bug tracker