14.4. Fatiar
| 14. Filtros para a Web |

### 14.4. Fatiar

#### 14.4.1. Visão Geral

Figura 17.352. Exemplo para o filtro “Fatiar”

Imagem original com guias

“Fatia” aplicada

Este filtro é um auxiliar simples e fácil de usar para a criação de imagens sensíveis para ser usado em arquivos HTML. O filtro fatia a imagem da origem (como o comando Guilhotina faz) ao longo de suas guias horizontais e verticais, e produz um conjunto de sub-imagens. Ao mesmo tempo, cria um código HTML para uma tabela salva em um arquivo de texto. Cada célula da tabela contém uma parte da imagem. O arquivo texto deve, então, ser incorporado em um documento HTML.

Note que este filtro é realmente um ajudante muito simples. Um código HTML típico produzido pelo filtro pode ser não muito mais do que isso:

Exemplo 17.1. Simples exemplo da saída do Filtro “Fatiar”.

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

Código HTML produzido; o atributo “estilo” foi omitido.

Quando não há guias na imagem, o filtro não fara nada. Se, no entanto, as guias estão apenas ocultas (“Exibir as guias” desligado no menu Visualizar), o filtro irá funcionar.

| Dica
O filtro Mapa de Imagem é uma ferramenta muito poderosa e sofisticada para criação de imagens sensíveis. (Mas também é muito mais complexa ...)

#### 14.4.2. Ativar o filtro

Este filtro pode ser encontrado no menu Filtros → Web → Fatiar.

#### 14.4.3. Opções

Figura 17.353. Opções de “Fatiar”

A maioria das opções são auto-explicativas, mas, mesmo assim:

Caminho para exportar HTML

  Onde os arquivos HTML e as imagens são gravados. Por padrão, esses arquivos são armazenados no diretório de trabalho atual. Clicando o botão direito do mouse abre um menu suspenso, onde você pode selecionar diferentes localizações.

Nome do arquivo para exportação

  O nome do arquivo HTML. Você pode modificar o nome do arquivo usando a caixa de texto.

Prefixo do nome da imagem

  O nome de um arquivo de imagem produzido por este filtro é `prefixo_i_k.ext`, onde `prefixo` é a parte do nome do arquivo que você pode selecionar livremente usando a caixa de texto à direita, por padrão: `fatia`. (`i` e `k` são os números da linha e da coluna, cada um a partir de 0;. `.ext` é a extensão do nome do arquivo, dependendo do formato de imagem selecionado.)

  Esta opção é particularmente útil quando você quer criar Animação Javascript para onmouseover e clicked e precisa de diferentes conjuntos de imagens.

Formato da imagem

  Você pode escolher criar arquivos de imagens nos formatos de arquivo GIF, JPG, ou PNG.

Pasta de imagem separada, Pasta para exportação de imagem

  Quando pasta de imagem separada estiver ativada, uma pasta será criada onde os arquivos de imagem serão colocados. Por padrão, o nome dessa pasta de destino é

  Exemplo 17.2. Com pasta de imagem separada

  Resultado da “pasta de imagens separada” habilitado.

Espaço entre os elementos na tabela

  Este valor (0-15) será passado como atributo “espaçamento das células” para a tabela HTML. O resultado é que as guias horizontais e verticais serão substituídas por faixas de largura especificada:

  Exemplo 17.3. Espaço entre os elementos na tabela

  Trecho do código HTML correspondente

  Note que a imagem não será ampliada pelo tamanho dessas listras. Em vez disso, a imagem HTML resultante será semelhante ao que você teria se tivesse desenhados as listras com a ferramenta Borracha.

Animação Javascript para onmouseover ou clicked

  Quando esta opção é ativada, o filtro também irá adicionar algum código JavaScript. Assim como o código HTML gerado, esse código JavaScript não deve ser usado da forma exata como é gerado, mas é um bom ponto de partida para a adição de algumas funcionalidades dinâmicas. O código JavaScript fornece uma função para lidar com eventos como “onmouseover”:

  Exemplo 17.4. Trecho de código 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 animação de estabelecer limites da tabela

  Quando desativada, o filtro irá adicionar um link `<a href="#">...</a>` para cada célula da tabela. Quando ativado (este é o padrão) existem pelo menos duas guias horizontais ou verticais, o filtro não irá adicionar um hiperlink para a primeira e última célula em uma coluna ou linha. Isto pode ser útil quando você tem uma imagem com borda e você não quer tornar a borda sensível.

  Exemplo 17.5. Sem animações para os cantos da tabela (código HTML simplificado)

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

  Apenas células internas têm links (vazios).

14.3. Semi-Achatar |  | 15. Filtros de animação

Crie um relato de erro no Bugzilla