 Buono sconto 4% su Toner e Cartucce agli utenti AZpoint. SU Iomiricarico.it!!
Articolo di Luca Ruggiero - http://www.lukeonweb.net
Abbiamo già visto nell'articolo "Un semplice menu per Dreamweaver" com'è possibile creare una serie di link, o se vogliamo essere precisi un menu, disposto in maniera da evidenziare il link corrispondente alla pagina corrente, in modo da aumentare la navigabilità e far capire all'utente in che sezione del sito che stà visitando si trova.
L'articolo appena citato realizza un menu del genere con le immagini e con una serie di lunghe e pastose funzioni, il cui codice è ridondante e poco leggibile, quasi assurdo da modificare in funzione delle proprie esigenze.
In questo Aticolo, invece, realizzeremo si lo stesso tipo di applicazione, ma utilizzando del testo al posto delle immagine, quantunque sia possibile anche utilizzare le immagini o qualsiasi altro elemento Htrml al posto dei link testuali.
Facciamo un attimo il punto della situazione e rendiamoci conto di cosa abbiamo bisogno, e perchè.
Ipotizziamo di avere un menu che punti a tutte le principali sezioni del nostro sito; per creare un esempio semplice e snello ipotizzo di avere i link alla homepage, alla pagina dei contatti ed a quella del forum.
Creiamo quindi i file
- homepage.html
- forum.html
- email.html
i cui codici di base si differenziano solo per il o per altri elementi grafici e logici che non mensionerò:
<pre>
<font color=red>
<html>
<head>
<title>homepage</title>
<basefont size="2" face="Verdana">
</head>
<body link="#0000FF" alink="#0000FF" vlink="#0000FF">
<script language="javascript" src="menu.js"></script>
</body>
</html>
</font></font></pre>
<p align=justify>
Un'analogia per tutti i file che si andrà a creare è l'inclusione del file menu.js in cui costruiremo fisicamente il menu: è quindi opportuno includerlo nella porzione di codice in cui si vuole che il menu compaia poi sulle nostre pagine Html.
<br><br>
Utilizzeremo come parametro di identificazione della pagina corrente il nome del file corrente, reperendolo all'interno della barra degli indirizzi del browser; se la condizione si verifica, cioè se la stringa "nomefile.estensione" viene trovata, evidenzieremo la voce del menu di riferimento in grassetto (o con qualsiasi altra stilizzazione a gusto dello sviluppatore), altrimenti la mostreremo con lo stesso stile delle altre voci di menu non corrispondenti alla pagina corrente.
<br><br>
Posso assicurarvi che è un'applicazione molto più lunga a dirsi che a farsi! Vediamo quindi il codice opportunamente commentato che compone il menu, all'interno del file menu.js:
<br>
<br>
<font color=red>
<b>// Inizializzo la variabile identificativa dell'indirizzo della pagina corrente</b><br>
var QUESTA_PAGINA = document.URL;<br><br>
document.write("<div>");<br>
if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))<br>
{<br>
<b> // Stampo a video la voce della pagina NON corrente</b><br>
document.write(":: <a href='homepage.html'>homepage</a>");<br>
}<br>
else<br>
{<br>
<b> // Stampo a video la voce della pagina corrente evidenziata in grassetto</b><br>
document.write(":: <a href='homepage.html'><b>homepage</b></a>");<br>
}<br>
<br>
document.write("<br>");<br>
<br>
if (QUESTA_PAGINA.indexOf("forum.html") == (-1))<br>
{<br>
document.write(":: <a href='forum.html'>forum</a>");<br>
}<br>
else<br>
{<br>
document.write(":: <a href='forum.html'><b>forum</b></a>");<br>
}<br>
<br>
document.write("<br>");
<br><br>
if (QUESTA_PAGINA.indexOf("email.html") == (-1))<br>
{<br>
document.write(":: <a href='email.html'>email</a>");<br>
}<br>
else<br>
{<br>
document.write(":: <a href='email.html'><b>email</a></b>");<br>
}<br>
<br>
document.write("</div>");</font>
<br><br>
Prendiamo adesso la parte di codice clou dello script, quella che setta la condizione per la verifica della pagina corrente: <br><br>
<font color=red>
if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))<br></font><br>
Il metodo di tipo String indexOf() effettua la ricerca della stringa specificata tra parentesi e doppi apici; settiamo l'uguaglianza sul valore -1 nel caso in cui la pagina non sia quella corrente e non vada quindi evidenziata in grassetto.
<!-- Copiare è reato. Tutti i diritti riservati www.AZPoint.net .-->
</p>
<!-- JuiceADVStopCrawler -->
<!-- <JuiceADV_StopCrawler> -->
</td>
</tr>
</table>
<a name="giù"></a>
</td>
</tr>
<tr>
<td colspan="2" class="text_index_news" align="center">
<table width="520" bgcolor="#F0F0DF" border="1" bordercolor="#F0F0DF" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" class="text_index_news">
<script language="JavaScript" src="http://www.juiceadv.com/banner_ext.asp?User=24&Tipo=21"></script>
</td>
</tr>
</table>
<br><br>
<a href=''><b>[Indietro]</a>
<A HREF="#top">[Su]</A>
<A HREF="index.asp">[Home]</A>
<A HREF="#inizio_commenti">[Commenti]</A>
<A href="stampa.asp?id=5500">[V. Stampabile]</A></b>
<br><br>
</p>
</td>
</tr>
<tr>
<td>
</td>
<td colspan=1 width=100%>
<!-- Inizio zona commenti -->
<a name="inizio_commenti">
<p align="center">
<form name="commenta_news" action="commenta.asp" method="post">
<input type="hidden" name="ID_News" id="ID_News" value="5500">
<input type="hidden" name="Action" id="Action" value="1">
<script language="JavaScript">
function Apri2(act){
document.commenta_news.Action.value=act;
document.commenta_news.submit();
}
</script>
<font size=2 color=#CC1F02>
<b>Commenta questa notizia:</b><br>
<font size=2 color=#000000>
Non hai ancora fatto il <b><a href="JavaScript:Apri2(2)">Login</a></b>, puoi inserire commenti solo come anonimo.<br>
<b>ATTENZIONE:</b> il tuo <b>IP</b> verrà memorizzato e mostrato a fianco del commento; con la pressione del tasto <i>invia commento</i>
si esprime il consenso alla pubblicazione di tale informazione personale.<br>
A discrezione dello staff, i commenti ritenuti non adatti od offensivi potranno essere rimossi.
Nel caso di utilizzo di espressioni volgari od offensive il comportamento verrà segnalato al provider interessato.<br>
Se non ti sei ancora registrato, cosa aspetti? <b><a href="registrati.asp" target="_new">Registrati</a></b> subito.</font><br>
<u>Da ora puoi discutere dei problemi informatici anche sul nostro <a href=http://forum.azpoint.net><b>FORUM</b></a></u><br><br>
<font size=2 color=#CC1F02>
Testo del commento:<br>
<textarea name="testo" id="testo" cols="80" Rows="8" style='BACKGROUND-COLOR: #DCDCC2; BORDER-COLOR: #000000;'></textarea><br>
<Input type="submit" value="Invia commento" style='BACKGROUND-COLOR: #CCBF99; BORDER-COLOR: #000000;'><br>
<input style="visibility:hidden" name="testo2">
</font>
</form>
</p>
<!-- Fine zona commenti -->
<br>
<p align=center>
</p><br>
</td>
</tr>
</table>
<!--<script language="JavaScript" src="http://www.juiceadv.com/banner_ext.asp?User=24&Tipo=100&cat=2&nkey=4"></script>-->
</td>
<td WIDTH="210" valign=top bgcolor=#41484F>
<table bgcolor="#41484F" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#41484F" class="text_dxmen" valign="top" align="left" height="260" cellpadding="0" cellspacing="0">
<table align="center" bordercolor="#5b5b5b" width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#111111">
<tr>
<td class="text_index_news" valign="top" bgcolor="#111111" height="22">
<img src="img/forum.gif" width="20" height="20" align="absmiddle">
<b><font color="#FFFF00" size="2">News correlate</font></b>
</td>
</tr>
<tr>
<td class="text_index_news" valign="top" bgcolor="#dedede">
<p align="left"><font size="1">
<img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=13744">Impedire la selezione del contenuto di una pagina.</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=7106">Proprietà e metodi dell'oggetto Math</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5500">Voci di menu evidenziate in base alla pagina corrente</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5497">Conteggio dei caratteri di una Textarea senza spazi</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5319">Form gestire inserimento dati</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5316">Immagine casuale all'apertura della pagina</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5282">Caricare un foglio di stile esterno a seconda del Browser in uso</a><br><img height="5" src="img/puntogiallo.gif" width="5" align="absmiddle"> <a href="articoli.asp?id=5037">Il link 'Organizza Preferiti'</a><br>
</td>
</tr>
</table>
<br>
<table width="190" align="center"><tr><td align=center>
<DIV style="BORDER-RIGHT: #41484f 1px solid; background-color:#ffffff; BORDER-TOP: #41484f 1px solid; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; BORDER-LEFT: #41484f 1px solid; WIDTH: 190px; COLOR: #000000; BORDER-BOTTOM: #000000 2px solid; FONT-FAMILY: Verdana; TEXT-ALIGN: center; TEXT-DECORATION: none" align=center>
<A href="http://hosting.aruba.it/"><IMG width="190" src="http://www.azpoint.net/aruba_lungo.gif" border=0></A>
<A style="COLOR: black" href="http://hosting.aruba.it/"><b>Domini Email SpazioWeb</b></A><BR>a partire da € 9.99+IVA annui </DIV>
</td></tr></table>
<table width="190" align="center"><tr><td align=center>
<a href="http://www.juiceadv.com/banner_showext.asp?url=222733" target="_blank">
<img src="http://www.juiceadv.com/banner_ext3.asp?ID=222733" width="190" height="180" border="" title="Cartucce Compatibili">
</a>
</td></tr></table>
</td>
</tr>
</table>
<br/><div align="center">
<script language="JavaScript" src="http://www.juiceadv.com/banner_ext.asp?User=24&Tipo=5"></script>
</div><br/>
<table bordercolor="#5b5b5b" width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#111111">
<tr>
<td class="text_index_news" valign="top" bgcolor="#111111" height="22">
<img src="img/forum.gif" width="20" height="20" align="absmiddle">
<a href="http://forum.azpoint.net"><b><font color="#FFFF00" size="2">Ultime dal Forum</font></b></a>
</td>
</tr>
<tr>
<td class="text_index_news" valign="top" bgcolor="#7b7b7b">
<p align="left"><font color="#FFFFFF" size="1">
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2993">
PER LE PRIME 20 PERSONE CHE MI CONTATTANO OFFRO..</a><br>
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2992">
Come trovo Advertisers?</a><br>
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2991">
Metodo per gudagnare 0,50$/1$ al giorno</a><br>
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2990">
2.5 CENT DI EURO A CLICK</a><br>
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2989">
VEDIAMO CHI CLICCA!</a><br>
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2988">
Guadagnare Senza pericolo con le scommesse</a><br>
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2987">
Guadagnare soldi con GDI</a><br>
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2986">
PinkPTC</a><br>
<img src="img/puntogrigio.gif" width="8" height="8">
<a style=color:#FFFFFF; href="http://forum.azpoint.net/index.php?showtopic=2985">
Fai lavorare i tuoi soldi</a><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="976" cellpadding="0" cellspacing="0" bgcolor="#41484F" align=center>
<tr>
<td class="text_azzurro_p" align="center">
<table border=0 #41484F>
<tr>
<td class="text_azzurro_p">
<a style=color:#FFFFFF; href="novità.asp" >Comunicazioni</a>
</td>
<td class="text_azzurro_p">
/ <a style=color:#FFFFFF; href="diritti.asp">Note Legali</a>
</td>
<td class="text_azzurro_p">
/ <a style=color:#FFFFFF; href="staff.asp">Staff</a>
</td>
<td class="text_azzurro_p">
/ <a style=color:#FFFFFF; href="collabora.asp">Collabora</a>
</td>
<td class="text_azzurro_p">
/ <a style=color:#FFFFFF; href="pubb.asp">Pubblicità</a>
</td>
<td class="text_azzurro_p">
/ <a style=color:#FFFFFF; href="contatti.asp">Contatti</a>
</td>
</tr>
</table><br><br>
<font color=FFFFFF>Copyright <a href=http://www.zeta-tech.net style=color:FFFFFF><b>ZETA TECH S.r.l.</b></a> (P.IVA : 02387250307), tutti i diritti riservati</font>
<font color=FFFFFF>Utenti Connessi: <b>570</b></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p align=center>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="768">
<tr>
<td align="center" class="text_index_news">
</td>
</tr>
</table>
<font size=2>
<a style=color:FFFFFF; href="http://www.programmi.com" title="Programmi" alt="Programmi">Programmi</a><br>
</font>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-72025-1";
urchinTracker();
</script>
</center>
</div>
</p><p align=center>
<font color=FFFFFF><font color="#94D0F6" size=1><br>Pagina creata in 0.11sec. <font size=1><i>Powered by <a style="color:#FFFFFF;" href="http://www.zeta-tech.net/">Zeta Tech S.r.l.</a></i></font>
</font>
<br><img src="img/stats.gif" width="25" height="22" alt="Stats v0.1 (0.000sec.)"></font><br></p>
<p align=center>
</p>
<!--<a href="http://ad.zanox.com/ppc/?8613275C74572391T"><img src="http://ad.zanox.com/ppv/?8613275C74572391" align="bottom" width="300" height="40" border="0" hspace="1" alt="001c Logo 300x40"></a>-->
<script language="javascript" src="http://www.juiceadv.com/banner_ext.asp?User=24&Tipo=70"></script>
<!--<script language="JavaScript" src="http://www.juiceadv.com/banner_ext.asp?User=24&Tipo=101&nkey=4"></script>-->
</BODY>
</HTML>
| 
Shopping
