Casi pratici

  Perché e come creare un'Immagine MAP e quali sono i vantaggi?

L'Immagine MAP è una tecnologia utilizzata per rendere un'immagine interattiva. Questa tecnica può essere molto utile per la realizzazione dei menu nella presentazione personalizzata del tuo sito. Consulta questo studio comparativo per saperne di più:
http://www.oxatis.com/Help/ImageMAP/ImageMAP-IT.html

Prendiamo per esempio il menu orizzontale, l’esempio è facilmente trasferibile al menu verticale.

L'obiettivo è d’integrare direttamente il grafismo del menu nell’immagine di fondo costituente la banda orizzontale. questa tecnica presenta il vantaggio d’accelerare la visualizzazione del sito.

In effetti, se hai 10 o 15 immagini per gli elementi del tuo menu, ti ritroverai alla fine con molte più immagini assemblate per costituirlo (poiché dovrai prendere in conto i "ritagli" a sinistra, a destra, ecc. per ognuno degli elementi). Ciò è visibile direttamente nell'esempio #2 che si trova sulla presente pagina: http://www.oxatis.com/Help/ImageMAP/ImageMAP-IT.html

Integrando tutto nell'immagine di sfondo, i tuoi visitatori faranno una sola ricerca d’immagine verso il server invece di diverse decine. Il navigatore ha meno lavoro per "rendere" la composizione e l’effetto visivo è di certo migliore per il visitatore. È il caso dell'esempio #1 nella presente pagina:
http://www.oxatis.com/Help/ImageMAP/ImageMAP-IT.html

Una volta creata l’immagine di fondo (nel software come Adobe Photoshop), devi creare l'Immagine MAP corrispondente. Per farlo, puoi utilizzare un software permettendo la realizzazione di un' immagine MAP compattibile HTML.

Crea un nuovo progetto (che in fondo non è nient'altro che una semplice pagina html!), e associaci la tua immagine di sfondo. Crea, poi,le zone interattive in maniera visiva. Infine, seleziona ogni zona e assegna l'hyperlink che gli corrisponde. Ecco fatto!

Per trovare gli hyperlink, non fare MAI copia / incolla proveniente dal tuo sito. Per generare questi hyperlink, utilizza SEMPRE l'assistente hyperlink disponibile tramite il menu "Aiuto \ Assistente Hyperlink" del tuo sito d'amministrazione. Inoltre, nell'assistente hyperlink, utilizza sistematicamente l'hyperlink relativo proposto (e non l’hyperlink assoluto!)

Nota che se hai già creato i tuoi menu con il sistema Oxatis (Menu "Sito / Menu" nell'amministrazione) puoi recuperare direttamente gli hyperlink utilizzando il nostro assistente di generazione d’immagine MAP che si trova nella pagina di gestione delle presentazioni personalizzate.

Combinando i dati del tuo software HTML e gli hyperlink (href in HTML) ottieni un codice che somiglia a questo qui:

<MAP NAME="HMENU">
<AREA SHAPE="RECT" HREF="PBCPPlayer.asp?ID=65432" COORDS="848,112, 930,130">
<AREA SHAPE="RECT" HREF="PBCPPlayer.asp?ID=65425" COORDS="801,108, 836,132">
<AREA SHAPE="RECT" HREF="PBContactUS.asp" COORDS="722,112, 788,130">
<AREA SHAPE="RECT" HREF="PBCPPlayer.asp?ID=77606" COORDS="649,111, 708,130">
<AREA SHAPE="RECT" HREF="Default.asp" COORDS="28,29, 196,89">
<AREA SHAPE="RECT" HREF="PBCPPlayer.asp?ID=112683" COORDS="563,134, 620,187">
<AREA SHAPE="RECT" HREF="PBHotLinks.asp" COORDS="507,111, 548,161">
<AREA SHAPE="RECT" HREF="PBSubscribe.asp" COORDS="443,88, 490,140">
<AREA SHAPE="RECT" HREF="PBShoppingCart.asp" COORDS="378,62, 430,119">
<AREA SHAPE="RECT" HREF="PBUserAccount.asp" COORDS="308,46, 358,99">
</MAP>

Attenzione: il nome dell'immagine MAP (<MAP NAME="HMENU">) deve essere HMENU per un menu orizzontale e VMENU per un menu verticale! Senza che l'immagine sia associata e le sue zone interattive e cliccare nelle zone non avrà il minimo effetto.

1) Adatta la larghezza del sito alla larghezza dell'immagine di sfondo, di cui 980 pixels nel nostro esempio.
2) inserisci 0 nell'altezza dell'intestazione.
3) Adatta l'altezza del menu orizzontale all'altezza dell'immagine di sfondo, 206 pixels nel nostro esempio.
4) Associa l'immagine di sfondo nella sezione "Sfondo della banda orizzontale".
5) Nella sezione "Proprietà del menu orizzontale", associa un'immagine GIF trasparente per l'immagine del menu. Prendi semplicemente un'immagine GIF di qualche pixels a tal fine. (Puoi scaricarla all'indirizzo http://www.oxatis.com/Images/Transparent.gif)
6) Inserisci, poi,la Larghezza e l'Altezza dell'immagine del menu utilizzando le dimensioni della tua immagine di sfondo. Concretamente, non è possibile associare un'Immagine MAP ad un'immagine di fondo in un navigatore. Quindi, per aggirare questo problema, noi mettiamo sul fondo un'immagine trasparente che sarà associato all'immagine MAP! L'immagine trasparente deve quindi essere adattata al fondo. Per evitare eventuali conflitti di dimensioni, è forse giudizioso ridurre leggermente la larghezza e l'altezza imposta all'immagine trasparente. Nel nostro esempio, utilizzeremo 978 pixels per la larghezza e 200 per l'altezza.
7) Infine, copia il codice della tua Image MAP nella zona d'edizione "HTML associata (Image MAP)" della sezione "Proprietà del menu orizzontale".
8) Salva e prova la presentazione.
 
 Esempio di tecnica per creare un menu verticale dinamico utilizzando del codice Javascript

