15.4. Feliere

15.4. Feliere
	15. Filtre web

15.4.1. Prezentare generală

Fig. 17.412. Exemplu pentru filtrul „Feliere”

Imagine originală cu ghidaje

„Feliere” aplicată

Acest filtru este un ajutor simplu și ușor de folosit pentru crearea de imagini de utilizat în fișiere HTML. Filtrul feliază imaginea sursă (precum comanda Feliere după ghid) de-a lungul ghidajelor verticale și orizontale, și produce sub-imagini. În același timp se creează cod HTML salvat într-un document text. Fiecare celulă conține o parte din imagine. Textul se înglobează în documentul HTML.

De notat că acest filtru chiar e foarte simplu de folosit. Un cod HTML tipic produs de filtru nu poate fi mai mult decât:

Exemplu 17.1. Exemplu simplu de rezultat al filtrului „Feliere”

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

Codul HTML realizat; atributele de „stil” au fost omise.

Când nu sunt ghidaje, filtrul nu face nimic. Dacă sunt, chiar și ascunse, filtrul funcționează.

	Indicație
	The ImageMap filter is a much more powerful and sophisticated tool for creating sensitive images. (But it is also much more complex.)

15.4.2. Activating the Filter

Filtrul este în meniul Filtre → Web → Feliere….

15.4.3. Opțiuni

Fig. 17.413. Opțiuni „Feliere”

Multe opțiuni se explică singure, dar nu mai puțin:

Traseu de exportat în HTML

Unde fișierele și imaginile HTML se vor salva. Implicit, aceste fișiere sunt stocate în directorul de lucru. Cu clic pe butonul din dreapta se poate deschide un meniu derulant, de unde se poate selecta o locație diferită.

Nume de fișier pentru export

Numele fișierului HTML. Se poate modifica din caseta text.

Prefixul pentru imagini

Numele unui fișier imagine produs de acest filtru este prefix_i_k.ext, undeprefix este o parte din nume care se poate alege conform preferințelor din caseta text din dreapta, implicit: slice. (i și k sunt numerele liniilor și coloanelor, începând cu 0; .ext este extensia fișierului, depinzând de formatul imaginii.)

Această opțiune este utilă în particular pentru crearea de cod JavaScript la acțiunile clic și onmouseover și necesită seturi diferite de imagini.

Format imagine

Puteți alege să creați fișiere imagini în formatele GIF, JPG, sau PNG ???.

Dosar separat pentru imagini, Dosar pentru export imagini

Când este activat Dosarul separat pentru imagini este creat un dosar unde sunt plasate imaginile. Implicit, numele este images, dar se poate modifica în caseta de textDosar pentru export imagini .

Exemplu 17.2. Cu dosarul separat pentru imagini

Consecința activării „Dosarul separat pentru imagini”

Spațiu dintre elementele tabelului

Valoarea (0-15) este transmisă atributului „spațierea celulelor” din tabelului HTML. Rezultă înlocuirea ghidajelor orizontale și verticale cu benzi cu lățimea specificată, precum în:

Exemplu 17.3. Spațiu dintre elementele tabelului

Fragment de cod HTML corespunzător

De notat că imaginea nu se mărește cu dimensiunea acestor benzi. În loc de asta, imaginea HTML arată de parcă s-au tras dungi cu instrumentul de ștergere.

JavaScript pentru clic și onmouseover

Cu această opțiune activată, filtrul adaugă de asemenea și cod JavaScript. La fel ca în HTML, codul nu funcționează luat așa cum este, nu înainte de a i se adăuga anumite funcționalități dinamice. Codul JavaScript oferă funcții de manevrare a evenimentelor precum „onmouseover”:

Exemplu 17.4. Fragment de cod 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;
      }
  }

Ignoră animațiile pentru cap de tabel

Când este dezactivat, filtrul adaugă hyperlinkul <a href="#"> ... </a> în orice celulă din tabel. Când este activat (implicit așa este) și sunt cel puțin două ghidaje orizontale și două verticale, filtrul nu adaugă hyperlink din prima celulă a liniei sau a coloanei. Poate fi util atunci când aveți imagine cu bordură, și nu doriți ca aceasta să fie bordură senzitivă.

Exemplu 17.5. Animație omisă pentru cap de tabel (cod 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>

Doar celulele interne au hyperlinkuri (goale).