Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
 

Alternate text su link testuale crossbrowser

Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Una delle funzioni che Ms Explorer supporta è il testo alternativo sui collegamenti, caratteristica a volte molto utile per specificare o sottolineare l'importanza di quel testo.
Grazie ad un semplice script Dynamic Html, la mancanza di tale funzione in Netscape viene ovviata. Analizziamo in dettaglio la demo Dhtml:

.tooltip {
background-color: #ffffcc;
border-color: #000000;
border-style:solid;
border-width: 1px;
font-family: sans-serif;
font-size: 8pt;
layer-background-color: #ffffcc;
margin: 0px;
padding: 0px;
padding-left: 8px;
padding-right: 8px;
position: absolute;
visibility: hidden;
}

Nel tag <head> va inserito il codice appena visto, il quale grazie all'utilizzo di Css, permette di definire il look del testo alternativo.
Sempre nel tag <head> inseriamo il seguente Javascript:

<script language="JavaScript">
var mouseX = 0;

var mouseY = 0;

if (document.layers)
document.onmousemove = getCursor;

var mouse setta la variabile e l'evento per la cattura della traccia della posizione del cursore.
if(document.layers) viene utilizzato naturalmente per rendere la demo Netscape compatibile.

Continuiamo nell'analisi del codice presente nel tag <head>:

function getCursor(e) {
if (document.layers) {
mouseX = e.pageX;
mouseY = e.pageY;
}
if (document.all) {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
return true;
}
function showToolTip(name) {
var tip = getHandle(name);
// Clear out any pending timer.
if (tip.timerID)
clearTimeout(tip.timerID);
// Position the tool tip.
tip.left = mouseX;
tip.top = mouseY + 20;
// Show the tool tip using browser-specific code.
if (document.layers)
tip.visibility = "show";
if (document.all)
tip.visibility = "visible";

Nella parte appena esaminata viene indicata la visibilità del layer che contiene il testo alternativo e la posizione in cui deve apparire (che verrà calcolata in base al cursore).

Dopo tre secondi che l'alternate text rimane leggibile, il layer viene nascosto grazie alla seguente porzione di script:

tip.timerID = setTimeout("hideToolTip('" + name + "')", 3000);
}
function hideToolTip(name) {
var tip = getHandle(name);
// Clear out any pending timer.
if (tip.timerID)
clearTimeout(tip.timerID);
// Hide the tool tip using browser-specific code.
if (document.layers)
tip.visibility = "hide";
if (document.all)
tip.visibility = "hidden";
}
function getHandle(name) {
// Get a handle to the named tool tip using browser-specific code.
if (document.layers)
return(document.layers[name]);
if (document.all) {
var block = eval('document.all.' + name + '.style');
return(block);
}
}

Specificata la sintassi per l'animazione, vediamo come personalizzare il testo da visualizzare:

<body bgcolor="#ffffff" link="#990000" vlink="#999999" onMouseMove="getCursor()">
<div id="dhtml" class="tooltip" style="width:270px;"> Introduzione all'Html dinamico con moltissimi esempi </div>
<div id="java" class="tooltip" style="width:170px;"> Corso in italiano di base su Xml </div>
<div id="js" class="tooltip" style="width:250px;"> Recensione di libri sul web publishing high tech </div>
<div id="links" class="tooltip" style="width:226px;"> Il software per creare e gestire siti Internet </div>

L'attributo id all'interno del tag <div>, servirà successivamente per associare l'alternate text ad ogni link. Il Css in linea (caratterizzato dall'attributo style) specifica la larghezza del layer che conterrà il testo. E' importante ricordarsi di modificarlo in base al numero di caratteri presenti nella descrizione del collegamento ipertestuale.

In conclusione, analizziamo i links che richiameranno il testo alternativo:

<a href="http://www.risorse.net/dhtml" onMouseOver="showToolTip('dhtml')" onMouseOut="hideToolTip('dhtml')">Html Dinamico</a> |
<a href="http://www.risorse.net/xml" onMouseOver="showToolTip('java')" onMouseOut="hideToolTip('java')">Xml</a> |
<a href="http://www.risorse.net/libri" onMouseOver="showToolTip('js')" onMouseOut="hideToolTip('js')">Libreria</a> |
<a href="http://www.risorse.net/software" onMouseOver="showToolTip('links')" onMouseOut="hideToolTip(links')">Software</a>

All'interno dei gestori di eventi onmouseover e onmouseout, vengono associati i testi alternativi ai links con la sintassi: showToolTip('valoreID') e hideToolTip('valoreID').
 

 
 
Home > dhtml > teoria > 2000 > febbraio > ...   © 1999-2017 Risorse.net, tutti i diritti riservati