Nell'amministrazione del sito, vai nella pagina di gestione dei menu (Menu "Sito \ Menu"), aggiungi un elemento del menu che puoi nominare "Script" (non verrà visualizzato) e che contiene nel "Nome" seguente:
<script src="Files/12345/menu.js" type="text/javascript"></script>

(Sostituisci il 12345 con il numero del tuo account Oxatis)

Nella Galleria / File scarica il file menu.js che comprenderà del codice come:

document.write('<DIV ID=mv2></DIV>');
document.write('<STYLE TYPE="text/css">\na.mv2style {color:#FFFFFF;text-decoration:none;}\na:hover.mv2style {color:#000000;text-decoration:underlined;}\n</STYLE>');

mv2_menu = new Array();
mv2_lien = new Array();

mv2_menu[0] = 'Menu Principal 1';
mv2_menu[1] = 'Menu Principal 2';
mv2_menu[2] = 'Menu Principal 3';

mv2_lien[0] = '<A HREF="PBSCCatalog.asp?CatID=1111" CLASS=mv2style>Sous Menu 1-1</A><BR>';
mv2_lien[0] += '<A HREF="PBSCCatalog.asp?CatID=2222" CLASS=mv2style>Sous Menu 1-2</A><BR>';
mv2_lien[0] += '<A HREF="PBSCCatalog.asp?CatID=3333" CLASS=mv2style>Sous Menu 1-3</A><BR>';

mv2_lien[1] = '<A HREF="PBSCCatalog.asp?CatID=1111" CLASS=mv2style>Sous Menu 2-1</A><BR>';
mv2_lien[1] += '<A HREF="PBSCCatalog.asp?CatID=2222" CLASS=mv2style>Sous Menu 2-2</A><BR>';
mv2_lien[1] += '<A HREF="PBSCCatalog.asp?CatID=3333" CLASS=mv2style>Sous Menu 2-3</A><BR>';

mv2_lien[2] = '<A HREF="PBSCCatalog.asp?CatID=1111" CLASS=mv2style>Sous Menu 3-1</A><BR>';
mv2_lien[2] += '<A HREF="PBSCCatalog.asp?CatID=2222" CLASS=mv2style>Sous Menu 3-2</A><BR>';
mv2_lien[2] += '<A HREF="PBSCCatalog.asp?CatID=3333" CLASS=mv2style>Sous Menu 3-3</A><BR>';

mv2_pos = -1;

