pannellino per cambiare colore alle pagine tramite css e JS

User Name

Utente Attivo
17 Mar 2005
42
0
6
ciao a tutti vorrei sapere se conoscete uno script già fatto per ottenere l'effetto come in questo sito:


in alto a destra è possibile cliccare sull'immagine del pennello per far aprire un menu dal quale scegliere il colore da attribuire alla pagina.
inoltre mi sembra di aver capito che il colore si sovrappone ad una immagine griga con una trama. è possibile?
grazie mille

Segnala
 

lukeonweb

Utente Attivo
5 Mar 2003
5.176
10
38
43
Napoli
www.lucaruggiero.it
Lo script per aprire il box è simile a quello che ti mostro in questo esempio di menu:

http://www.menujavascript.org/menu-1/horizontal-menu.html

In questo modo apri il "sottomenu" sovrapponendolo agli elementi HTML che ci sono sopra.

Per cambiare la skin alla pagina è sufficiente che imposti un ID al body:

<body id="CorpoPagina">

e lo usi per accedere dinamicamente attraverso Javascript e cambiare lo sfondo.

Ad esempio il verde:

document.getElementById("CorpoPagina").style.backgroundColor = "#0aaa0a";

Ciao!
 

User Name

Utente Attivo
17 Mar 2005
42
0
6
grazie 1000!!

credo di aver capito e non mi pare neanche difficilissimo...almeno spero!!!

ma secondo te la pagina che ti ho fatto vedere ha un'immagine grigia di sfondo alla quale si sovrappone il colore? se si do un image-background al body + un id corpopagina?

e document.getElementById("CorpoPagina").style.backg roundColor = "#0aaa0a";

dove lo metto? ad esempio scrivo verde e lo linko a onclic"document.getElementById("CorpoPagina").style.backg roundColor = "#0aaa0a";

"

grazie ancora
 
Ultima modifica:

lukeonweb

Utente Attivo
5 Mar 2003
5.176
10
38
43
Napoli
www.lucaruggiero.it
Non credo abbia un'immagine di sfondo, applicano "solo" un effetto fade via Javascript, per questo vedi che il box coi colori si scurisce e si attiva a seconda di eventi come il mouseover o altri (non mi piace molto com'è gestito).

Per altro il box con Firefox si sformatta un po, anche se l'effetto fade funziona.

Fammi sapere ;)
 

User Name

Utente Attivo
17 Mar 2005
42
0
6
non so se ho capito ma te intendi il pannellino dove ci sono i quadratini dell'immagine che rimane trasparente fin quando non ci si va sopra col muose?

a me piace la pagina il corpo pagina che ha quella sfumatura trasversale sul bianco stile sfondo macOSX per intenderci.
che si mantiene a presindere del colore che viene applicato.

quello come si fa?

ehe scusa se sono un po' ciuo!
 

User Name

Utente Attivo
17 Mar 2005
42
0
6
ciao!
ho provato così ma non succede nulla
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bg</title>
</head>

<body id="CorpoPagina" style="background-color:#FFFFFF;">






<a href="#" onclick="document.getElementById("CorpoPagina").style.backgroundColor = "#0aaa0a";">verde</a> <a href="#" onclick="document.getElementById("CorpoPagina").style.backgroundColor = "#0000FF";>blu</a>

</body>
</html>

devo mettere qualcos'altro?
grazie
 
Discussioni simili
Autore Titolo Forum Risposte Data
T aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY jQuery 0
F Cerco fotografo per sito abiti da sposa Discussioni Varie 1
R [cerco][retribuito] Collaborazione per creazioni loghi ed altro Offerte e Richieste di Lavoro e/o Collaborazione 0
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
seranto Blocco preventivo e Registro dei Consensi per Cookie tecnici? Leggi, Normative e Fisco 2
D Come estendere la tariffa per Wordpress con Visa? Hosting 1
M Fullcalendar in Codeigniter, un aiuto per la chiamata $ajax ? jQuery 0
N Consigli SEO per il mio sito di web design SEO e Posizionamento 0
P Proiezione di Gauss per grafica su sfera in PVC Photoshop 0
M Sintassi "personalizzata" per mysql workbench? MySQL 0
MarcoGrazia Categorie per settore merceologico di Google SEO e Posizionamento 0
Z PHP.INI - STMP per invio email con PHP Server Dedicati e VPS 0
matteoraggi Local seo per un B&B di Forli SEO e Posizionamento 3
D Ical: Sto realizzando un gestionale per i miei appartamenti di casa vacanza PHP 0
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
P Aiuto per rendere un Bot Telegram Privato PHP 1
V Query per una somma PHP 2
A Tabella con bottoni per aggiornamento record PHP 6
G Consigli SEO per scrittura e struttura pagine SEO e Posizionamento 8
P Passare solo alcuni parametri a script per CSV PHP 0
A Consiglio per creazione sito web CMS (Content Management System) 1
A Regex per isolare link interni con rel noopener PHP 0
L form immagini per il database PHP 0
S CREAZIONE DI SITO PER CORSI DI FORMAZIONE WordPress 3
I [cerchiamo][retribuito] Grafico/a per stickers Offerte e Richieste di Lavoro e/o Collaborazione 0
R Cercarsi programmatore per GDR PBC Offerte e Richieste di Lavoro e/o Collaborazione 0
L Sessione e array per utenti PHP 0
A Sottoquery con group by per mese MySQL 0
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
V [Cerco] Socio e Sviluppatore per App PlacesFinder Offerte e Richieste di Lavoro e/o Collaborazione 0
M user agent per il download di api PHP 0
B Stringa sql per ricerca su più campi Database 1
Cosina Upload multiplo con invio allegati per email PHP 0
P Editor per la realizzazione di siti HTML e CSS 2
M Versione nativa per M1. Photoshop 1
A Aiuto per pagina php PHP 0
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
T [cerco] scrittore/scrittrice per articoli web Offerte e Richieste di Lavoro e/o Collaborazione 5
L Interfaccia grafica per gestire sql server .NET Framework 1
B javascript per problemi con pdf e Safari Javascript 0
R Plugin per Gestire videocorsi a pagamento WordPress 3
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
C media per riga MySQL 1
I Cerca: blogger IT per articoli di prova Offerte e Richieste di Lavoro e/o Collaborazione 0
R Plugin per Registrazione Utente e Pagamento prodotto WordPress 2
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
D modificare questo codice per inserimento in text e non in tabella jQuery 1
U [Cerco ] incremento traffico per il mio sito Vendere e Acquistare pubblicita' online 0
E Monitor per Photoshop Photoshop 0
S Libreria PHP per creare file dwg o dxf PHP 0

Discussioni simili