Un compito tipico nel web design è la creazione dei bottoni; spesso questi sono animati: se il mouse sta sopra il bottone, questo verrà preselezionato, se si clicca, anche il bottone apparirà premuto.
Creazione bottoni serve esattamente a semplificare questo compito.
Una piccola anteprima mostra il bottone nello stato attuale. I pulsanti sopra consentono di passare da uno stato all’altro tra Normale, Mouse sopra e Premuto. Gli stati possono differenziarsi per colore, forma, testo e altri effetti. Per uniformare l’aspetto degli stati della terna, c’è il pulsante Uguali; se lo premi, i due stati non attivi assumono l’aspetto di quello attivo; il menu a tendina determina quali attributi verranno uniformati.
Bottone controlla lo stile grafico: Colore, Forma e misure cioè Largh. (larghezza) e Altezza. La forma può essere una tra quelle predefinite (vedi il capitolo 4.14). Stile stabilisce gli stili che puoi applicare al bottone. Questi vanno usati in maniera analoga agli stili di livello (vedi il capitolo 7.8.41).
Il settore Testo ti permette di cambiare la scritta del bottone. Testo è il contenuto della scritta. Altre opzioni sono tipo, dimensione, e Colore dei caratteri. Posiz. (posizione) modifica la posizione verticale del testo, agendo sulla linea di base. Stile ti consente di applicare uno stile al testo.
URL di destinazione definisce l’URL che verrà richiamato quando l’utente clicca sul bottone nella pagina web.
Messaggio di aiuto (Tooltip) è un piccolo messaggio che compare se il mouse si ferma per un po’ al di sopra del bottone nella pagina web.
Premendo Crea il codice appare la finestra di selezione dei file; il nome inserito in questa finestra viene utilizzato per salvare un file HTML che contiene il codice necessario a visualizzare il bottone. In più verranno creati tre file immagine con lo stesso nome, un numero progressivo e l’estensione ".gif". Il codice consta di due parti; la prima è una funzione Javascript:
<title>PhotoLine Button</title>
<script language="javascript" type="text/javascript">
Aqua1 = new Image();
Aqua1.src = "Aqua1.gif";
Aqua2 = new Image();
Aqua2.src = "Aqua2.gif";
Aqua3 = new Image();
Aqua3.src = "Aqua3.gif";
function show(buttonname, buttonvar)
{
document.images[buttonname].src=buttonvar.src;
}
</script>
La seconda è il bottone vero e proprio:
<a href="mypage.htm" target="_self" onMouseout="show('Aqua', Aqua1);" onMouseup="show('Aqua', Aqua1);" onMouseover="show('Aqua', Aqua2);" onMousedown="show('Aqua', Aqua3);">
<img src="Aqua1.gif" border="0" alt="My Button" name="Aqua"></a>
Ambo le parti devono essere copiate nelle relative sezioni della tua pagina web: la prima nell’intestazione (head), l’altra nel corpo della pagina (body).
Se vuoi più bottoni in un file HTML, la funzione "show" va messa solo una volta, ma il codice di precaricamento "Aqua1 = new Image(); ..." e quello del funzionamento si devono inserire per ogni bottone.
Se intendi usare più bottoni in un file HTML, devi dargli nomi diversi.