15.4. Trocear

15.4.1. Visión general

Figura 17.353. Ejemplo para el filtro Trocear

Ejemplo para el filtro Trocear

Imagen original con guías

Ejemplo para el filtro Trocear

Trocear aplicado


Este filtro es un ayudante sencillo y fácil para crear imágenes sensibles para usarlas en archivos HTML. El filtro trocea la imagen original (como lo hace el comando guillotina) a lo largo de las guías horizontal y vertical, y produce un conjunto de subimágenes. Al mismo tiempo crea una pieza de código HTML para una tabla guardada en un archivo de texto. Cada celda de la tabla contiene una parte de la imagen. El archivo de texto se debe incrustar en un documento HTML.

Tenga en cuenta que este filtro es en realidad un ayudante muy sencillo. Un código HTML típico producido por el filtro no debe ser mucho más que esto:

Ejemplo 17.1. Un ejemplo sencillo de la salida del filtro Trocear

<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 producido; el atributo estilo se ha omitido.


Cuando no hay guías en la imagen, el filtro no hará nada. Sin embargo, si las guías están ocultas, el filtro funcionará.

[Sugerencia] Sugerencia

El filtro mapa de la imagen es una herramienta mucho más potente y sofisticada para crear imágenes sensibles. (Pero también es mucho más complejo...)

15.4.2. Activar el filtro

Este filtro se encuentra en el menú de la ventana de la imagen en FiltrosWebTrocear….

15.4.3. Opciones

Figura 17.354. Opciones de Trocear

Opciones de Trocear

La mayoría son autoexplicativas, pero sin embargo:

Ruta para exportar el HTML

Donde se guardarán el archivo HTML y los archivos de imagen. De manera predeterminada, estos archivos se guardan en la carpeta de trabajo actual. Pulsando sobre el botón de la derecha se abre un menú desplegable, donde puede seleccionar una ubicación diferente.

Nombre de archivo para exportar

El nombre del archivo HTML. Puede cambiar el nombre del archivo usando la caja de texto.

Prefijo del nombre de la imagen

El nombre de un archivo de imagen producido por este filtro es prefijo_i_k.ext, donde prefijo es la parte del nombre de archivo que puede seleccionar libremente usando la caja de texto de la derecha, de manera predeterminada: trocear. (i y k son los números de la fila y la columna, empezando cada uno por 0; .ext es la extensión del nombre de archivo que depende del Formato de imagen seleccionado.)

Esta opción es particularmente útil cuando quiere crear «onmouseover» y «clicked» en Javascript y necesita diferentes conjuntos de imágenes.

Formato de la imagen

Puede elegir crear archivos de imagen en el formato de archivo GIF, JPG, o PNG.

Separar carpeta de la imagen, Carpeta para la exportación de imágenes

Cuando Separar carpeta de la imagen está activada, se creará una carpeta en la que se situarán los archivos de imagen. De manera predeterminada, el nombre de esta carpeta destino es images, pero puede cambiarlo en la caja de texto Carpeta para la exportación de imágenes.

Ejemplo 17.2. Con separar carpeta de la imagen

Resultado de Separar carpeta de la imagen activado


Espacio entre los elementos de la tabla

Este valor (0-15) se pasará como atributo espaciado de celdas para la tabla HTML. El resultado es que las guías horizontal y vertical se reemplazarán con tiras de una anchura específica:

Ejemplo 17.3. Espacio entre los elementos de la tabla

Fragmento del código HTML correspondiente


Tenga en cuenta que la imagen no se agrandará por el tamaño de estas tiras. En su lugar, la imagen HTML resultante se parecerá a las tiras que ha dibujado con la herramienta de borrado.

Javascript para «onmouseover» y «clicked»

Cuando esta opción está activada, el filtro también añadirá código Javascript. Como el código HTML, este código no funciona así, más bien es un buen punto de inicio para añadir alguna funcionalidad dinámica. El código Javascript proporciona una función para gestionar eventos como onmouseover:

Ejemplo 17.4. Fragmento del 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 la animación de las tapas de la tabla

Cuando está desactivada, el filtro añadirá un trozo de hipervínculo <a href="#"> ... </a> a cada celda de la tabla. Cuando está activada (es la predeterminada) y hay al menos dos guías horizontales o dos guías verticales, el filtro no añadirá un trozo de hipervínculo a la primera y a la última celda en una columna o una fila. Esto puede ser útil cuando tiene una imagen con borde y no quiere hacer sensible el borde.

Ejemplo 17.5. Saltar la animación de las tapas de la tabla (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>
              

Sólo las celdas interiores tienen hipervínculos (vacíos).