I D R A
Ipertesto Dinamico per Racconti d'Avventura

Manuale dell'autore
rev 1.0, © 2000 Enrico Colombini

 

qui puoi scaricare IDRA con il manuale

qui puoi visitare il sito ufficiale dell'autore Enrico Colombini con esempi e giochi scaricabili

Estetica e HTML

CAP 4

1

Decorare la pagina

7

Immagini come scelte

2

Caratteri grandi e piccoli

8

Colore di fondo

3

Comandi separati e inclusi

9

Immagine di fondo

4

Esempi di comandi HTML

10

Opzioni multiple

5

Testo colorato

11

Intestazione e piè di pagina

6

Immagini nelle pagine

12

Frame e HTML

 

Immagini come scelte

Se un'immagine viene creata all'interno del testo passato a una funzione rinvio() o scelta(), essa diverrà attiva: vi si potrà cioè fare clic per eseguire la scelta corrispondente. Si può ad esempio scrivere: 

titolo("Pilota automatico")
testo("Preferisci andare su un satellite ben caldo come ")
rinvio('<img src="Io.jpg" alt="Io">', Io)
testo(" oppure su uno gelido come ")
rinvio('<img src="Ganimede.jpg" alt="Ganimede">', Ganimede)
testo(" o semplicemente tornare a ")
rinvio("casa", Terra)
testo("?")

Avendo usato rinvio() anziché scelta(), le immagini verranno inserite all'interno del testo, in questo modo:

 

È preferibile usare immagini JPEG (di solito indicate con estensione .jpg), oppure PNG (.png), tenendo presente per queste ultime che alcune versioni precedenti dei browser possono richidere un plug-in (modulo aggiuntivo) per mostrarle.

Le immagini GIF (.gif) vanno invece evitate in quanto il relativo algoritmo di compressione è coperto da brevetto ed è quindi in contrasto con lo spirito FSF-GPL (ossia "open source") della distribuzione di Idra. A maggior ragione vanno evitati i BMP di Windows o altri formati non disponibili su tutti i computer.

.jpg

 

.png

È bene inoltre aggiungere a ciascuna immagine una scritta alternativa che verrà mostrata nel caso che l'immagine stessa non possa essere mostrata, ad esempio per effetto di una scelta nelle preferenze del browser; questa scritta può anche consentire la lettura ai non vedenti che impiegano un sintetizzatore vocale.

Per introdurre la scritta si aggiunge un alt="scritta" nell'istruzione HTML che crea l'immagine; l'esempio precedente diventa quindi: 

titolo("Per Giove!")
testo('<center><img src="Giove.jpg" alt="Giove"></center>')
continua(Saturno)

Con alcuni browser e sistemi operativi, la scritta indicata con alt= verrà mostrata anche portando il puntatore del mouse sopra l'immagine e lasciandolo fermo per qualche istante.

AUsando le tecniche di programmazione illustrate nel capitolo 5, le immagini raffigurate si possono anche cambiare a seconda del valore delle variabili di gioco, come accade con le normali scelte.

Normalmente le immagini attive sono circondate da una cornice rettangolare più o meno colorata; se quest'ultima risultasse fastidiosa la si può eliminare aggiungendo border=0 nell'istruzione che le crea, in questo modo: 

rinvio('<img src="Ganimede.jpg" alt="Ganimede" border=0>', Ganimede)

Un'immagine così definita non verrà in alcun modo evidenziata quando il puntatore del mouse vi passa sopra, ma quest'ultimo cambierà forma (tipicamente in una manina) per inidcare che un clic in quel punto avrebbe un effetto.