14.4. Slice (Porezať)

14.4.1. Prehľad

Obrázok 17.351. Príklad na filter Slice (Porezať)

Príklad na filter Slice (Porezať)

Pôvodný obrázok s vodiacimi čiarami

Príklad na filter Slice (Porezať)

Aplikovaný filter Slice (Porezať)


Tento filter je jednoduchý pomocník pre tvorbu senzitívnych obrázkov, ktoré môžete použiť vo webových stránkach. Pôvodný obrázok rozrežete pozdĺž vodorovných a zvislých vodiacich čiar (podobne ako príkazom Guillotine (Gilotína)). Vytvoríte tak podmnožinu menších obrázkov. Filter v rovnakom čase vytvorí kus HTML kódu pre tabuľku. Tento kód uloží do textového súboru. Každá bunka tabuľky obsahuje časť z pôvodného obrázka. Textový súbor bude pripojený k HTML dokumentu.

Majte na pamäti, že tento filter je len veľmi jednoduchý pomocník. Typický HTML kód vytvorený týmto filtrom nemusí byť príliš rozdielny od tohto:

Príklad 17.1. Príklad na výsledok aplikácie filtra Slice (Porezať)

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

Vytvorený HTML kód; atribúty style boli vynechané.


Ak v obrázku chýbajú vodiace čiary, filter obrázok nerozreže. Ak sú však vodítka schované, filter bude fungovať.

Tip Tip

Filter ImageMap sa na tvorbu senzitívnych obrázkov hodí viac. Je výkonnejší a ponúka viac možností. (Je však zložitejší na obsluhu...)

14.4.2. Aktivácia filtra

Filter môžete aktivovať z hlavnej ponuky výberom položiek Filters (Filtre)WebSlice (Porezať).

14.4.3. Voľby

Obrázok 17.352. Voľby filtra Slice (Porezať)

Voľby filtra Slice (Porezať)

Väčšinu volieb nie je potrebné vysvetľovať. Vysvetlenie obsahuje už samotné pomenovanie. Ale predsa:

Path for HTML export (t. j. cesta exportu HTML)

Je to cesta, na ktorej bude súbor s HTML a obrázkom uložený. Tieto súbory budú podľa štandardného nastavenia uložené v aktuálnom pracovnom adresári. Kliknutím na tlačidlo napravo otvoríte rozbaľovaciu ponuku v ktorej môžete nastaviť inú lokalitu.

Filename for export (t. j. meno súboru na export)

Meno HTML súboru. Meno súboru môžete zmeniť pomocou vstupného poľa.

Image name prefix (t. j. predpona mena obrázka)

Meno obrázka, vytvorené týmto filtrom, je prefix_i_k.ext, kde prefix je tá časť mena, ktoré môžete slobodne vybrať za pomoci vstupného poľa napravo, prednastavené je slice. (i a k sú čísla riadkov a stĺpcov, každé začína 0; .ext je koncovka mena súboru, ktorá je závislá od formátu obrázka (Image format).)

Táto možnosť je užitočná ak potrebujete vytvoriť Javascript pre funkcie onmouseover a kliknutie, a ak potrebujete rôzny súbor obrázkov.

Image format (t. j. formát obrázka)

Obrázky môžete vytvoriť ako súborové formáty GIF, JPG alebo PNG.

Separate image folder (t. j. oddeliť adresár s obrázkom), Folder for image export (t. j. adresár pre export obrázka)

Ak je aktivovaná voľba Separate image folder, vytvoríte adresár do ktorého budú obrázky uložené. Podľa štandardného nastavenia je cieľový adresár pomenovaný ako images. Vo vstupnom poli Folder for image export môžete tento adresár zmeniť.

Príklad 17.2. Voľba Separate image folder

Výsledok voľby Separate image folder


Space between table elements (t. j. rozostup medzi prvkami tabuľky)

Táto hodnota (0-15) sa prenesie ako atribút HTML tabuľky cellspacing. Výsledkom tohto nastavenia je, že vodorovné a zvislé vodiace čiary budú nahradené pásmi s určenou šírkou.

Príklad 17.3. Rozostup medzi prvkami tabuľky

Zodpovedajúci HTML kód


Možno treba dodať, že obrázok sa po pridaní pásov nezväčší. Výsledný HTML obrázok bude namiesto toho vyzerať, ako by ste cez obrázok nástrojom Guma (Eraser) nakreslili pásy.

Javascript for onmouseover and clicked

Ak je táto voľba aktivovaná, filter pridá aj JavaScript kód. Podobne ako HTML kód, aj tento kód nefunguje v tom tvare, ako ho filter vytvorí. Je to však dobrý štartovací bod ku ktorému môžete pridať nejakú dynamickú funkcionalitu. JavaScript kód obstará funkcie, ktoré vedia spracovať rôzne udalosti, ako napr. onmouseover:

Príklad 17.4. JavaScript kód

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

Skip animation for table caps (t. j. preskočiť animáciu pre hlavičky tabuliek)

Ak ostane voľba neaktivovaná, filter pridá odkaz <a href="#"> ... </a> každej bunke tabuľky. Ak je voľba aktivovaná (východzie nastavenie) a v obrázku sú minimálne dve vodorovné alebo dve zvislé vodiace čiary, filter tento odkaz nepridá prvej a poslednej bunke v stĺpci alebo riadku. Toto môže byť užitočné v prípade, že obrázok obsahuje okraj a nechcete, aby bol senzitívny.

Príklad 17.5.  Skipped animation for table caps (zjednodušený HTML kód)

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

Odkazy (prázdne) obsahujú len vnútorné bunky.