Inserire immagine con drop down nella toolbar

Mi sono immersa nei nuovi ghiottissimi tutorial. Complimenti ragazzi... avete fatto un lavorone.

Ora stavo armeggiando con questo.

https://aiuto.forumattivo.it/t16155-cinque-modi-per-personalizzare-la-toolbar?highlight=toolbar

per la precisione con questo codice

Codice:

$(window).load(function() {
    fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
});

Lavora perfettamente, però io vorrei sostituire la parola forums con un immagine e " non gliela fo"....

is possible? Volete aiutare questa rompiscatole?

Ciao,

certo, basta inserire al posto di forum Questo codice:

Codice:

<img src="LINK">

e sostituisci Link con quello dell'immagine

Viene fuori una cosa strana


Il link l'ho messo così. Ho toppato con le virgolette?

Codice:

 $(window).load(function() {
    fmtabs.list('<img src="http://i39.servimg.com/u/f39/18/91/14/63/new-2413.png">', '<a href="/portal?pid=3-">Messaggi ultima visita</a><br /><a href="/f2-">Forum 2</a>');
});

il codice sembra giusto

ti spiego il mio problema: il mio laptop è andato, e mi ritorna venerdì... quindi ora sono dal cellulare, motivo per cui non posso aiutarti subito
per te è un problema aspettare?

mi dispiace davvero, perdonami

Ma figurati ! Aspettare non è un problema.
Intanto ci ragiono su anche io.

Ho notato una cosa.

se modifico il codice così 

Codice:

 $(window).load(function() {
    fmtabs.list('<img src=http://i39.servimg.com/u/f39/18/91/14/63/new-2414.png>', '<a href="/portal?pid=3-">Messaggi ultima visita</a><br /><a href="/f2-">Forum 2</a>');
});

non si impalla.



Però scompare del tutto il drop down.

Non so se può aiutarti questa scoperta, ma te lo dico.


Grazie di tutto.

ma in teoria gli apici e i quotes non dovrebbero disturbarsi a vicenda..
quando avrò il pc ci ragionerò, scusami ancora

sono tornato

dunque, tu mi dici che quel codice se lo usi per inserire del testo (esempio: forum) funziona normalmente, ma se vuoi inserire un'immagine al posto del testo, ti sballa tutto..

esatto? quindi con il testo funziona bene?

Sì, esattamente.
Funziona con il testo, ma non con un immagine.

Ci sono novità?

Ciao,

perdonami me ne ero scordato

allora ho fatto delle prove, e per esempio, questo codice mi funziona perfettamente:

Codice:

$(window).load(function() {
    fmtabs.add('<img src="http://2img.net/i/fa/i/toolbar/pa0.png">');
});

prova a dirmi se funziona anche per te :/

Niko scusami ma non va bene,
l'imagine si vede, ma dov'è il  menù drop-list?

ma quel codice serve per aggiungere un elemento alla Toolbar, tutto qui :p

Ah, ok.
 Però io avevo chiesto come modificare il codice presente nel tuo tutorial che permetteva di creare una drop down list con immagine. :)
 Non si può fare?

hai ragione, sono proprio fuso

allora con questo non ci sono problemi con le classi o testi a caso..

Codice:

$(window).load(function() {
fmtabs.list('<img src=http://2img.net/i/fa/fdf/questions.png>', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
});

il problema è che nel codice javascript il primo elemento Forums che tu vuoi trasformare in immagine viene assegnata anche come classe per gli elementi del drop-down menù..
qualcosa del genere potrebbe funzionare:

Codice:

(function() {
  window.fmtabs = {
      add: function (name) {
        $('#fa_right').prepend('<div class="toolbar_name"><img src="' + name + '"></div>');
      },
      list: function (name, html) {
            $('#fa_right').prepend('<div id="toolbar_list_name_' + name + '" class="toolbar_list_name"><img src="' + name + '"></div><div id="toolbar_list_' + name.replace(/\s/g, '_') + '" class="toolbar_list">' + html + '</div>');
            $('#toolbar_list_name_' + name.replace(/\s/g, '_')).click(function() {
              if (this.className == "toolbar_list_name") this.className += " active";
              else this.className = "toolbar_list_name";
              this.nextSibling.style.left = this.offsetLeft + 'px';
              this.nextSibling.style.top = this.offsetHeight + 'px';
              $(this.nextSibling).slideToggle();
            });
      }
  };
})();

$(window).load(function() {
fmtabs.list('http://2img.net/i/fa/fdf/questions.png', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
});

Se così non fosse, un'altra soluzione potrebbe essere quella di sostituire il testo con un'immagine in seguito.. ovvero:

• Si carica lo script per il drop-down con il testo "Forum"
  
• Un altro codice cambia testo con l'immagine

fammi sapere

Non ti preoccupare  

Io ho provato e così com'è c'è il solito problema: immagine senza drop down



Non ho capito i tuoi consigli su cosa modificare.

Se così non fosse, un'altra soluzione potrebbe essere quella di sostituire il testo con un'immagine in seguito.. ovvero:

• Si carica lo script per il drop-down con il testo "Forum"
  
• Un altro codice cambia testo con l'immagine
  

Mi puoi spiegare come ad un bambino?

allora tu installa il tutorial con la scritta, quindi così come era nel tutorial

quando lo hai installato ti dirò la seconda parte

Già fatto sul mio forum di prova

http://proveprovate.forumattivo.it/


Passiamo allo step successivo

ora crea un altro javascript in tutte le pagine

Codice:

$(function() {
document.getElementById("toolbar_list_name_http://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
 }});

in pratica sostituisce il contenuto con Testo

Fatto  


.... però non si vede più nulla.

http://proveprovate.forumattivo.it/

Ho aggiunto questo senza eliminare il precedente, creando un nuovo Java.

Ho sbagliato?

Codice:

$(window).load(function() {
    fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
document.getElementById("toolbar_list_name_http://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
});

prova a farne uno unico in questo modo

Fatto. Ho rimosso tutti i precedenti e ho messo solo questo.
Niente. 
Sembra che non legga l'immagine. È così?

Mi spiace venir sembre fuori con richieste complicate

potresti darmi tutto il codice che hai inserito?

figurati, dai che ci riusciamo

Oh yes

nel css

Codice:


    #fa_right .toolbar_list_name, #fa_right .toolbar_name {
        display: inline-block;
        line-height: 30px;
        padding: 0px 5px;
        color:rgb(206, 215, 229);
    }
    #fa_right .toolbar_list_name.active {
        background-color: #FFF;
        color: #000;
        border-left: 1px solid #000;
        border-right: 1px soli #000;
    }
    #fa_right .toolbar_list {
        display: none;
        position: absolute;
        list-style-type: none;
        margin: 0px;
        padding: 0px 10px;
        background-color: #FFFFFF;
        min-width: 200px;
        width: auto;
        border: 1px solid #333333;
        line-height: 30px;
        border-top: 0px solid #FFFFFF;
        z-index: 999;
        color: #000000 !important;
    }
    #fa_right .toolbar_list :link, #fa_right .toolbar_list :visited {
        color: #00569C !important;
    }

Java - tutte le pagine

Codice:

$(window).load(function() {
        fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
    document.getElementById("toolbar_list_name_http://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
    });

Cambiamo metodo di javascript allora
ricordati che questo codice va inserito alla fine di quello "principale"

Codice:

$(function() {
        fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
    });

Poi prova a rimettere in un codice a parte questo:

Codice:

$(function() {
document.getElementById("toolbar_list_name_http://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
});

Ho provato. Purtroppo sparisce la toolbar.
Questa combinazione per ora è la migliore. Però niente immagine visibile.

Codice:

(function() {
      window.fmtabs = {
          add: function (name) {
            $('#fa_right').prepend('<div class="toolbar_name">' + name + '</div>');
          },
          list: function (name, html) {
                $('#fa_right').prepend('<div id="toolbar_list_name_' + name + '" class="toolbar_list_name">' + name + '</div><div id="toolbar_list_' + name.replace(/\s/g, '_') + '" class="toolbar_list">' + html + '</div>');
                $('#toolbar_list_name_' + name.replace(/\s/g, '_')).click(function() {
                  if (this.className == "toolbar_list_name") this.className += " active";
                  else this.className = "toolbar_list_name";
                  this.nextSibling.style.left = this.offsetLeft + 'px';
                  this.nextSibling.style.top = this.offsetHeight + 'px';
                  $(this.nextSibling).slideToggle();
                });
          }
      };
    })();
    $(window).load(function() {
        fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
    document.getElementById("toolbar_list_name_http://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
    });

Se l'immagine la infilassimo nel CSS?
Non so, è un' idea.