Tasto destro del mouse ed effetti dinamici
HTML dinamico consente di gestire eventi relativi al tasto destro del mouse per organizzare menu ed elenchi di link
Il ruolo ricoperto dal tasto destro del mouse nell'ambito della navigazione in Rete può essere, a seconda dei casi e delle abitudini dei navigatori marginale o fondamentale. Anche se le toolbar del browser contengono tutti i riferimenti necessari alla navigazione e al salvataggio delle pagine, oltre alle opzioni necessarie alla configurazione, l'uso di questa funzionalità in molti casi può rivelarsi molto utile per velocizzare la navigazione. Si pensi, per esempio, al salvataggio delle immagini o la loro impostazione sullo sfondo del desktop.
Attraverso l'uso di codice JavaScript è possibile inibire l'uso del tasto destro del mouse in Microsoft Internet Explorer 4/5 e Netscape Navigator 4. La prima parte del codice necessario al funzionamento del suddetto script va inserita all'interno dei campi <HEAD> del documento che si intende proteggere:
<SCRIPT LANGUAGE="JavaScript1.1">
<!-- Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Spiacenti, il tasto destro del mouse è disabilitato");
return false;
}
return true;
}
document.onmousedown=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=right;
// End -->
</script>
L'avviso generato all'interno della finestra di alert del browser Microsoft è visualizzato al momento del clic sul tasto destro. Netscape, al contrario, si limita a non visualizzare il menu che alla pressione del tasto come normalmente accade. La seconda parte di codice JavaScript va inserita oltre la chiusura del tag </HTML>:
Il diverso comportamento dei due browser nel caso esemplificato dal file "esempio01.html" (nel Cd-Rom allegato): alla pressione del tasto destro del mouse Internet Explorer visualizza una finestra di alert, mentre Netscape si limita a vanificare l'effetto della pressione del tasto, senza visualizzare alcunché
<SCRIPT LANGUAGE"JavaScript1.1">
<!-- Begin
for (var i=0; i<document.images.length; i++)
document.images[i].onmousedown=right;
for (var i=0; i<document.links.length; i++)
document.links[i].onmousedown=right;
// End -->
</script>
Per evitare che l'utente possa visualizzare il codice della pagina esistono vari accorgimenti. Per esempio, facendo in modo di eliminare la toolbar dal browser e lanciando una nuova finestra che ne sia priva. In questo modo (come mostrato nel file "esempio02.html" contenuto nel Cd-Rom) il visitatore non potrà attivare le opzioni della toolbar né il tasto destro del mouse.
Esempio02_exp1.eps
Esempio02_exp2.eps (questa immagine va sovrapposta alla prima in modo che in questa si veda la cornice del browser e la voce "Clicca qui"
Per evitare che l'utente possa visualizzare il codice di una pagina è possibile, per esempio, fare in modo che, ciccando sulla voce di menu, si apra una nuova finestra priva di toolbar e delle funzionalità del tasto destro del mouse. Anche in questo caso Internet Explorer e Netscape Navigator si comportano diversamente: il primo visualizzerà un'alert, il secondo non visualizzerà nulla
Anche in questo caso, i più smaliziati potranno richiamare il file dalla cache del browser per visualizzarlo con un editor Html sul proprio hard disk; ma la cosa è un po' più macchinosa.
Esempio03.html
La demo di questo mese - che nella pratica si traduce in poche e chiare righe di codice - concentra in sé le caratteristiche della semplicità e dell'utilità: cliccando sul tasto destro del mouse in qualsiasi punto del documento viene attivato un menu del tutto simile a quello di default del browser, ma totalmente personalizzabile sia negli aspetti cromatici sia nei link. L'unico limite è l'esclusiva compatibilità della demo in questione con Microsoft Internet Explorer 5. Gli utilizzatori delle precedenti versioni di MSIE e di tutte le versioni di Netscape attualmente in commercio non visualizzano l'effetto dinamico, ma neanche fastidiosi errori negli script.
Esempio03_exp.eps
Il file "esempio03.html" mostra come, con MSIE 5, sia possibile, premendo il tasto destro del mouse, attivare in qualsiasi punto del documento, un menu del tutto simile a quello di default del browser, ma totalmente personalizzabile sia negli aspetti cromatici sia nei link un menu
Per prima cosa è necessario impostare i fogli di stile necessari alla definizione degli aspetti grafici e del layout del menu:
<style>
<!--
#ie5menu{
position:absolute;
width:140px;
border:2px solid black;
background-color:Silver;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.menuitems{
padding-left:15px;
padding-right:15px;
}
-->
</style>
width:140px;
indica la misura orizzontale in pixel della finestra di menu.
border:2px solid black;
Indica lo spessore in pixel del bordo della finestra
background-color:Silver;
Determina il colore di sfondo. Solitamente i menu sono contrassegnati dal colore grigio chiaro (silver), come in questo caso.
font-family:Verdana;
Il tipo di carattere utilizzato. In questo caso è buona regola utilizzare una font comunemente supportata dai sistemi Windows e Mac.
line-height:20px;
Distanza verticale, espressa in pixel, tra le varie voci del menu.
cursor:default;
Il tipo di cursore visualizzato quanto il mouse passa sulle voci. Impostando default il browser richiama la classica freccia rivolta a sinistra verso l'alto. Altre possibili alternative sono: crosshair, auto, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help.
visibility:hidden;
La proprietà visibility imposta la visibilità di un elemento in base all'elemento "1genitore". Se, come in questo caso, la proprietà viene impostata su hidden, l'elemento ignora qualsiasi valore ereditato e viene nascosto finché le impostazione del codice successivo non ne richiameranno l'utilizzo. L'impostazione hidden non elimina i contenuti dal flusso del documento, ma li rende soltanto trasparenti. In questo modo, potranno essere richiamati in qualsiasi momento.
padding-left:15px;
padding-right:15px;
Questi attributi definiscono la spaziatura di riempimento in pixel tra i lati del menu e gli elementi al suo interno.
Impostati gli stili del menu proseguiamo occupandoci delle funzioni showmenuie5, hidemenuie5, highlightie5 e lowlightie5.
Le prime due mostrano e nascondono il menu al flusso del documento. Come accennato in precedenza, la demo è compatibile esclusivamente con Internet Explorer 5, e per questa ragione non sono presenti riferimenti a layer e codice crossbrowser.
clientX e clientY fanno riferimento alle coordinate del puntatore del mouse relative all'area client della finestra. In particolare showmenuie5 mostra il menu, mentre hidemenuie5 ne nasconde la vista al flusso dei dati.
Il colore del testo e dello sfondo delle voci attive di menu sono definite dal codice:
function highlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="blue"
event.srcElement.style.color="yellow"
if (display_url==1)
window.status=event.srcElement.url
Dove backgroundColor="blue" è il colore di sfondo delle voci attivate dal mouse, e .color="yellow" è il colore del testo.
Il colore dei link sfiorati in precedenza - ma non più attivi - è definito dal codice:
function lowlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
Dove .color="black" è il colore di testo impostato.
L'ultima funzione:
function jumptoie5(){
if (event.srcElement.className=="menuitems")
window.location=event.srcElement.url
Consente al browser di raggiungere l'Url desiderato al clic del mouse sulle voci del menu.
Le voci di menu vanno inserite all'interno della marcatura DIV:
<div id="ie5menu" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
Dove:
· il gestore di eventi onMouseover richiama la funzione "highlightie5()" al passaggio del mouse sulle voci del menu
· il gestore di eventi onMouseout richiama la funzione "lowlightie5()" quando il mouse lascia l'area di link
· il gestore di eventi onClick richiama la funzione "jumptoie5()" per raggiungere l'Url corrispondente al clic del mouse.
Le singole voci del menu, all'interno del body del documento, sono definite dal codice:
<div class="menuitems" url="http://www.link1.com">Primo link</div>
<div class="menuitems" url="http://www.link2.com">Secondo link</div>
<div class="menuitems" url="http://www.link3.com">Terzo link</div>
<div class="menuitems" url="http://www.link4.com">Quarto link</div>
<div class="menuitems" url="http://www.link5.com">Quinto link</div>
<hr>
<div class="menuitems" url="mailto:email@link.com">Email</div>
Nessun particolare accorgimento è richiesto per l'aggiunta di nuove voci.
Infine, va inserito all'interno del documento il seguente codice, senza il quale la demo non produce i suoi effetti:
<script language="JavaScript1.2">
document.oncontextmenu=showmenuie5
if (document.all&&window.print)
document.body.onclick=hidemenuie5
</script>
|