function mv2_menu_draw()
{
mv2_aff = "<TABLE BORDER=0 BGCOLOR=#000000 CELLPADDING=0 CELLSPACING=0 WIDTH=160><TR><TD><TABLE BORDER=0 CELLPADDING=03 CELLSPACING=1 WIDTH=100%>";

for(a=0;a<mv2_menu.length;a++)
{
if(mv2_pos == a || !document.getElementById)
bgcolor = "#6699CC";
else
bgcolor = "#006699";
if(document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><A HREF=\"#\" onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\" CLASS=mv2style><FONT FACE=\"Arial\" SIZE=2><B>"+mv2_menu[a]+"</B></FONT></A></TD></TR>";
else
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Arial\" SIZE=2 COLOR=#FFFFFF><B>"+mv2_menu[a]+"</B></FONT></TD></TR>"
if(mv2_pos == a || !document.getElementById)
mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Arial\" SIZE=1><B>"+mv2_lien[a]+"</B></FONT></TD></TR>";
}

mv2_aff += "</TABLE></TD></TR></TABLE>";
if(document.getElementById)
document.getElementById("mv2").innerHTML = mv2_aff;
else
document.write(mv2_aff);
}

mv2_menu_draw();
 
 Esempio d’integrazione di un menu in FLASH

Per integrare un menu orizzontale o verticale in FLASH, ecco le principali tappe da seguire:

Innanzitutto costituisci il tuo flash. Sii attento alla sua dimensione che deve più o meno corrispondere al posto disponibile sul sito.

Per trovare gli hyperlink, non fare MAI copia / incolla provenienti dal tuo sito. Per generere questi hyperlink, utilizza SEMPRE l'assistente hyperlink disponibile tramite il menu "Aiuto \ Assistente Hyperlink" del tuo sito d'amministrazione. Inoltre, nell'assistente hyperlink, utilizza sistematicamente l'hyperlink relativo proposto (e non l’hyperlink assoluto!)

Scaricare il tuo file flash nella galleria dei file del tuo sito.

Vai, poi, nella pagina accessibile dal menu "Siti \ Proprietà per lingua" e aggiungi il seguente codice nel "Blocco di testo libero inserito nell'intestazione HTML (<HEAD/>)":
<script src="Javascript/FlashActiveContent/AC_RunActiveContent.js" type="text/javascript"></script>

Completa, poi, la presentazione: (i valori sono dati a titolo indicativo, devono semplicemente essere omogenee).

Dimensioni e posizionamento
Allineamento del sito: Centrato rispetto allo schermo
Larghezza del sito : 980 pixels
Larghezza della banda verticale : 180 pixels
Altezza dell'intestazione : 0 pixels
Altezza del menu orizzontale : 130 pixels

Proprietà del menu orizzontale
Spostamento sull'asse X : 0 pixels
Spostamento sull'asse Y : 0 pixels
Allineamento orizzontale: Centro
Allineamento verticale: Basso

Immagine :
Larghezza dell'immagine : 0 pixels
Altezza dell'immagine : 0 pixels

HTML associato (Image MAP) :
<script type="text/javascript">
AC_FL_RunContent(
'codebase','http://active.macromedia.com/flash2/cabs/swflash.cab#version=6,0,0,0',
'id','banner',
'width','845',
'height','181',
'src','Files/12345/MyMenu',
'quality','autohigh',
'pluginspage','http://www.macromedia.com/go/getflashplayer',
'movie','Files/12345/MyMenu' ); //end AC code
</script>
<noscript>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=6,0,0,0"
ID=banner WIDTH=845 HEIGHT=181>
<PARAM NAME=movie VALUE="Files/12345/MyMenu.swf">
<PARAM NAME=quality VALUE=autohigh>
<EMBED SRC="Files/12345/MyMenu.swf" swLiveConnect=FALSE WIDTH=845 HEIGHT=181 QUALITY=autohigh TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</noscript>

Margine interiore delle cellule (padding) : 0
Margine interiore degli elementi (padding) : 0
Separatore Sinistro:
Separatore Destro:

Nota: l'utilizzazione di flash necessita l'installazione da parte del cliente sul suo PC (altrimenti gli verrà proposto automaticamente) e che certi PC dotati di strumenti di sicurezza Internet obbligano a cliccare sulla zona contenente il flash per attivarlo.
 

Aggiungi ai preferiti: http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=512&TID=55026&MID=4000&LangID=4
© 2001-2019 Oxatis. Tutti i diritti riservati.