Acronimo BBcode

[Astro86]

Questo BBCode ha la funzione di far conoscere il significato di un Acronimo semplicemente spostando il mouse sul testo abbreviato o che si vuol far vedere una descrizione o il suo significato.

Iniziamo.

Passo 1.
Aprite il blocco note e copiate questa script

Codice: Seleziona tutto

  function TOOLTIP() {
//----------------------------------------------------------------------------------------------------
// Configurazione
//----------------------------------------------------------------------------------------------------
    this.width = 200;                     // width (pixels)
    this.bgColor = '#FFFFC0';             // background color
    this.textColor = '#A00000';           // text color
    this.borderColor = '#D00000';         // border color
    this.opacity = 80;                    // opacity (percent) - doesn't work with all browsers
    this.cursorDistance = 5;              // distance from cursor (pixels)

    // Non modificare!
    this.text = '';
    this.obj = 0;
    this.sobj = 0;
    this.active = false;

// -------------------------------------------------------------------------------------------------------
// Functions
// -------------------------------------------------------------------------------------------------------
    this.create = function() {
      if(!this.sobj) this.init();

      var t = '<table border=0 cellspacing=0 cellpadding=4 width=' + this.width + ' bgcolor=' + this.bgColor + '><tr>' +
              '<td align=center><font color=' + this.textColor + '>' + this.text + '</font></td></tr></table>';

      if(document.layers) {
        t = '<table border=0 cellspacing=0 cellpadding=1><tr><td bgcolor=' + this.borderColor + '>' + t + '</td></tr></table>';
        this.sobj.document.write(t);
        this.sobj.document.close();
      }
      else {
        this.sobj.border = '1px solid ' + this.borderColor;
        this.setOpacity();
        if(document.getElementById) document.getElementById('ToolTip').innerHTML = t;
        else document.all.ToolTip.innerHTML = t;
      }
      this.show();
    }

    this.init = function() {
      if(document.getElementById) {
        this.obj = document.getElementById('ToolTip');
        this.sobj = this.obj.style;
      }
      else if(document.all) {
        this.obj = document.all.ToolTip;
        this.sobj = this.obj.style;
      }
      else if(document.layers) {
        this.obj = document.ToolTip;
        this.sobj = this.obj;
      }
    }

    this.show = function() {
      var ext = (document.layers ? '' : 'px');
      var left = mouseX;

      if(left + this.width + this.cursorDistance > winX) left -= this.width + this.cursorDistance;
      else left += this.cursorDistance;

      this.sobj.left = left + ext;
      this.sobj.top = mouseY + this.cursorDistance + ext;

      if(!this.active) {
        this.sobj.visibility = 'visible';
        this.active = true;
      }
    }

    this.hide = function() {
      if(this.sobj) this.sobj.visibility = 'hidden';
      this.active = false;
    }

    this.setOpacity = function() {
      this.sobj.filter = 'alpha(opacity=' + this.opacity + ')';
      this.sobj.mozOpacity = '.1';
      if(this.obj.filters) this.obj.filters.alpha.opacity = this.opacity;
      if(!document.all && this.sobj.setProperty) this.sobj.setProperty('-moz-opacity', this.opacity / 100, '');
    }
  }

//----------------------------------------------------------------------------------------------------
// Costruzione layer, ottenere le coordinate del mouse e larghezza della finestra, per creare il tooltip
//----------------------------------------------------------------------------------------------------
  var tooltip = mouseX = mouseY = winX = 0;

  if(document.layers) {
    document.write('<layer id="ToolTip"></layer>');
    document.captureEvents(Event.MOUSEMOVE);
  }
  else document.write('<div id="ToolTip" style="position:absolute; z-index:99"></div>');
  document.onmousemove = getMouseXY;

  function getMouseXY(e) {
    if(document.all) {
      mouseX = event.clientX + document.body.scrollLeft;
      mouseY = event.clientY + document.body.scrollTop;
    }
    else {
      mouseX = e.pageX;
      mouseY = e.pageY;
    }
    if(mouseX < 0) mouseX = 0;
    if(mouseY < 0) mouseY = 0;

    if(document.body && document.body.offsetWidth) winX = document.body.offsetWidth - 25;
    else if(window.innerWidth) winX = window.innerWidth - 25;
    else winX = screen.width - 25;

    if(tooltip && tooltip.active) tooltip.show();
  }

  function toolTip(text, width, opacity) {
    if(text) {
      tooltip = new TOOLTIP();
      tooltip.text = text;
      if(width) tooltip.width = width;
      if(opacity) tooltip.opacity = opacity;
      tooltip.create();
    }
    else if(tooltip) tooltip.hide();
  }

Salvatelo in tooltip.js (mi raccomando alla sua estensione) e caricatelo nella root del vostro forum dentro una cartella chiamata js (ovviamente se non c'è createla voi)

Passo 2.
Aprite /styles/VOSTRO STILE/template/overall_header.html
cercate

Codice: Seleziona tutto

</head>

e prima aggiungere

Codice: Seleziona tutto

<script language="JavaScript" src="js/tooltip.js"></script>

Passo 3.
Caricare questa immagine in images/

mini-help.png

Passo 4.
Accedere al vostro forum e andare nel pannello amministrativo per aggiungere un nuovo BBCode e inserite:

Uso del BBCode

Codice: Seleziona tutto

[acronimo={SIMPLETEXT1}]{SIMPLETEXT2}[/acronimo]

Trasforma in HTML

Codice: Seleziona tutto

<p><img src="vostro sito/images/mini-help.png"/><a href="#" onMouseOver="toolTip('{SIMPLETEXT2}', 130)" onMouseOut="toolTip()">{SIMPLETEXT1}</a></p>

NB: Modificare vostro sito con il dominio del vostro sito ad esempio http://www.phpbbitalia.net
Aiuto in linea
[acronimo=Testo]Descrizione[/acronimo]

Spuntare Mostra nella pagina di scrittura e salvate il tutto

Fine

Se avete fatto tutto correttamente ecco il risultato

demo.png

Per personalizzare la grafica potete modificare queste stringhe

Codice: Seleziona tutto

 this.width = 200;                     // width (pixels)
    this.bgColor = '#FFFFC0';             // background color
    this.textColor = '#A00000';           // text color
    this.borderColor = '#D00000';         // border color
    this.opacity = 80;                    // opacity (percent) - doesn't work with all browsers
    this.cursorDistance = 5;              // distance from cursor (pixels)

in tooltip.js
Problemi e Limiti
Questi sono alcuni problemi e limiti della script che smanettandoci un po possono essere superati
1. Si può inserire sono testo normale A-Z - a-z - 0-9, testo speciale come ",),=,caratteri accentati, non faranno funzionare la script.
2. Il testo dovrà essere un testo corto (più o meno i caratteri mostrati nella demo) altrimenti non funzionerà

[Lady R]

BBCode:

Codice: Seleziona tutto

[tp="{SIMPLETEXT1}"]{TEXT1}[/tp]

HTML:

Codice: Seleziona tutto

<span class="allise-tooltip" title="{SIMPLETEXT1}">{TEXT1}</span>

Utilizzo:

Codice: Seleziona tutto

[tp="Internet Protocol Addres"]Indirizzo IP[/tp]

Versione senza javascript ed un po più semplice


è possibile aggiungere in common.css

Codice: Seleziona tutto

.allise-tooltip { display: inline-block; border-bottom: 1px dashed red; cursor: pointer; }

per rendere la parola tooltip sottolineata e con la manina pointer quando vi si passa sopra.