15.4. Zerteilen
| 15. Web |

### 15.4. Zerteilen

#### 15.4.1. Wirkungsweise

Abbildung 17.391. Anwendungsbeispiel für das Filter »Zerteilen«

Originalbild mit Hilfslinien

Filter »Zerteilen« angewandt

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.

Wie gesagt ist dieses Filter wirklich nur eine ganz einfache Hilfe. Typischerweise ist der produzierte HTML-Code wirklich nicht viel mehr als eine solche HTML-Tabelle:

Beispiel 17.1. Einfache Beispielausgabe des Filters »Zerteilen«

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

Erzeugter HTML-Code; das »style«-Attribut wurde weggelassen.

Wenn es keine Hilfslinien im Bild gibt, macht das Filter gar nichts. Falls die Hilfslinien aber nur ausgeblendet sind, dann schon.

| Tipp
Das ImageMap-Filter ist ein sehr viel mächtigeres und ausgefeilteres Werkzeug, um klickbare Grafiken zu erzeugen. Leider ist es auch sehr viel komplexer …

#### 15.4.2. Filteraufruf

Das Filter lässt sich über das Menü Filter → Web → Zerteilen … im Bildfenster aufrufen.

#### 15.4.3. Eigenschaften

Abbildung 17.392. Eigenschaften des Filters »Zerteilen«

Die meisten Eigenschaften erklären sich von selbst, aber nichtsdestotrotz:

Pfad für den HTML-Export

  Legt fest, wo die HTML-Datei und die Bilddateien gespeichert werden. Per Voreinstellung ist dies der aktuelle Arbeitsordner. Wenn Sie auf den Knopf rechts klicken, öffnet sich ein Auswahlmenü, mit dessen Hilfe Sie einen anderen Ordner auswählen können.

Dateiname für den Export

  Der Name der HTML-Datei. Mit Hilfe des Textfeldes können Sie einen anderen Dateinamen wählen.

Präfix des Dateinamens

  Der Name einer Bilddatei, die dieses Filter erzeugt, lautet `praefix_i_k.erw`, wobei `praefix` der Teil des Namens ist, den Sie mit Hilfe des Eingabefeldes rechts frei wählen können, standardmäßig: `slice`. (`i` und `k` ist die Zeilen- bzw. Spaltennummer, beginnend mit 0; `.erw` ist die Dateinamenserweiterung, die durch das gewählte Grafikformat bestimmt wird.)

  Diese Eigenschaft ist insbesondere dann nützlich, wenn Sie Javascript für »onmouseover« und »clicked« erzeugen wollen und mehrere Sätze Bilder benötigen.

Grafikformat

  Sie haben die Wahl, Bilddateien im GIF-, JPG- oder PNG- Dateiformat zu erstellen.

Extra Grafikordner, Ordner für die zu exportierenden Grafiken

  Wenn Extra Grafikordner aktiviert ist, wird ein Ordner angelegt, in dem die Bilddateien platziert werden. Per Voreinstellung ist dies `images`, was Sie aber mit Hilfe des Eingabefeldes rechts von Ordner für die zu exportierenden Grafiken ändern können.

  Beispiel 17.2. Mit extra Grafikordner

  Wenn »Extra Grafikordner« aktiviert ist

Abstand zwischen den Tabellenzellen

  Dieser Wert (0-15) wird zum »cellspacing«-Attribut in der HTML-Tabelle. Das führt dazu, dass die horizontalen und vertikalen Hilfslinien durch Streifen der angegebenen Breite ersetzt werden:

  Beispiel 17.3. Abstand zwischen den Tabellenzellen

  Zugehöriges HTML-Codefragment

  Allerdings wird das Bild keineswegs um die Breite dieser Streifen vergrößert. Stattdessen sieht das resultierende HTML-Bild so aus, als hätten Sie die Streifen mit Hilfe des Radiergummis erzeugt.

Javascript für »onmouseover« und »clicked«

  Wenn diese Eigenschaft aktiviert ist, fügt das Filter zusätzlich JavaScript-Code hinzu. Wie beim HTML-Code auch können Sie diesen Code nicht so wie er ist benutzen, sondern müssen ihn noch bearbeiten. Er ist aber ein guter Ausgangspunkt, um Ihrer HTML-Datei dynamische Funktionalität hinzuzufügen. Der JavaScript-Code stellt eine Funktion zur Verfügung, die Ereignisse wie »onmouseover« behandelt:

  Beispiel 17.4. JavaScript-Codefragment

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

Animation für Tabellenkopf überspringen

  Wenn diese Eigenschaft nicht aktiviert ist, fügt das Filter für jede Zelle in der Tabelle ein Hyperlink-Codefragment `<a href="#"> ... </a>` hinzu. Wenn diese Eigenschaft aktiviert ist (das ist die Voreinstellung) und es mindestens zwei horizontale oder zwei vertikale Hilfslinien gibt, fügt das Filter für die erste und letzte Zelle jeder Reihe oder Spalte kein solches Hyperlink-Codefragment hinzu. Dies kann dann ganz nützlich sein, wenn Sie ein Bild mit einem Rahmen haben, der nicht klickbar werden soll.

  Beispiel 17.5. Keine Animation für Tabellenkopf (vereinfachter HTML-Code)

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

  Nur die inneren Zellen haben (leere) Hyperlinks.

15.3. Semi-Abflachen |  | 16. Animation

Nutzen Sie unser Fehlererfassungssystem