Front Page è un modesto software per sviluppare pagine Html di qualsivoglia complessità, è un ottimo strumento di approccio alla materia anche se non particolarmente pretenzioso, ma può tornare molto utile in più di un'occasione.
In questo articolo affronteremo un argomento particolarmente interessante per un grafico, vedremo come realizzare su una singola immagine una serie di link distinti tra loro, generando più aree sensibili al passaggio del mouse.
Per fare questo Front Page scrive in automatico una serie di codici Html di non difficile comprensione per chi ha solo anche una lieve infarinatura del linguaggio, al termine della lettura dell'articolo sarà del tutto chiaro il perchè della scelta di Front Page 2000 per una simile esigenza.
Per prima cosa abbiamo bisogno di un'unica immagine su cui ci sia disegnato un menu "testuale" o grafico che sia, per l'esempio potete utilizzare quello di esempio che mostro qui sotto:
Sarete certamente più bravi di me a creare un'immagine migliore :-) ma per un semplice esempio questa è più che sufficiente!
Avviamo la nostra copia di Front Page 2000, ci ritroveremo nella maschera Normale, ovvero quella da cui è possibile disegnare in maniera visuale le pagine Html, inseriamo un'immagine utilizzando l'apposito bottone nella barra degli strumenti in alto 
ed inseriamo l'immagine di esempio che chiameremo ad esempio menu.gif.
Clicchiamo una sola volta sull'immagine sempre restando nella maschera Normale, in modo da selezionarla, a questo punto si attiverà il menu delle immagini nella parte inferiore del quadro, se non lo visualizzate probabilmente è necessario l'opzione dal menu Visualizza > Barre degli strumenti > Immagini.
Allo scopo di realizzare quanto detto fino a questo momento ci interessano queste tre icone
che rappresentano le modalità di selezione delle aree dell'immagine da rendere sensibili, quindi linkabili, al passaggio del mouse, la prima permette di selezionare un'area quadrata o rettangolare, la seconda ci permette di tracciare una circonferenza o altre forme tondeggianti e la terza permette di realizzare tracciati anche sconnessi per seguire, ad esempio, una forma come un volto umano o cose del genere.
Tracciare la mappa sull'immagine
Per il nostro esempio sarà sufficiente utilizzare la prima, quindi selezioniamo il quadrato, a questo punto il puntatore del mouse si trasformerà in una matita, possiamo adesso selezionare la scritta Homepage, appena lasciamo il tasto sinistro del mouse ci apparirà questa finestra
che ci chiederà di inserire il collegamento ipertestuale a cui l'area selezionata si dovrà riferire, possiamo farlo adesso, oppure annullare l'operazione e scrivere gli indirizzo dopo a mano da codice, compiamo in ogni caso la stessa operazione di selezione per tutte le voci del nostro menu, riselezionando di volta in volta lo strumento di selezione quadrato.
Se andiamo a vedere il codice che Front Page 2000 ha generato in automatico, avremo un risultato del genere:
<map name="FPMap0">
<area href="http://www.lukeonweb.net" shape="rect" coords="3, 6, 79, 23">
<area href="http://www.lukeonweb.net/forum" shape="rect" coords="4, 37, 51, 54">
<area href="http://www.lukeonweb.net/mailinglist" shape="rect" coords="2, 68, 76, 86">
<area href="http://www.lukeonweb.net/chat" shape="rect" coords="3, 100, 41, 117">
</map>
<img border="0" src="https://static.html.it/app/uploads/documenti/articoli/img/articoli_pro/images/fp4/menu.gif" usemap="#FPMap0" width="88" height="122">
che ho io in parte modificato, sia giustificando il codice in maniera più chiara e leggibile, sia modificando il source dell'immagine dal percorso assoluto del file sul nostro Hard Disk al percorso relativo all'interno della cartella del nostro sito, in questo caso la stessa che contiene anche il file Html che stiamo generando con Front Page.
Commentiamo i singoli passaggi del codice, utilizziamo il Tag <map name="FPMap0"> per creare una mappa di immagine a cui assegniamo anche un nome, che possiamo all'occorrenza anche cambiare secondo le nostre esigenze o gusti, a questo punto vengono automaticamente generati dei Tag che somigliano molto da vicino ai classici collegamenti ipertestuali dell'Html:
<area href="http://www.lukeonweb.net" shape="rect" coords="3, 6, 79, 23">
L'attributo shape="rect" definisce il tipo di selezione che abbiamo effettuato, ovvero quella col bottoncino raffigurante un quadrato, l'attributo coords="3, 6, 79, 23", invece, definisce le coordinate che deve avere l'immagine nelle varie aree rese sensibili.
La praticità di utilizzare Front Page 2000 per un'esigenza del genere è dunque palese, immaginiamo di doverci mettere con tanto di pazienza a trovare le coordinate delle aree sensibili ad occhio... per quanto io personalmente sia un cultore del codice e non dei programmi visuali, credo che fare una cosa del genere sia da manicomio!
In fine troviamo l'attributo usemap="#FPMap0" nel codice che richiama l'immagine che imposta questa specifica immagine come proprietaria della mappa creata, ricordiamoci di modificare il nome anche qui se lo abbiamo fatto anche in precedenza nella mappa.
Questo è il risultato dell'esempio:
Buon divertimento a tutti :-)
